How to Create a React App From the Command Line

What you need before you start

Creating a React app means installing Node.js first, then using a tool called Create React App to build the folder structure and files you need. You will run commands in your terminal or command prompt — the text-based interface on your computer — rather than clicking through a graphical menu. If you have never opened a terminal before, this guide walks you through each command exactly as you type it.

You need a computer with Windows, Mac, or Linux. You do not need to know JavaScript deeply yet, but you should be comfortable opening a terminal and typing commands without spaces or typos. The whole process takes about 10 to 15 minutes on a typical internet connection.

Key Takeaways

Node.js is the software that lets your computer run React; download it from nodejs.org and run the installer like any other program.
Create React App is a command-line tool that builds a new React project folder with all the files and settings you need in one step.
After running the create-react-app command, you start a local server with npm start to see your app in your web browser.
The src folder inside your project is where you write your React code; the public folder holds your HTML file and images.

Install Node.js on your computer

Go to nodejs.org in your web browser. You will see two large download buttons — one says "LTS" (Long Term Support) and one says "Current". Click the LTS button. This version is more stable and is what most people use for learning and building apps.

The download will be a file named something like "node-v18.17.0-x64-msi" on Windows or "node-v18.17.0.pkg" on Mac. Open this file like you would open any installer — double-click it on Windows or Mac, and follow the on-screen prompts. Accept the default settings. When the installer finishes, close it.

To check that Node.js installed correctly, open your terminal or command prompt. On Windows, press the Windows key and type "cmd", then press Enter. On Mac, press Command and Space, type "terminal", and press Enter. Type this command exactly:

node --version

Press Enter. You should see a version number like "v18.17.0". If you see an error instead, Node.js did not install correctly — restart your computer and try the installer again.

Create a new React project folder

In your terminal, navigate to the folder where you want to create your React app. If you want it on your Desktop, type this command:

cd Desktop

Press Enter. Now type this command to create your React app:

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. Press Enter. This command will download and install all the files React needs. It takes a few minutes. You will see text scrolling in your terminal. When it finishes, you will see a message that says "Happy hacking!" or similar.

Navigate into your new project folder by typing:

cd my-app

Replace "my-app" with the name you chose. Press Enter. You are now inside your React project folder.

Start your React app in the browser

Type this command:

npm start

Press Enter. Your terminal will show some text, and after a few seconds your default web browser will open automatically. You should see a page with the React logo, a spinning icon, and some text that says "Edit src/App.js and save to reload". This means your React app is running.

The terminal is now running a local server — a small web server on your own computer that serves your app to your browser. Do not close the terminal while you are working. If you close it, your app will stop running in the browser. To stop the server when you are done, go back to the terminal and press Ctrl+C (on Windows or Mac).

Understand the project folder structure

Open your project folder in a file explorer or Finder window. You will see several folders and files. The ones you need to know about are:

src — This folder holds your React code. The file "App.js" is the main component you will edit. "index.js" is the entry point that tells React where to put your app in the HTML. When you save changes to files in this folder, your browser automatically reloads to show the changes.

public — This folder holds your "index.html" file, which is the actual HTML page that loads in the browser. It also holds images, icons, and other files that do not change. You rarely edit files in this folder when you are starting out.

node_modules — This folder holds all the code libraries that React and Create React App depend on. It is very large and you should never edit anything inside it. If you delete this folder by accident, you can recreate it by typing "npm install" in your terminal.

package.json — This file lists all the libraries your project uses and the commands you can run (like "npm start"). You will rarely edit this by hand when you are learning.

Make your first change to the app

Open the "src" folder and find the file "App.js". Open it in a text editor — Notepad on Windows or TextEdit on Mac will work, though most developers use a code editor like Visual Studio Code (which is free). Find the line that says "Edit src/App.js and save to reload" and change it to something else, like "Hello, React!". Save the file.

Look at your browser. The page should reload automatically and show your new text. This is how you develop in React — you edit a file, save it, and see the changes instantly in the browser. The terminal running "npm start" watches your files and reloads the page whenever you save.

Stop and restart your app

To stop your React app, go to the terminal and press Ctrl+C. You will see a prompt asking if you want to terminate the batch job (on Windows) or asking if you are sure (on Mac). Type "y" and press Enter. The server stops and your browser will no longer be able to reach your app.

To start it again later, open your terminal, navigate to your project folder with "cd my-app" (or whatever you named it), and type "npm start" again. The browser will open and your app will run.

Frequently Asked Questions

What is the difference between Node.js and React?

Node.js is software that runs JavaScript on your computer. React is a JavaScript library for building web pages. You need Node.js installed so you can use Create React App and run commands like "npm start". React itself is code that Create React App downloads and puts in your project.

Can I use a different code editor instead of Notepad?

Yes. Visual Studio Code is free and popular with React developers. Download it from code.visualstudio.com, install it, and open your project folder in it. You can edit any file in your src folder and save it the same way.

What does "npm" mean?

npm stands for Node Package Manager. It is a tool that comes with Node.js and lets you download and manage code libraries. When you type "npm start", you are telling npm to run the "start" command defined in your package.json file.

Why does my browser show a blank page instead of the React app?

Make sure the terminal is still running — if you closed it, the server stopped. Open your terminal, navigate to your project folder, and type "npm start" again. If the terminal is running but the page is blank, try refreshing your browser with Ctrl+R (Windows) or Command+R (Mac).

Can I create a React app without Create React App?

Yes, but it requires more setup. Create React App handles all the configuration for you, so it is the easiest way to start. Once you understand React better, you can learn about other tools like Vite or Webpack that give you more control.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.