Starting a React Project

I. Recommended setup

Option A: Vite (best for SPAs)

Vite is the go-to CRA replacement. Dev server starts in milliseconds and hot module reloading is near-instant.

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

With TypeScript:

npm create vite@latest my-app -- --template react-ts

Open http://localhost:5173 to view the app.

Option B: Next.js (best for full-stack / SSR)

Next.js is the React team’s recommended framework for production apps. It adds file-based routing, server-side rendering, API routes, and image optimisation out of the box.

npx create-next-app@latest my-app
cd my-app
npm run dev

Open http://localhost:3000 to view the app.

II. React and createRoot

React 18 replaced ReactDOM.render() with createRoot. React 19 continues this pattern. Both Vite and Next.js scaffold apps with this automatically.

// Deprecated (React 17 and below)
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// Current (React 18+)
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

III. React app structure (Vite)

After running npm create vite, the project structure looks like:

my-app/
├── public/          # static assets served directly
├── src/
│   ├── App.jsx      # root component
│   ├── App.css
│   ├── main.jsx     # entry point (calls createRoot)
│   └── index.css
├── index.html
├── package.json
└── vite.config.js

Edit src/App.jsx to start building your app. Changes reload instantly.

IV. React Developer Tools

Install the React Developer Tools Chrome extension to inspect component trees, props, and state during development.

Open Chrome DevTools → select the Components or Profiler tab.

Legacy: Create React App (CRA)

If you are maintaining an existing CRA project, it continues to work. CRA requires Node >= 14.

npx create-react-app my-app
cd my-app
npm start

See the React docs on starting a new project for migration options including moving a CRA app to Vite.