Lesson 4 — Setting Up React Environment (Node.js & npm)

by

Introduction

Before writing your first line of React code, you need to prepare your system.

React does not run directly in the browser like HTML or CSS.
It requires Node.js and npm to manage packages and run development tools.

In this lesson, you will learn step by step how to set up a complete React development environment on your computer.

Don’t worry — this setup is one-time only and very beginner-friendly.

What Is Node.js?

Node.js is a JavaScript runtime that allows JavaScript to run outside the browser.

Why React Needs Node.js

React uses Node.js to:

  • Run a local development server
  • Install packages and libraries
  • Build optimized production files

👉 Without Node.js, React applications cannot run.

What Is npm?

npm (Node Package Manager) comes bundled with Node.js.

Role of npm in React

npm is used to:

  • Install React
  • Manage third-party libraries
  • Update project dependencies

Example:

npm install react

👉 npm makes React development easy and powerful.

Step 1: Download Node.js

  1. Open your browser
  2. Visit the official website: https://nodejs.org
  3. Download the LTS (Long Term Support) version

⚠️ Always choose LTS, not Current.

Step 2: Install Node.js

On Windows

  • Double-click the downloaded .msi file
  • Click Next → Next → Install
  • Restart your system after installation

On macOS

  • Open the downloaded .pkg file
  • Follow on-screen instructions
  • Installation is automatic

On Linux

Use terminal:

sudo apt install nodejs npm

Step 3: Verify Installation

Open Command Prompt / Terminal and run:

node -v

You should see something like:

v18.x.x

Now check npm:

npm -v

If both versions appear, Node.js and npm are installed successfully ✅

Step 4: Install a Code Editor (VS Code)

To write React code, you need a good editor.

Recommended Editor: Visual Studio Code

Download from:

https://code.visualstudio.com

Why VS Code?

  • Free and lightweight
  • Excellent React support
  • Thousands of extensions

Step 5: Recommended VS Code Extensions

Install these extensions (optional but helpful):

  • ES7+ React Snippets
  • Prettier (Code Formatter)
  • ESLint
  • Auto Rename Tag

👉 These tools improve productivity and code quality.

Step 6: Check Your System Is Ready

At this point, your system has:

  • ✔ Node.js
  • ✔ npm
  • ✔ VS Code

🎉 Your React development environment is ready.

What’s Next?

Now that your environment is ready, we will build our first React application.

👉 In the next lesson:

Lesson 5 — Create React App vs Vite
We will compare tools and create your first React project step by step.

Frequently Asked Questions (FAQs)

Do I need Node.js for React?

Yes. Node.js is mandatory to run and build React applications.

Which Node.js version should I install?

Always install the LTS version for stability.

Can I use React without npm?

No. npm (or yarn) is required to manage React dependencies.

Summary

In this lesson, you learned:

  • What Node.js is
  • What npm is
  • Why React needs them
  • How to install and verify Node.js
  • How to prepare your system for React development

You are now ready to start coding in React 🚀

Leave a Comment