2.7K Views

REACT102 - React Environment Setup

Learn how to set up a modern React development environment using Node.js, npm, and Vite to create your first React application.

Before writing React code, you need a proper development environment.
In this lesson, you will learn how to install the required tools and create a clean, modern React project.

Prerequisites for React

To work with React, you need the following tools installed on your system:

  • Node.js
  • npm (Node Package Manager)
  • A code editor (VS Code recommended)
  • A modern web browser

React itself runs in the browser, but the development tools require Node.js.

Installing Node.js

Node.js allows you to run JavaScript outside the browser and manage project dependencies.

Download Node.js from the official website:

https://nodejs.org

After installation, verify it in the terminal:

node -v
npm -v

You should see version numbers for both commands.

Choosing a React Setup Tool

There are multiple ways to create a React project.
The most popular options are:

  • Create React App (CRA)
  • Vite

For this course, we will use Vite because it is:

  • Faster than CRA
  • Lightweight
  • Modern and flexible
  • Widely adopted

Creating a React App with Vite

Use the following command to create a new React project:

npm create vite@latest my-react-app

When prompted:

  • Select React
  • Choose JavaScript

Navigate into the project folder:

cd my-react-app
npm install

Start the development server:

npm run dev

Your React app will open in the browser.

Project Structure Explained

A typical Vite React project includes:

  • src/ = application source code
  • main.jsx = entry point
  • App.jsx = root component
  • index.html = main HTML file
  • package.json = project configuration

Understanding this structure helps you navigate React projects confidently.

Running and Stopping the App

To run the app:

npm run dev

To stop the server:

  • Press Ctrl + C in the terminal

Any file change automatically reloads the browser.

Recommended VS Code Extensions

Helpful extensions for React development:

  • ES7+ React Snippets
  • Prettier
  • ESLint
  • Auto Rename Tag

These tools improve code quality and developer experience.

Summary

In this lesson, you learned:

  • What tools are required for React development
  • How to install Node.js and npm
  • Why Vite is a great choice for React
  • How to create and run a React project
  • Basic React project structure

In the next lesson, we will explore JSX and learn how React describes UI using JavaScript syntax.