React Getting Started

React Getting Started: Setting Up a Modern Vite Project

Getting started with React takes under two minutes when you use Vite as your build tool. Vite compiles JSX quickly, serves instant hot module reloads, and replaces the legacy create-react-app CLI. Before running setup commands, install Node.js 20 LTS or newer on your machine.

Creating Your First React Workspace

Open your terminal in your projects folder and run the Vite scaffold command. Notice how the --template react flag generates a clean JavaScript starter without extra bloat.

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

After npm run dev finishes, open http://localhost:5173 in your browser. Every time you save a file in src/, Vite updates the page without losing local component state.

Key Project Files Explained

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

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

Common Setup Pitfalls

• Using Outdated Node Versions: Vite and React 19 require Node 18+ or 20+. Older Node runtimes throw syntax errors during npm install.
• Running Commands Outside the Project Folder: Calling npm run dev before running cd my-react-app fails because no package.json exists in the parent directory.
• Using Legacy Create React App: create-react-app is deprecated and installs outdated webpack dependencies. Use Vite for single-page apps or Next.js for full-stack apps.

Frequently Asked Questions

Should I install React globally with npm?

No. Keep react and react-dom inside each project's package.json so different projects can safely use different React versions.

Can I test React without installing Node.js?

Yes. You can experiment with React in browser sandboxes or load ESM builds in an HTML page, though real projects always use a local bundler like Vite.

Where should I put new React components?

Create a src/components/ directory and store each component in its own PascalCase file such as src/components/UserCard.jsx.