React Get Started

To get started with React you need Node.js installed and a build tool to bundle your code. In this chapter you will create a React project with Vite, the fast, modern tool most developers now use instead of the older Create React App.

Step 1: Install Node.js

Download the LTS version of Node.js from nodejs.org and install it. Node comes with npm, the package manager you will use to install React. Check that both work in your terminal:

node -v
npm -v
v20.11.1
10.2.4

Step 2: Create a React Project with Vite

Run the following command and answer the prompts. Choose React as the framework and JavaScript as the variant.

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
  VITE v5.2.0  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open the Local address in your browser and you will see the starter page. Vite watches your files, so every time you save, the browser updates instantly. This is called hot module replacement.

React Project Structure

  • index.html — the single HTML page, containing <div id="root"></div>.
  • src/main.jsx — the entry point that calls createRoot and renders <App />.
  • src/App.jsx — your top-level component; start editing here.
  • src/assets/ — images and other static files imported by components.
  • package.json — project name, scripts (dev, build, preview) and dependencies.
  • vite.config.js — Vite settings, including the React plugin.

Editing Your First Component

Replace the contents of src/App.jsx with this and save the file:

export default function App() {
  return (
    <main>
      <h1>My React App</h1>
      <p>Edit src/App.jsx and save to see changes.</p>
    </main>
  );
}
My React App
Edit src/App.jsx and save to see changes.

Building for Production

When your app is ready, run npm run build. Vite creates an optimized dist folder with minified JavaScript and CSS that you can upload to any static host such as Netlify, Vercel or GitHub Pages. Use npm run preview to test the production build locally.

Frequently asked questions

Should I use Create React App or Vite?

Use Vite. Create React App is no longer maintained, while Vite starts in milliseconds, rebuilds quickly and is recommended by the wider React community for single-page apps.

Why does React use .jsx files?

The .jsx extension tells tools that the file contains JSX syntax. Vite and editors use it to apply the right transform and syntax highlighting.

Can I use React without Node.js?

You can load React from a CDN for quick experiments, but real projects use Node.js and npm to install packages, run the dev server and build optimized files.