React Setup

This lesson walks through the prerequisites and tooling you need before writing React code: Node.js, a package manager, VS Code extensions, and React DevTools for inspecting components in the browser.

Prerequisites

React runs on JavaScript, so you need Node.js (LTS version recommended) and npm or a faster alternative like pnpm or yarn. Node provides the runtime for development tools and the build pipeline that bundles your JSX and modules for the browser.

Use a modern editor with ESLint and Prettier support. Install the React Developer Tools browser extension to inspect the component tree, props, state, and hooks while your app runs locally.

# Verify Node.js and npm
node --version   # v20+ recommended
npm --version

# Optional: install pnpm
npm install -g pnpm

Check versions before starting; React 18+ works best with current Node LTS releases.

Recommended Editor Setup

VS Code extensions:
  - ESLint
  - Prettier
  - ES7+ React/Redux/React-Native snippets

Browser:
  - React Developer Tools (Chrome / Firefox / Edge)

Enable "Format on Save" with Prettier for consistent code style.
Configure ESLint with eslint-plugin-react-hooks to catch hook rule violations.
React DevTools adds Components and Profiler tabs in browser devtools.
Use the official TypeScript extension if you plan to adopt TypeScript early.

Setup Checklist

Everything you need before creating your first Vite React project.

Item	Purpose
Node.js LTS	Run dev servers and build tools
npm / pnpm / yarn	Install dependencies
VS Code + ESLint	Catch errors while coding
Prettier	Consistent formatting
React DevTools	Inspect components in the browser
Git	Version control for your project

Choosing a Node.js Version

Use the current LTS release from nodejs.org or a version manager like nvm, fnm, or volta. Pin the Node version in .nvmrc or engines in package.json so teammates and CI use the same runtime.

ESLint and Prettier for React

A minimal ESLint flat config for React + hooks:

npm install -D eslint eslint-plugin-react-hooks eslint-plugin-react-refresh

// eslint.config.js (excerpt)
import reactHooks from 'eslint-plugin-react-hooks';
export default [{ plugins: { 'react-hooks': reactHooks }, rules: reactHooks.configs.recommended.rules }];

Common Mistakes

Using an outdated Node version that lacks support for modern ESM and Vite.
Skipping React DevTools and debugging purely with console.log.
Not enabling the rules of hooks ESLint plugin — it catches real bugs.
Committing node_modules to version control instead of package-lock.json.

Key Takeaways

Install Node.js LTS and a package manager before starting React.
Use ESLint with eslint-plugin-react-hooks and Prettier for quality of life.
React Developer Tools are essential for inspecting live component state.
Pin Node versions for consistent team and CI environments.

Pro Tip

Run node --version and npm --version in your terminal now. Fixing environment issues upfront prevents mysterious build errors later.