L3: Development Environment Setup

Before writing React code, you need the right tools. This lesson guides you through setting up a professional development environment.

Required Tools

You'll need four main tools for React development:

1. Installing Node.js

Node.js includes npm (Node Package Manager) which you'll use to install React and other libraries.

Download Node.js

Verify Installation

Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and run:

node --version
npm --version

You should see version numbers:

v18.17.0
9.6.7

Your versions might be different - that's okay as long as Node.js is v18 or higher!

2. Installing VS Code

Visual Studio Code is the most popular editor for React development.

Download VS Code

1. Visit code.visualstudio.com
2. Download for your operating system
3. Install using the installer
4. Launch VS Code

Recommended Extensions

Install these VS Code extensions for the best React experience:

To install extensions:

1. Click the Extensions icon in VS Code (or press Ctrl+Shift+X / Cmd+Shift+X)
2. Search for each extension name
3. Click "Install"

3. Installing Git

Git helps you track changes and collaborate on projects.

Download Git

Verify Git Installation

git --version

Should output something like:

git version 2.39.0

Configure Git

Set your name and email (used for commit history):

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

4. Choose Your Browser

You'll need a modern browser with developer tools. Any of these work great:

• Chrome (recommended) - Best React DevTools
• Firefox - Excellent developer tools
• Edge - Built on Chromium, same tools as Chrome
• Safari - Good for Mac users

Install React Developer Tools

These browser extensions help debug React applications:

• Chrome Extension
• Firefox Extension

We'll use these starting in Module 1!

Creating Your First React Project

Now that you have all the tools, let's create your project!

Using Vite (Recommended)

Vite is the modern build tool we'll use for this course. Open your terminal and run:

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

When prompted:

1. Project name: Accept default or change it
2. Framework: Select "React"
3. Variant: Select "JavaScript"

Navigate to Your Project

cd my-booking-app

Install Dependencies

npm install

This downloads all necessary packages. It might take a minute.

Start the Development Server

npm run dev

You should see:

  VITE v5.0.0  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

View Your App

Open your browser and visit http://localhost:5173/

You should see the default Vite + React page! 🎉

Project Structure

Your new project has this structure:

Key files to know:

• src/App.jsx - Main component (we'll work here a lot!)
• src/main.jsx - Entry point
• package.json - Project configuration and dependencies
• index.html - HTML template

Verify Everything Works

Let's make a small change to confirm everything is set up correctly:

1. Open src/App.jsx in VS Code
2. Find the line that says <h1>Vite + React</h1>
3. Change it to <h1>My Booking App</h1>
4. Save the file (Ctrl+S / Cmd+S)

Your browser should automatically refresh and show "My Booking App"! This is called Hot Module Replacement (HMR) - changes appear instantly without full page reloads.

Troubleshooting

Checkpoint ✅

Before moving on, confirm:

• ✅ Node.js and npm are installed
• ✅ VS Code is installed with extensions
• ✅ Git is installed and configured
• ✅ You created a React project with Vite
• ✅ The development server runs successfully
• ✅ You can edit code and see changes in the browser

Next Up

Your development environment is ready! Next, we'll explore the project you'll be building throughout this course.