Chapter 02

Getting Started

Two ways to run React: a single HTML file for experiments, and a real toolchain for actual projects.

The quickest possible start

You can run React from a single HTML file with no installation at all. This is useful for trying an idea out, and it is how most one-off examples on the web are written.

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
      function App() {
        return <h1>Hello from React</h1>;
      }

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>

Three scripts are doing three jobs. react is the library itself. react-dom connects it to the browser page. Babel translates JSX into ordinary JavaScript in the browser.

Translating JSX in the browser is slow and the development builds are large. This setup is fine for learning and demos, and wrong for anything you ship.

A real project with Vite

For anything beyond an experiment, use a build tool. Vite is the common choice: it starts fast, reloads changes instantly, and produces a small optimised bundle. You need Node.js installed first.

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

The dev server prints a local address, usually http://localhost:5173. Open it, edit a file, and the page updates without a manual refresh.

When you are ready to publish, build the site and upload the output folder to any static host:

npm run build

What the files do

my-app/
  index.html          the single page the browser loads
  package.json        dependencies and scripts
  src/
    main.jsx          entry point: attaches React to the page
    App.jsx           the root component
    index.css         global styles
  public/             files copied as-is (favicon, images)

The entry point is short and worth reading closely, because it is the only place where React meets the page:

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

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

createRoot takes one real DOM element and hands control of everything inside it to React. From then on, React owns that subtree.

Strict Mode

StrictMode is a development-only wrapper. It renders your components twice and runs effects twice on mount, deliberately, to surface code that misbehaves when repeated. If you see a console message logged twice in development, this is usually why. It does not happen in the production build.

File extensions and naming

Component files use .jsx so tools know to expect JSX. Plain .js also works in most setups.
Component names start with a capital letter. This is a rule, not a convention — lowercase names are treated as HTML tags.
One component per file is the usual arrangement, exported as the default.