Setting Up React Environment

Introduction

Before you can write a single line of React, you need a working development environment. That means a JavaScript runtime to power your build tools, a package manager to install libraries, a code editor that understands modern JavaScript and JSX, and a browser with the right debugging tools installed.

This lesson walks through every piece of that setup. By the end, you will have Node.js and npm installed and verified, an editor configured for React development, a clear picture of the tooling landscape (npm, yarn, pnpm, Vite), and a preview of the browser tools you will lean on constantly once you start writing components.

Installing Node.js and npm

React itself is just a JavaScript library, but the tools that build, bundle, and run React projects — Vite, ESLint, and countless packages from npm — all run on Node.js. Node.js is a JavaScript runtime that lets JavaScript execute outside the browser, on your own machine.

Head to nodejs.org and download the LTS (Long Term Support) version — it is the most stable release and the one recommended for almost everyone. The installer for Windows, macOS, and Linux bundles npm (Node Package Manager) automatically, so you get both tools in a single install.

node --version
# v20.11.1

npm --version
# 10.2.4

v20.11.1
10.2.4

Choosing a Code Editor

You can technically write React in any text editor, but a proper code editor makes a huge difference: syntax highlighting for JSX, autocomplete, inline error checking, and one-click formatting all save you time and catch mistakes early. Visual Studio Code (VS Code) has become the de facto standard for React development — it is free, fast, cross-platform, and has an enormous extension ecosystem.

Package Managers: npm, yarn, pnpm

A package manager installs and manages the third-party code your project depends on — React itself, build tools, and any library you add later. npm ships with Node.js by default, so it is what most tutorials (including this course) use, but you will encounter alternatives in real-world projects.

You do not need to master all three right now — this course uses npm throughout. Just know that if you join a team using yarn or pnpm, the commands map almost one-to-one (for example, "npm install" becomes "yarn" or "pnpm install").

Vite vs Create React App

To turn JSX and modern JavaScript into something a browser can run, React projects need a build tool. For years, the official starting point was Create React App (CRA). Today, the React team itself recommends against starting new projects with CRA, and the community has moved to faster, more modern tools — chief among them, Vite.

Browser DevTools & React Developer Tools

Every modern browser ships with built-in Developer Tools (open with F12 or right-click → Inspect) for viewing the DOM, checking network requests, and reading console output. On top of that, you will want the React Developer Tools browser extension, available for Chrome, Edge, and Firefox.

This extension adds two new panels — "Components" and "Profiler" — that let you inspect your component tree, view live props and state, and measure rendering performance. You do not need to install or use it deeply yet; a full lesson later in this course is dedicated entirely to React Developer Tools. For now, just know it exists and is worth installing early.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

A solid development environment removes friction so you can focus on learning React itself. With Node.js and npm installed, an editor configured for JSX, and an understanding of the tooling landscape, you are ready to actually create a project.

In this lesson, you installed and verified Node.js and npm, picked a code editor, learned how npm compares to yarn and pnpm, and saw why Vite has replaced Create React App as the modern standard. Next, you will use these tools to scaffold and run your very first React application.