Pages made of LEGO
Facebook, Instagram, Netflix and countless other apps are built with React, a JavaScript library for building user interfaces. Instead of changing the page by hand with querySelector and textContent, you describe what the page *should* look like, and React keeps the screen in sync.
LEGO bricks: A page is built from small, reusable pieces called components: a Button, a Card, a Header. Snap them together into bigger pieces, and those into a whole app.
Your first component
import { createRoot } from "react-dom/client";
function Greeting() {
return <h1>Namaste, React!</h1>;
}
const root = createRoot(document.getElementById("root"));
root.render(<Greeting />);- In a real project (created with Vite or Next.js), this setup lives in main.jsx and you mostly write components.
- In Sikau's exercises, if you export default a component, it's shown automatically — just like main.jsx would.
- React isn't magic: under the hood it creates and updates the same DOM elements you used in JavaScript lessons.