Skip to content
Deepak Paswan Logo
DEEPAK PASWAN
Developer Software
View all Developer Software tools
Image Tools
View all Image Tools
PDF Tools
View all PDF Tools
SEO / Search
View all SEO / Search tools
Network & DNS
Handpicked Developer Utilities, SEO Analyzers, and Conversion Tools (84+ directory)
View All Tools (85+ Directory)

React Tutorial React Foundations

Setting Up a React Development Environment

Lesson 10 of 156 2 min read By Deepak Paswan Updated Oct 10, 2026

Full-project lesson · needs Node.js, npm and real project files, so it does not run in the in-page playground.

To build React projects on your own computer you need only a few tools. All of them are free.

The tools

1. A code editor. Visual Studio Code is a popular choice. It highlights JSX, completes code and has a built-in terminal. Any editor that supports JavaScript works.

2. Node.js. Node.js runs JavaScript outside the browser. React projects use it to run the development server and the build tools. It also installs npm, the package manager used to download libraries such as React. Setup is covered in Node.js and npm for React.

3. A terminal. You will type commands such as npm run dev. Use the terminal built into your editor, PowerShell or Windows Terminal on Windows, Terminal on macOS, or any shell on Linux.

4. A modern browser. Chrome, Edge, Firefox and Safari all work.

5. React Developer Tools. This is a free browser extension for Chrome, Edge and Firefox. It adds a Components tab to the browser’s developer tools, where you can see your component tree, the props and state of each component, and which components rendered. Install it from your browser’s extension store by searching for “React Developer Tools”.

Optional but helpful

  • Git to save versions of your work.
  • An ESLint or Oxlint setup. The Vite React template already includes lint rules for React, including one that catches mistakes with hooks.
  • Prettier or your editor’s formatter to keep code tidy.

A simple workflow

  1. Create a project (next lessons).
  2. Start the development server. It reloads the page when you save a file.
  3. Edit components in the editor.
  4. Watch the page, the browser console and the terminal for messages.
  5. Use React DevTools when something looks wrong.

Do I need to install anything for this course?

Not for most lessons. The Try it playground runs React in your browser. You need Node.js and a project only for the lessons labelled Full-project lesson, such as routing, TypeScript, testing and building for production.

Key points

  • You need an editor, Node.js with npm, a terminal and a browser.
  • React Developer Tools shows components, props and state in your browser.
  • The playground in this course needs no setup; full-project lessons do.