What is React?

Relax. We'll talk through this in plain words — no textbook voice.

React is a popular open-source JavaScript library for building user interfaces. It lets you break down parts of a website — headers, cards, buttons, product lists, profile boxes, and more — into small components, so your code is easier to reuse and easier to maintain as the project grows.

jsx

import React from 'react';
import ReactDOM from 'react-dom/client';

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

This code defines a component called `App` and returns `

Hello, React!

`. Finally, `root.render()` renders the App component inside the `id="root"` element in the HTML.

You should see

A `Hello, React!` heading will appear in the browser.

Info

Capitalizing the first letter of a component name is a React convention. Being able to use `App` like an HTML tag, `<App />`, is thanks to JSX.

Easy traps

The `root` in `document.getElementById('root')` needs to match the id in `index.html`. If it doesn't, your app won't show up.