What you need before you start

React is a JavaScript library that runs on your computer during development, then gets packaged into regular HTML and JavaScript that browsers understand. To install it, you need Node.js — a program that lets you run JavaScript outside a web browser and manage the packages React depends on.

Node.js comes with npm (Node Package Manager), which is the tool that actually downloads and installs React. You do not need to understand how npm works yet — you just need to install Node.js first, then use npm to set up React.

The whole process takes about 10 to 15 minutes on a typical internet connection. You will end up with a folder on your computer containing a working React project that you can edit and run locally.

Key Takeaways

  • Download and install Node.js from nodejs.org, which automatically includes npm, the tool that installs React.
  • Open your terminal or command prompt and run a single command to create a new React project folder with all the files you need.
  • Navigate into that folder and run a second command to start a local development server where you can see your React code running in a browser.
  • React projects created this way come with all the build tools and dependencies already configured, so you do not have to set them up manually.

Install Node.js on Windows, Mac, or Linux

Go to nodejs.org in your browser. You will see two large download buttons — one for the LTS (Long Term Support) version and one for the Current version. Download the LTS version, which is more stable and recommended for learning.

Run the installer file you just downloaded. On Windows, double-click it. On Mac, double-click the .pkg file. On Linux, follow the instructions for your distribution on the Node.js website. The installer will walk you through setup — accept the default options unless you have a specific reason to change them.

When the installer finishes, open your terminal (Mac and Linux) or Command Prompt (Windows). Type this command and press Enter:

node --version

If you see a version number like v18.17.0, Node.js installed correctly. If you see "command not found" or "is not recognized", restart your computer and try again — sometimes the system needs to reload to find the new program.

Create a new React project

In your terminal or Command Prompt, navigate to the folder where you want to create your React project. For example, if you want it on your Desktop, type:

cd Desktop

Then run this command to create a new React project. Replace "my-app" with whatever you want to name your project:

npx create-react-app my-app

This command downloads React, all its dependencies, and the build tools needed to run it. The first time you run it, this takes a few minutes — npm is downloading files from the internet. You will see text scrolling in your terminal. This is normal. Wait until you see a message saying the project was created successfully.

When it finishes, navigate into your new project folder:

cd my-app

Start the development server

Now that you have a React project, you need to run it so you can see it in your browser. Type this command:

npm start

Your terminal will show some text, then your default browser should automatically open to localhost:3000. You will see a page with the React logo and some text. This is your React app running locally on your computer.

The development server stays running in your terminal. Any changes you make to the code files in your project folder will automatically reload in the browser — you do not have to restart anything. To stop the server, press Ctrl+C (or Cmd+C on Mac) in your terminal.

Where to find and edit your code

Open the project folder you created (my-app, or whatever you named it) in a code editor. If you do not have one, download Visual Studio Code from code.visualstudio.com — it is free and works well for React projects.

Inside your project folder, look for a folder called src. This is where your React code lives. The file App.js is the main component — this is what you see in the browser right now. Open it and try changing some text, then save the file. Watch your browser automatically update.

The other files in the src folder work together to make your app run. You do not need to understand all of them yet. For now, focus on editing App.js and seeing how changes appear in the browser immediately.

Common problems and how to fix them

Command not found or is not recognized: Node.js did not install correctly or your system has not reloaded. Restart your computer, then try the node --version command again.

The browser does not open automatically: Open your browser manually and go to localhost:3000. If you see a blank page or an error, wait 10 seconds — the development server is still starting up. Refresh the page.

Port 3000 is already in use: Another program is using port 3000. Either close that program or run npm start in a different terminal window — it will use port 3001 instead.

npm start shows errors about missing modules: Go back to your project folder in the terminal and run npm install. This downloads any missing dependencies. Then try npm start again.

What happens next

You now have a working React development environment. The next step is learning React syntax — how to write components, manage state, and handle user interactions. Start by editing App.js and experimenting with the code you see there.

As your project grows, you will add more files to the src folder. Each file can be a separate React component. The development server keeps running in your terminal, so you can edit, save, and see changes instantly in your browser.

When you are ready to share your React app with others or put it on the internet, you will run npm run build. This creates an optimized version of your code in a folder called build. That folder contains everything you need to deploy your app to a web server.

Frequently Asked Questions

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

No. Node.js includes npm, and npm downloads React when you run the create-react-app command. You only need to install Node.js once.

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

Yes. Any text editor works — Sublime Text, Atom, or even Notepad. Visual Studio Code is popular because it has built-in features for JavaScript and React, but it is not required.

What if I want to install React in an existing project instead of creating a new one?

create-react-app is the easiest way to start. If you have an existing JavaScript project and want to add React to it, that requires manual setup of build tools and dependencies. Start with create-react-app first to learn how React works, then explore manual setup later.

Is localhost:3000 safe, or am I exposing my computer to the internet?

Localhost only runs on your computer. Other people on your network or the internet cannot see it. It is completely safe for development. When you stop the development server, localhost:3000 stops working.

Do I have to use npm, or can I use yarn or pnpm instead?

npm comes with Node.js and works fine for learning React. Yarn and pnpm are alternatives that some developers prefer, but they are not necessary. Stick with npm until you have a reason to switch.