Introduction

React.js is one of the most popular JavaScript libraries for building modern, interactive user interfaces. Before you write your first line of React code, it’s important to set up a clean and reliable development environment. A good setup saves time, reduces errors, and makes learning React far more enjoyable.
In this guide, you’ll learn how to install Visual Studio Code (VS Code), Node.js with npm, and Yarn, which together form the foundation of a solid React development workflow. By the end, you’ll be fully ready to create and run your first React application.

1. Installing Visual Studio Code (VS Code)

Visual Studio Code is one of the most widely used code editors for JavaScript and React development. It’s lightweight, fast, and packed with features that make React coding easier and more productive.

Why Use VS Code for React Development

VS Code is popular among React developers because it supports JavaScript, JSX, and TypeScript out of the box, offers a powerful extension ecosystem, includes built-in Git support, and provides an integrated terminal so you can run npm or Yarn commands without leaving the editor.

How to Install VS Code

First, visit the official Visual Studio Code website and download the installer for your operating system (Windows, macOS, or Linux).
On Windows, double-click the downloaded .exe file and follow the setup wizard.
On macOS, open the .dmg file and drag VS Code into the Applications folder.
On Linux, follow the installation instructions specific to your distribution.
Once installed, launch VS Code from your applications menu or system search.

Recommended Extensions for React

To improve your React development experience, consider installing these extensions inside VS Code:
ESLint for catching JavaScript and React errors early, Prettier for consistent code formatting, ES7+ React/Redux Snippets for faster component creation, and GitLens for advanced Git insights.
With VS Code ready, you now have a powerful editor to write, debug, and manage React projects.

2. Installing Node.js and npm

React applications depend on npm (Node Package Manager) to install libraries, manage dependencies, and run scripts. npm comes bundled with Node.js, so installing Node automatically installs npm as well.

Why You Need npm

npm allows you to install React and other libraries, run development servers, manage build and test scripts, and share reusable packages across projects. Without npm (or Yarn), working with React is nearly impossible.

How to Install Node.js and npm

Go to the official Node.js website and download the LTS (Long-Term Support) version, which is recommended for stability.
Run the installer and follow the on-screen instructions. The process is straightforward on Windows and macOS, while Linux users can install Node.js using package managers like apt, yum, or brew.

Verify Installation

After installation, open your terminal or command prompt and run:

node -v
npm -v

If both commands return version numbers, Node.js and npm have been installed successfully. You’re now ready to manage React dependencies using npm.

3. Installing Yarn (Alternative Package Manager)

Yarn is an alternative to npm that many React developers prefer for its speed, reliability, and predictable dependency management. While npm is perfectly fine, Yarn can be especially helpful in larger projects.

Why Use Yarn

Yarn offers faster installs, a lockfile for consistent dependency versions across machines, offline caching, and strong support for monorepos through workspaces.

How to Install Yarn

If npm is already installed, the easiest way to install Yarn globally is:

npm install --global yarn

On macOS, you can also install Yarn using Homebrew:

brew install yarn

Windows users can download the official Yarn installer, while Linux users should follow the Yarn installation guide for their distribution.

Verify Yarn Installation

After installing Yarn, confirm it works by running:

yarn -v

Seeing a version number means Yarn is ready to use.

4. Creating Your First React Project

With VS Code, npm, and Yarn installed, you’re now ready to create your first React application.

Using npm

npx create-react-app my-app
cd my-app
npm start

Using Yarn

yarn create react-app my-app
cd my-app
yarn start

These commands will scaffold a new React project, install all required dependencies, and start a development server with hot reloading. You can open the project folder in VS Code and immediately begin editing React components.

Conclusion

Setting up your development environment is the first and most important step in your React journey. By installing Visual Studio Code, Node.js with npm, and Yarn, you create a strong foundation for building, managing, and scaling modern React applications.
With these tools in place, you can focus on learning React concepts, writing clean code, and turning ideas into real-world applications. Whether you’re a beginner, a student, or preparing for professional development, a proper setup makes all the difference.

How to Set Up React.js: Install VS Code, npm, and Yarn