Setting Up Your Environment

Setting Up Your Development Environment

Before you can start building with React, you need to set up your development environment. This lesson will guide you through installing the necessary tools.

Installing Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript outside the browser. npm (Node Package Manager) comes bundled with Node.js and is used to install and manage packages.

Step 1: Download Node.js

Visit nodejs.org and download the LTS (Long Term Support) version for your operating system.

Creating Your First React App

Now that you have Node.js and npm installed, you can create your first React application using Create React App or Vite.

Using Vite (Recommended)

Vite is the modern, faster alternative to Create React App:

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

Using Create React App (Alternative)

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

Understanding the Project Structure

After creating your app, you'll see this folder structure:

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

Video Tutorial

Next Steps