React requires Node.js, which you install first, then use its package manager to create a React project

React is a JavaScript library for building user interfaces. To use it, you need Node.js — a tool that lets you run JavaScript outside the browser and manage code libraries. Installing React means downloading Node.js, creating a project folder, and running a few commands in your terminal. The whole process takes about five minutes on most computers.

You do not need to understand how Node.js works internally. You just need it installed so you can use its built-in package manager, called npm, to fetch React and its related tools.

Key Takeaways

  • Download and install Node.js from nodejs.org, which automatically includes npm, the tool you use to install React.
  • Open your terminal or command prompt and run npx create-react-app my-app to generate a new React project folder with all necessary files.
  • Navigate into your project folder with cd my-app and run npm start to launch a development server in your browser.
  • React files live in the src folder; editing files there automatically refreshes your browser so you see changes instantly.

Step 1: Download and install Node.js

Go to nodejs.org and download the LTS (Long Term Support) version, which is the stable version recommended for most people. Click the large green button — it will automatically detect whether you use Windows, Mac, or Linux and give you the right file.

Run the installer file you downloaded. On Windows, double-click it and follow the prompts, accepting the default settings. On Mac, open the .pkg file and follow the installer. On Linux, follow the instructions for your specific distribution on the Node.js website. When the installer finishes, Node.js and npm are both ready to use.

To confirm the installation worked, open your terminal (Mac and Linux) or Command Prompt (Windows) and type node --version. You should see a version number like v18.17.0 or higher. Type npm --version and you should see a version number for npm as well.

Step 2: Create a new React project

In your terminal, navigate to the folder where you want to store your project. For example, if you want it on your Desktop, type cd Desktop. Then run this command:

npx create-react-app my-app

Replace my-app with whatever you want to name your project — use only lowercase letters and hyphens, no spaces. This command downloads React, its dependencies, and a starter project structure. It takes a few minutes the first time because npm is downloading files from the internet.

When the command finishes, you will see a message saying "Happy hacking!" or similar. Your project folder is now ready.

Step 3: Start the development server

Navigate into your project folder by typing cd my-app (or whatever you named it). Then run:

npm start

This command starts a local development server and opens your browser automatically, usually to localhost:3000. You should see a spinning React logo and a welcome page. This page is not your actual app — it is just a template showing that everything is working.

Leave this terminal window open while you work. The development server watches your files and automatically refreshes the browser whenever you save changes.

Step 4: Edit your first React file

Open your project folder in a code editor. Popular free options include Visual Studio Code (download from code.visualstudio.com) or Sublime Text. Open the folder my-app in your editor.

Inside, you will see a src folder. Open the file src/App.js. This is a React component — a reusable piece of your interface. You will see code that looks like HTML mixed with JavaScript. Change the text inside the <h1> tag to something else, like "Hello World". Save the file.

Look at your browser — it should refresh automatically and show your new text. This instant feedback is one of the main reasons developers use a development server like this.

Understanding the project structure

When you create a React project, create-react-app generates several folders and files. The ones you need to know about are:

  • src/ — where you write your React components and JavaScript code. This is where you spend most of your time.
  • public/ — contains your index.html file, the actual HTML page that loads in the browser. You rarely edit this.
  • node_modules/ — contains all the code libraries npm downloaded. Never edit this folder directly.
  • package.json — a file that lists your project's dependencies and the commands you can run, like npm start.

When you run npm start, React takes your code from the src folder, converts it into regular JavaScript and HTML, and serves it to your browser. You do not need to understand this conversion process — just know that it happens automatically.

Stopping and restarting the server

To stop the development server, go to your terminal and press Ctrl+C (on Windows and Linux) or Cmd+C (on Mac). The browser will no longer refresh automatically, but your project files are still there.

To start the server again later, open your terminal, navigate to your project folder with cd my-app, and run npm start again. You can stop and start the server as many times as you need.

Frequently Asked Questions

Do I need to install React separately from Node.js?

No. Node.js includes npm, and npm downloads React for you when you run npx create-react-app. You only install Node.js once, and everything else follows from that.

What if the npm command does not work after I install Node.js?

Restart your terminal completely — close it and open a new window. Sometimes the terminal does not recognize newly installed programs until you restart it. If it still does not work, restart your entire computer.

Can I use a different code editor instead of Visual Studio Code?

Yes. Any text editor works — Sublime Text, Atom, Notepad++, or even the basic text editor that came with your computer. Visual Studio Code is popular because it has built-in features for JavaScript, but it is not required.

What does "localhost:3000" mean?

Localhost means your own computer. The number 3000 is the port — a channel the development server uses to communicate with your browser. You do not need to change it unless another program is already using port 3000.

Do I have to use create-react-app, or are there other ways to install React?

Create-react-app is the simplest way to start. Other tools like Vite or Next.js exist, but they are for more advanced setups. Start with create-react-app and learn the others later if you need them.