Why should you care?

Without React, developers hunt through HTML with JavaScript and change each piece by hand. That works for tiny pages but breaks on real apps. React gives you one clear way to say “this is what the screen should look like now,” and it handles the messy DOM work.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

import { createRoot } from 'react-dom/client';

function Hello() {
  return <h1>Hello, React!</h1>;
}

createRoot(document.getElementById('root')).render(<Hello />);

Run Example »

Edit the code and click Run to see the result update live.

What happened?

• Hello is a component — just a function that returns what you want on screen.
• createRoot finds the empty div in index.html and puts your component there.
• When you edit Hello and save, the browser updates automatically during development.

Try it yourself

1. Install Node.js from nodejs.org (LTS version is fine).
2. Open a terminal and run: npm create vite@latest my-app -- --template react
3. Then: cd my-app → npm install → npm run dev
4. Change text or labels in the example and save — watch the browser update.
5. Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

React builds the UI with components. You describe the screen; React updates it when data changes. Start with Vite — it is the easiest way to run React on your machine.