Setting Up Your Development Environment

Tools You Need

Before writing a single line of React code, let us set up a professional development environment that mirrors what teams use in production.

Node.js and npm

React applications are built using Node.js tooling. Install the LTS (Long Term Support) version:

macOS/Linux:

# Using nvm (Node Version Manager) — recommended
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install --lts
nvm use --lts
node --version  # Should show v22.x or later
npm --version   # Should show 10.x or later

Windows: Download the LTS installer from nodejs.org and follow the setup wizard. Verify installation in PowerShell or Command Prompt with node --version.

Code Editor — VS Code

Visual Studio Code is the industry standard for React development. Install these essential extensions:

1. ES7+ React/Redux/React-Native snippets — Generates component boilerplate with shortcodes like rafce
2. Prettier — Automatic code formatting on save
3. ESLint — Catches errors and enforces code quality
4. Auto Rename Tag — Renames paired HTML/JSX tags simultaneously
5. Thunder Client — Test API endpoints without leaving VS Code

Configure VS Code for React:

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

Browser — Chrome with React DevTools

Install the React Developer Tools browser extension. This adds two tabs to Chrome DevTools:

• Components — Inspect the React component tree, view props and state
• Profiler — Record and analyze rendering performance

Terminal

Use your system terminal, VS Code's integrated terminal, or a dedicated terminal like iTerm2 (macOS) or Windows Terminal. You will use the terminal constantly for creating projects, installing packages, and running development servers.

Verifying Your Setup

Run these commands to confirm everything works:

node --version    # v22.0.0 or later
npm --version     # 10.0.0 or later
npx --version     # 10.0.0 or later

If all three commands return version numbers, you are ready to create your first React project in the next lesson.