Setting Up React Development Environment

Before we start building React applications, we need to set up our development environment. This lesson will guide you through installing all the necessary tools and creating your first React project.

Prerequisites

1. Node.js and npm

React applications require Node.js and npm (Node Package Manager) to run development tools and manage dependencies.

Installing Node.js

For Windows:

Visit nodejs.org
Download the LTS (Long Term Support) version
Run the installer and follow the setup wizard
Node.js installation includes npm automatically

For macOS:

# Using Homebrew (recommended)
brew install node

# Or download from nodejs.org
# Visit https://nodejs.org and download the macOS installer

For Linux (Ubuntu/Debian):

# Update package index
sudo apt update

# Install Node.js and npm
sudo apt install nodejs npm

# Or using NodeSource repository for latest version
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify Installation

Check if Node.js and npm are installed correctly:

# Check Node.js version
node --version
# Should output something like: v18.17.0

# Check npm version
npm --version
# Should output something like: 9.6.7

2. Code Editor Setup

While you can use any text editor, Visual Studio Code is highly recommended for React development.

Installing VS Code

Download from code.visualstudio.com
Install the appropriate version for your operating system
Launch VS Code

Essential VS Code Extensions

Install these extensions to enhance your React development experience:

Core React Extensions:

ES7+ React/Redux/React-Native snippets - Provides useful code snippets
Bracket Pair Colorizer - Color-codes matching brackets
Auto Rename Tag - Automatically renames paired HTML/JSX tags
Prettier - Code formatter - Automatically formats your code

Additional Helpful Extensions:

GitLens - Enhanced Git capabilities
Material Icon Theme - Better file icons
Thunder Client - API testing tool
Live Server - Local development server

Installing Extensions

Open VS Code
Click the Extensions icon in the sidebar (or press Ctrl+Shift+X)
Search for each extension name
Click "Install" for each extension

Creating Your First React Project

Using Create React App

Create React App is the official tool for creating React projects with zero configuration.

Installation and Setup

# Install Create React App globally (optional)
npm install -g create-react-app

# Create a new React project
npx create-react-app my-first-react-app

# Navigate to the project directory
cd my-first-react-app

# Start the development server
npm start

Note: Using npx (comes with npm 5.2+) runs the latest version without global installation.

Alternative: Using Vite (Faster Option)

Vite is a faster alternative to Create React App:

# Create React project with Vite
npm create vite@latest my-react-app -- --template react

# Navigate to project directory
cd my-react-app

# Install dependencies
npm install

# Start development server
npm run dev

Project Structure Explained

After creating your project, you'll see this structure:

my-first-react-app/
├── public/
│   ├── index.html          # Main HTML file
│   ├── favicon.ico         # Website icon
│   └── manifest.json       # PWA configuration
├── src/
│   ├── App.js              # Main App component
│   ├── App.css             # App component styles
│   ├── index.js            # Entry point
│   ├── index.css           # Global styles
│   └── logo.svg            # React logo
├── package.json            # Project dependencies and scripts
├── package-lock.json       # Dependency lock file
└── README.md               # Project documentation

Key Files Explained:

public/index.html - The single HTML file that serves your React app:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- React app will be injected here -->
  </body>
</html>

src/index.js - The entry point that renders your React app:

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

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

src/App.js - Your main application component:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Development Workflow

Starting Your Development Server

# Navigate to your project directory
cd my-first-react-app

# Start the development server
npm start

This will:

Start a local development server (usually at http://localhost:3000)
Open your default browser automatically
Enable hot reloading (changes reflect immediately)
Show compilation errors in the terminal and browser

Making Your First Change

Open src/App.js in VS Code
Find the paragraph with "Edit src/App.js and save to reload"
Change it to "Hello, React World!"
Save the file (Ctrl+S or Cmd+S)
Watch the browser update automatically!

// Change this line in App.js
<p>
  Hello, React World!
</p>

Useful npm Scripts

Your React project comes with several built-in scripts:

# Start development server
npm start

# Create production build
npm run build

# Run tests
npm test

# Eject from Create React App (advanced)
npm run eject

Development Tools

React Developer Tools

Install the React Developer Tools browser extension:

For Chrome:

Visit Chrome Web Store
Search for "React Developer Tools"
Click "Add to Chrome"

For Firefox:

Visit Firefox Add-ons
Search for "React Developer Tools"
Click "Add to Firefox"

This extension adds React-specific debugging capabilities to your browser's developer tools.

Browser DevTools Tips

Essential keyboard shortcuts:

F12 or Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac) - Open DevTools
Ctrl+Shift+C / Cmd+Shift+C - Element inspector
Ctrl+Shift+J / Cmd+Option+J - Console

Common Setup Issues and Solutions

Issue 1: Command Not Found

Problem: 'node' is not recognized as an internal or external command

Solution:

Restart your terminal/command prompt
Ensure Node.js is properly installed
Check PATH environment variable

Issue 2: Permission Errors (Mac/Linux)

Problem: Permission denied when installing global packages

Solution:

# Use npx instead of global installation
npx create-react-app my-app

# Or configure npm to use a different directory
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

Issue 3: Port Already in Use

Problem: Port 3000 is already in use

Solution:

Kill the process using port 3000
Or start on a different port: npm start -- --port 3001

Issue 4: Slow Installation

Problem: npm install takes too long

Solution:

# Use Yarn as an alternative
npm install -g yarn
yarn create react-app my-app

# Or clear npm cache
npm cache clean --force

Environment Configuration

Creating Environment Variables

Create a .env file in your project root:

REACT_APP_API_URL=https://api.example.com
REACT_APP_VERSION=1.0.0

Important: Environment variables must start with REACT_APP_ to be accessible in your React code.

Using Environment Variables

// In your React components
const apiUrl = process.env.REACT_APP_API_URL;
const version = process.env.REACT_APP_VERSION;

Next Steps

Congratulations! You now have a fully functional React development environment. Here's what we've accomplished:

✅ Installed Node.js and npm
✅ Set up VS Code with React extensions
✅ Created your first React project
✅ Understood the project structure
✅ Made your first code change
✅ Learned about development tools

In the next lesson, we'll dive deeper into your first React application and start building something more interactive!

Practice Exercise

Try these tasks to reinforce your setup:

Create a second React project with a different name
Modify the App.js to display your name instead of "Hello, React World!"
Change the page title in public/index.html
Install the React DevTools browser extension
Open the React DevTools and explore the component tree

Troubleshooting Resources

If you encounter issues:

Ready to build your first interactive React application? Let's continue to the next lesson!

Setting Up React Development Environment

Learning Objectives

Setting Up React Development Environment

Prerequisites

1. Node.js and npm

Installing Node.js

Verify Installation

2. Code Editor Setup

Installing VS Code

Essential VS Code Extensions

Installing Extensions

Creating Your First React Project

Using Create React App

Installation and Setup

Alternative: Using Vite (Faster Option)

Project Structure Explained

Key Files Explained:

Development Workflow

Starting Your Development Server

Making Your First Change

Useful npm Scripts

Development Tools

React Developer Tools

Browser DevTools Tips

Common Setup Issues and Solutions

Issue 1: Command Not Found

Issue 2: Permission Errors (Mac/Linux)

Issue 3: Port Already in Use

Issue 4: Slow Installation

Environment Configuration

Creating Environment Variables

Using Environment Variables

Next Steps

Practice Exercise

Troubleshooting Resources