Installation & Setup

Prerequisites

Make sure Node.js is installed on your computer. Node.js ships with npm (Node Package Manager), which is required to run React projects.

# Check Node.js version
node -v

# Check npm version
npm -v

If Node.js is not installed yet, download it from https://nodejs.org.

Creating a Project with Create React App

The traditional way to create a React project:

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

This process creates a my-app folder with a complete project structure.

Creating a Project with Vite (Modern Alternative)

Vite is faster than Create React App and is now the official recommendation from React.

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

Folder Structure

Folder structure produced by create-react-app:

my-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Folder structure produced by Vite:

my-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── index.html
├── package.json
└── vite.config.js

Running the Development Server

# Create React App
npm start

# Vite
npm run dev

Open your browser and visit http://localhost:3000 (CRA) or http://localhost:5173 (Vite).

Key Files

index.js / main.jsx — The application entry point that renders the App component to the DOM.

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

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

App.js / App.jsx — The main component that serves as the root of your application's entire UI.

Summary

Your React development environment is ready. You have an empty project that you can start developing right away.

Next, we will learn about JSX — the syntax React uses to write markup inside JavaScript.