2. Setting Up Your Development Environment

Tools You'll Need

Before we start writing React code, we need to set up a proper development environment. There are a few tools you'll install once and use throughout this course.

• Node.js and npm (JavaScript runtime and package manager)
• VS Code (code editor)
• Vite (React project bundler)
• Git (version control, optional but recommended)

Install Node.js

Go to https://nodejs.org and download the LTS version. Installing Node.js also gives you npm, which we'll use to install packages like React.

node -v
npm -v

Run these commands in your terminal to confirm the installation. If both commands show version numbers, you're good to go.

Install VS Code

Download VS Code from the link below. It's one of the most popular editors for JavaScript and React development.

• Install the ES7+ React Snippets extension
• Install Prettier for formatting
• Install vscode-icons (optional)

Create a React Project with Vite

Vite is a fast build tool for modern JavaScript projects. We'll use it to create our React setup.

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

After running npm run dev, Vite will start a local development server and give you a local URL to view your app.

Project Structure Overview

Your React project will have folders like src for components and main.jsx where React is initialized.

my-react-project
├── index.html
├── package.json
├── src
│   ├── App.jsx
│   ├── main.jsx
├── public
└── node_modules

Mini Project Step

Inside your src folder, create a new file called App.jsx if it doesn't exist. Replace its contents with a simple component.

function App() {
  return <h1>My React Course Project is Ready</h1>
}

export default App

Download Node.js

Download VS Code