Setting Up Your React Environment

Before you start building applications with React, you need to set up your development environment. This includes installing Node.js, a package manager, and creating a React project using tools like Vite or Create React App (CRA).

1. Install Node.js

Node.js is required to run JavaScript outside the browser and is essential for React development.

1. Go to the Node.js official website.
2. Download the LTS (Long-Term Support) version.
3. Install Node.js and verify the installation:

node -v
npm -v

2. Choose a Package Manager: npm or Yarn

React projects require a package manager to manage libraries and dependencies. You can use either:

npm (comes with Node.js by default)

npm install <package-name>

Yarn (alternative package manager, faster dependency management)

npm install --global yarn
yarn add <package-name>

3. Create a React Project

You can set up a React project using Create React App (CRA) or Vite.

Option 1: Using Create React App (CRA)

CRA is the traditional way to start a React project.

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

• Opens your app in the browser at http://localhost:3000/
• Automatically sets up React, Webpack, Babel, and basic configuration.

Option 2: Using Vite (Faster, Modern Tool)

Vite is a newer tool that builds faster and has a smaller bundle size.

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

• Opens your app in the browser at http://localhost:5173/
• Optimized for speed and performance.

4. Recommended Code Editor

Use Visual Studio Code (VS Code) for React development.

• Install VS Code: https://code.visualstudio.com/
• Recommended extensions:
  • ES7+ React/Redux/React-Native snippets
  • Prettier – Code formatter
  • React Developer Tools (Browser extension)

5. Optional: Install Git

Version control is essential for real projects.

git --version

• Download Git from git-scm.com.
• Initialize your project repo:

git init
git add .
git commit -m "Initial commit"

6. Verify Your Setup

After creating your project, open it in the browser to ensure everything works. You should see the React welcome page if setup is successful.