The big rebuild: your website in React

Rewrite your Level 1 website in React. The same website, for the third time – this time like a pro.

Your mission

You’ll take your website from Levels 1–2 and build it again in React. Sounds like a step backward? It’s not – it’s the best training there is: you already have the content and design figured out, so you can focus purely on the new technique. And at the end, you’ll see in black and white why the pros find it worthwhile.

The rebuild plan

Split the website into components. Grab paper and a pencil (seriously!) and sketch your website as boxes: Header, Gallery, Quiz, Footer… Each box = one file in src/.
Move the HTML into components. Copy piece by piece from your old .html files into JSX. Watch for the familiar differences: class → className, each component returns one wrapper element. Copy your images into the public/ folder in the Vite project – then paths like /images/team.jpg work unchanged.
Move the CSS. Copy the contents of your style.css into src/App.css. It should work almost unchanged – CSS is still CSS.
Pull the data out into arrays. Cards, results, gallery photos – anything that repeats, turn into an array of objects + .map(), the way you learned in the components lesson.

Rewrite the Level 2 spells as state. Here’s a conversion table:

Level 2 (plain JavaScript)	React
`getElementById` + `textContent`	state + `{value}` in JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.hidden`	boolean state + `{condition && (...)}`
a counter with a variable	`useState` with a number

Show me: dark mode the React way

Let’s rewrite one spell together, so you can see the conversion in action:

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

And in Header.jsx, the button receives a function as a prop:

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

One last new thing: a prop can be a function too. App owns the state and lends its child a button to toggle it. This is called “state lives at the top,” and it’s the most common pattern in React.

Rebuild checklist

The website is split into at least 4 components in separate files
Repeating elements (cards, photos…) are born from an array via .map()
At least two interactive spots run on useState
Dark mode works and is remembered (localStorage)
No errors in the console
There’s no getElementById anywhere in the code 😉

💡

Getting stuck is part of the game. This lesson is a marathon, not a sprint – feel free to split it across several days. When you get stuck: the console (F12), the error message from Vite, and comparing against examples from previous lessons. That’s exactly how a pro debugs.

✅

Check yourself: Your website runs on localhost and looks (almost) the same as before – but inside, it’s made of components, data, and state. Now try adding one card to the data array and watch how little work that takes. That is the whole reason React exists.

What to take away from this lesson

The rebuild: split into components → move the HTML and CSS → data into arrays → spells into state.
A prop can be a function too – a parent lends its children buttons to control its own state.
Same result, cleaner structure: less copying, easier changes. That’s progress you can actually see.