Setting Up Your Environment

What You'll Need

To develop React applications, you'll need three essential tools:

1. Node.js - A JavaScript runtime that lets you run JavaScript outside the browser
2. npm (Node Package Manager) - Comes with Node.js, helps you install and manage libraries
3. A code editor - We recommend Visual Studio Code (VS Code), but you can use any text editor you prefer

Step 1: Installing Node.js and npm

Node.js is the foundation of modern JavaScript development. When you install Node.js, npm is automatically included. Let's get it installed!

For Windows Users

1. Visit the official Node.js website: https://nodejs.org
2. You'll see two download options: LTS (Long Term Support) and Current. Choose the LTS version - it's more stable and recommended for most users.
3. Download the Windows Installer (.msi file) and run it
4. Follow the installation wizard:
   • Click "Next" through the welcome screens
   • Accept the license agreement
   • Keep the default installation location (usually C:\Program Files\nodejs\)
   • Make sure "Add to PATH" is checked (it should be by default)
   • Click "Install" and wait for it to complete
5. Click "Finish" when installation is complete

For Mac Users

1. Visit https://nodejs.org
2. Download the LTS version for macOS
3. Open the downloaded .pkg file
4. Follow the installation wizard:
   • Click "Continue" through the introduction
   • Accept the license agreement
   • Click "Install"
   • Enter your Mac password when prompted
5. Wait for installation to complete and click "Close"

For Linux Users (Ubuntu/Debian)

Open your terminal and run these commands:

# Update package index
sudo apt update

# Install Node.js LTS version
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# Verify installation
node --version
npm --version

Verifying Your Installation

Let's make sure everything installed correctly. Open your terminal or command prompt and run these commands:

# Check Node.js version
node --version
# Should show something like: v20.11.0

# Check npm version
npm --version
# Should show something like: 10.2.4

Step 2: Installing a Code Editor

While you can write code in any text editor, we strongly recommend using Visual Studio Code (VS Code). It's free, powerful, and has excellent support for React development.

Installing VS Code

1. Visit https://code.visualstudio.com
2. Click the big download button for your operating system (Windows, Mac, or Linux)
3. Run the downloaded installer
4. Follow the installation wizard (you can keep all default options)
5. Launch VS Code when installation is complete

Essential VS Code Extensions for React

VS Code becomes even more powerful with extensions. Here are the must-have extensions for React development:

How to Install Extensions

1. Open VS Code
2. Click the Extensions icon in the left sidebar (or press Ctrl+Shift+X on Windows/Linux, Cmd+Shift+X on Mac)
3. Search for the extension name
4. Click "Install"

Recommended Extensions

• ES7+ React/Redux/React-Native snippets - Provides shortcuts for writing React code faster
• Prettier - Code formatter - Automatically formats your code to look clean and consistent
• ESLint - Helps you find and fix problems in your JavaScript code
• Auto Rename Tag - Automatically renames paired HTML/JSX tags
• Path Intellisense - Autocompletes file paths
• GitLens - Enhances Git capabilities (optional but recommended)

Step 3: Creating Your First React App

Now for the exciting part - creating your first React application! We'll use Vite (pronounced "veet"), a modern build tool that's incredibly fast and perfect for React development.

Why Vite?

You might have heard of create-react-app - the traditional way to start React projects. While it's still valid, Vite has become the preferred choice because:

• Lightning fast: Vite starts your development server in milliseconds, not seconds
• Hot Module Replacement: See your changes instantly without losing component state
• Modern: Uses the latest web standards and best practices
• Optimized builds: Creates smaller, faster production bundles
• Better developer experience: Cleaner output and better error messages

Creating a React App with Vite

Open your terminal or command prompt and follow these steps:

1. Navigate to Where You Want to Create Your Project

# On Windows
cd C:\Users\YourName\Documents

# On Mac/Linux
cd ~/Documents

# Or create a new folder for your projects
mkdir react-projects
cd react-projects

2. Create Your React App

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

Let's break down this command:

• npm create vite@latest - Uses npm to create a new Vite project with the latest version
• my-first-react-app - The name of your project (you can change this to anything you like)
• -- --template react - Tells Vite to use the React template

3. Navigate into Your Project

cd my-first-react-app

4. Install Dependencies

npm install

This command downloads and installs all the packages your React app needs. It might take a minute or two. You'll see a progress bar and lots of text scrolling by - that's normal!

5. Start the Development Server

npm run dev

You should see output similar to this:

  VITE v5.0.8  ready in 342 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

6. Open Your App in the Browser

Open your web browser and go to http://localhost:5173

Understanding Your Project Structure

Let's explore what Vite created for you. Open your project folder in VS Code (File → Open Folder), and you'll see this structure:

my-first-react-app/
├── node_modules/        # All installed packages (don't touch this!)
├── public/              # Static files
│   └── vite.svg
├── src/                 # Your React code lives here
│   ├── assets/          # Images, fonts, etc.
│   ├── App.css          # Styles for App component
│   ├── App.jsx          # Main App component
│   ├── index.css        # Global styles
│   └── main.jsx         # Entry point of your app
├── .gitignore           # Files Git should ignore
├── index.html           # HTML template
├── package.json         # Project configuration and dependencies
├── package-lock.json    # Locked dependency versions
└── vite.config.js       # Vite configuration

Key Files and Folders Explained

node_modules/

Contains all the packages and dependencies your project needs. This folder can be huge (thousands of files!) but you never need to touch it. If you delete it, you can always restore it by running npm install.

public/

Static files that don't need processing. These files are served as-is to the browser. Put your favicon, robots.txt, or other static assets here.

src/

This is where you'll spend most of your time! All your React components, styles, and application logic go here.

src/main.jsx

The entry point of your React application. This is where React gets attached to your HTML page. Let's look at what's inside:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

This code:

1. Imports React and ReactDOM
2. Imports your main App component
3. Imports global styles
4. Finds the HTML element with id "root" and renders your App component inside it

src/App.jsx

Your main App component. This is the root component of your React application. You can modify this file to start building your own app!

index.html

The HTML template for your app. Notice it's very minimal - just a <div id="root"></div> where React will inject your entire application.

package.json

The heart of your project configuration. It lists your dependencies, scripts, and project metadata. Let's look at an important part:

{
  "name": "my-first-react-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.8"
  }
}

The scripts section defines commands you can run:

• npm run dev - Starts development server
• npm run build - Creates production-ready files
• npm run preview - Previews the production build

Making Your First Changes

Let's make a simple change to confirm everything is working and to see React's hot reload in action!

1. Open src/App.jsx in VS Code
2. Find the heading that says "Vite + React" and change it to something else, like "My First React App"
3. Save the file (Ctrl+S or Cmd+S)
4. Look at your browser - the change appears instantly!

Try making more changes - modify the count, change colors, add text. Every save instantly updates in your browser. This immediate feedback loop is one of the things that makes React development so enjoyable!

Common npm Commands You'll Use

Here are the commands you'll use most frequently in React development:

Starting and Stopping

# Start development server
npm run dev

# Stop the server (in terminal)
Ctrl + C  (then type 'Y' if asked)

Installing Packages

# Install a new package
npm install package-name

# Install a package as a dev dependency
npm install --save-dev package-name

# Install a specific version
npm install package-name@1.2.3

Building for Production

# Create production build
npm run build

# Preview production build
npm run preview

Cleaning Up

# Reinstall all dependencies (if something goes wrong)
rm -rf node_modules package-lock.json  # Mac/Linux
# or manually delete node_modules folder on Windows

npm install

Common Issues and Solutions

Here are some common problems you might encounter and how to fix them:

Port Already in Use

Error: "Port 5173 is already in use"

Solution: Either stop the other process using that port, or Vite will automatically try the next available port (5174, 5175, etc.).

Module Not Found

Error: "Cannot find module 'xyz'"

Solution: Run npm install to install missing dependencies.

Changes Not Appearing

Problem: You saved changes but don't see them in the browser

Solution:

• Make sure you saved the file (look for the dot next to the filename in VS Code)
• Check the terminal for error messages
• Try refreshing the browser (F5)
• Try stopping and restarting the dev server

Blank Page / White Screen

Problem: Browser shows a blank page

Solution:

• Open the browser console (F12) and check for error messages
• Make sure the dev server is running
• Check that you're visiting the correct URL (http://localhost:5173)

Permission Errors

Error: "EACCES" or permission denied errors

Solution: Don't use sudo with npm commands. If you're getting permission errors, your npm might need to be reconfigured. Search for "fix npm permissions [your OS]" for detailed solutions.

Next Steps: Optional Enhancements

Your environment is ready to go! But if you want to make it even better, here are some optional enhancements:

Git and GitHub

Version control is essential for any developer. If you haven't already:

• Install Git: https://git-scm.com
• Create a GitHub account: https://github.com
• Initialize Git in your project:

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

# Create a repository on GitHub, then:
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

React Developer Tools

Install the React Developer Tools browser extension for Chrome or Firefox. This lets you inspect React components, view props and state, and debug your applications more easily.

• Chrome: Search "React Developer Tools" in Chrome Web Store
• Firefox: Search "React DevTools" in Firefox Add-ons

Additional VS Code Settings

Open VS Code settings (File → Preferences → Settings) and consider these helpful options:

• Enable "Format On Save" (search for "format on save" in settings)
• Set default formatter to Prettier (search for "default formatter")
• Enable "Auto Save" (search for "auto save") - set to "afterDelay"

Key Takeaways

What's Next?

Excellent work! You now have a complete React development environment set up and ready to go. You've created your first React app and seen it running in your browser. That's a huge milestone!

In the next lesson, we'll dive into your first React app and understand exactly what's happening in the code. We'll modify the default app, create our first custom component, and start building something real. Get ready to write some React code! 🚀