Html Template

  • 1. Step

    Step 1: sample html

    

              <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8" />
                  <title>Simple HTML Page</title>
                  <link rel="stylesheet" href="style.css" />
                </head>
                <body>
                  <header>
                    <h1>My Website</h1>
                  </header>

                  <nav>
                    <a href="#">Home</a>
                    <a href="#">About</a>
                  </nav>

                  <main>
                    <h2>Welcome</h2>
                    <p>This is a static HTML page.</p>
                  </main>

                  <footer>
                    <p>&copy; 2025 My Website</p>
                  </footer>
                </body>
                </html>

    Step 2: Create a React App (using Vite for speed)

    
                npm create vite@latest my-react-app -- --template react
                cd my-react-app
                npm install
                npm run dev

    Step 3: Clean the Project

    1. Delete everything inside src/App.jsx

    2. Delete src/assets/* if not needed

    3. Clean up src/App.css or replace with your CSS

    Step 4: Convert HTML to JSX

    Open src/App.jsx and paste:

    
                  function App() {
                    return (
                      <div>
                        <header>
                          <h1>My Website</h1>
                        </header>

                        <nav>
                          <a href="#">Home</a>
                          <a href="#">About</a>
                        </nav>

                        <main>
                          <h2>Welcome</h2>
                          <p>This is a static HTML page.</p>
                        </main>

                        <footer>
                          <p>&copy; 2025 My Website</p>
                        </footer>
                      </div>
                    );
                  }

                  export default App;

    Make sure you:

    1. Replace class with className

    2. Close tags like , , etc.

    3. Use one root element (usually a

    or <> ... )

    Step 5: Add CSS

    Move your styles into src/index.css (or use App.css).

    

                    /* src/index.css */
body {
  margin: 0;
  font-family: Arial;
}
header {
  background: #333;
  color: white;
  padding: 1rem;
}
nav a {
  margin: 0 10px;
}

    Make sure it's imported in main.jsx: 

    
  import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

    Step 6: Split Into Components

    Create a folder src/components/ and split your template:

    Header.jsx
    Nav.jsx
    Main.jsx
    Footer.jsx

    Header.jsx 
    

const Header = () => (
  <header>
    <h1>My Website</h1>
  </header>
);

export default Header;
    Use in App.jsx: 
    
  import Header from './components/Header';
import Nav from './components/Nav';
import Main from './components/Main';
import Footer from './components/Footer';

function App() {
  return (
    <>
      <Header />
      <Nav />
      <Main />
      <Footer />
    </>
  );
}