Setting Up the React Environment

Before writing any React code, a development environment needs to be set up on the computer. This involves installing the necessary tools and creating a new React project. The setup process is straightforward and only needs to be done once.

What is Needed to Get Started?

The following tools are required to run a React application locally:

• Node.js — A JavaScript runtime that allows JavaScript to run outside the browser. React projects depend on Node.js for development tools and package management.
• npm (Node Package Manager) — Comes bundled with Node.js. It is used to install React and other libraries.
• A code editor — Visual Studio Code (VS Code) is the most popular choice and is free to download.

Step 1 — Install Node.js

Visit the official Node.js website at nodejs.org and download the LTS (Long-Term Support) version. The LTS version is the most stable and recommended for most users.

After installation, open a terminal (Command Prompt on Windows, Terminal on Mac/Linux) and run the following commands to confirm the installation:

node -v
npm -v

If both commands display a version number (for example, v18.0.0), the installation was successful.

Step 2 — Create a New React Project

The easiest and most recommended way to start a React project is by using a tool called Vite. Vite sets up a modern React project quickly with sensible defaults.

In the terminal, navigate to the folder where the project should be created and run:

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

Replace my-react-app with any preferred project name. This command creates a new folder with the project name and sets up all the necessary files.

Alternative: Create React App (Older Method)

Another commonly mentioned method is using Create React App (CRA):

npx create-react-app my-react-app

However, Vite is now preferred because it is significantly faster. Create React App is still functional but slower and less actively maintained.

Step 3 — Install Project Dependencies

After the project is created, navigate into the project folder:

cd my-react-app

Then install all required packages by running:

npm install

This command reads the package.json file in the project and downloads all the required libraries into a folder called node_modules.

Step 4 — Start the Development Server

To run the React application in the browser, start the development server:

npm run dev

Once the server starts, a local address will appear in the terminal — usually http://localhost:5173. Open this address in any browser to see the running React application.

Understanding the Project Folder Structure

After creating a Vite-based React project, the folder structure looks like this:

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

Here is what each important file and folder does:

• src/ — This is where all the React code is written. Most of the work happens here.
• src/App.jsx — The main component of the application. This is the starting point of the React component tree.
• src/main.jsx — The entry point that connects the React app to the HTML file.
• index.html — The single HTML file that the browser loads. React injects the application into this file.
• package.json — Lists the project's name, version, scripts, and dependencies.
• node_modules/ — Contains all installed packages. This folder should not be edited manually.

What Does main.jsx Do?

The main.jsx file is the starting point of every React application. It tells React where to render the application on the HTML page:

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

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

In simple terms, this file says: "Find the HTML element with the id of root and render the App component inside it." Looking at index.html, there is a <div id="root"></div> where React mounts the entire application.

Key Points

• Node.js and npm are required before starting any React project.
• Vite is the recommended tool to create a new React project quickly.
• The src/ folder is where all React components and logic are written.
• main.jsx is the entry point that connects React to the browser.
• Running npm run dev starts the local development server.
• The browser automatically refreshes when code changes are saved during development.

With the environment set up, the next topic explains JSX — the special syntax used to write HTML-like code inside JavaScript files in React.