How to Set Up Your First React App on Your Computer

What Create React App Does and Why You Use It

Create React App is a tool that builds the folder structure and configuration files your React project needs to run. Instead of setting up Node.js, Webpack, Babel, and a dozen other tools by hand — each with its own settings — Create React App does that work for you in one command. You get a working development environment where you can write React code when ready.

React itself is a JavaScript library for building user interfaces. Create React App is the fastest way to start using React without getting stuck on setup. It handles the behind-the-scenes work so you can focus on writing the components and logic that make your website work.

Key Takeaways

You need Node.js installed on your computer before you can use Create React App, and you can read it free from nodejs.org.
The command npx create-react-app my-app creates a new folder with all the files and settings your React project needs.
After creation, you run npm start inside your project folder to launch a development server where you can see your app in a web browser.
Create React App includes a built-in file watcher that reloads your browser automatically whenever you save changes to your code.
The folder structure separates your source code in the src folder from configuration and dependencies, so you know where to write your React components.

Install Node.js First

Create React App runs on top of Node.js, a JavaScript runtime that lets you run JavaScript outside the browser. You must install Node.js before anything else. Go to nodejs.org, read the LTS (Long Term Support) version — not the current version — and run the installer for your operating system.

During installation, accept all the default settings. Node.js includes npm, which is the package manager that downloads and installs the libraries your project needs. When the installer finishes, open a terminal or command prompt and type node --version and npm --version to confirm both installed correctly. You should see version numbers for each.

Run the Create React App Command

Open your terminal or command prompt and navigate to the folder where you want your project to live. If you want your project on your Desktop, type cd Desktop. Then run this command exactly:

npx create-react-app my-app

Replace my-app with whatever you want to name your project — use lowercase letters and hyphens only, no spaces. The npx command downloads and runs Create React App without installing it permanently on your computer. The tool then creates a folder named my-app, downloads all the dependencies your project needs, and sets up the configuration files.

This step takes several minutes because npm is downloading dozens of packages. Do not close the terminal or interrupt the process. When it finishes, you will see a message saying "Happy hacking!" or similar confirmation.

Navigate Into Your Project Folder

After Create React App finishes, type cd my-app in your terminal to move into your new project folder. Replace my-app with whatever name you gave your project. You are now inside the folder where all your React code will live.

Type ls on Mac or Linux, or dir on Windows, to see the files Create React App created. You will see a src folder where you write your React components, a public folder for static files like images, a package.json file that lists your project's dependencies, and several configuration files you do not need to touch.

Start the Development Server

Type npm start in your terminal. This command launches a development server on your computer and opens your default web browser to localhost:3000. You should see a spinning React logo and a welcome message. This is your app running locally — nobody else can see it yet, only you on your computer.

The development server stays running in your terminal. Leave it open. Whenever you save changes to any file in your src folder, the server detects the change, rebuilds your app, and reloads the browser automatically. This when ready feedback loop is why Create React App is so useful for learning and building.

Edit Your First Component

Open your project folder in a code editor like Visual Studio Code (free read from code.visualstudio.com). Navigate to the src folder and open the file named App.js. This is your main React component — the top-level piece of your app that everything else lives inside.

You will see JavaScript code with HTML-like syntax called JSX. Change the text inside the <h1> tag to something else, like "Hello World". Save the file. Watch your browser — it reloads automatically and shows your new text. That is the development server working. Every time you save, your changes appear when ready in the browser.

Understand the Folder Structure

The src folder is where you write your React code. App.js is the main component. index.js is the entry point that tells React where to render your app in the HTML file. App.css holds styles for your App component. When you build larger projects, you create new JavaScript files in src for each component you need.

The public folder contains index.html, the single HTML file that React renders into. You rarely edit this file directly. The node_modules folder holds all the packages npm downloaded — it is large and you should never edit it by hand. The package.json file lists your project's dependencies and scripts like npm start and npm build.

Frequently Asked Questions

What does "npx" mean, and why is it different from "npm"?

npm installs packages permanently on your computer. npx downloads and runs a package once without installing it. For Create React App, you use npx because you only need to run it once to set up your project — you do not need it installed forever.

Can I use Create React App on Windows, Mac, and Linux?

Yes. Create React App works the same way on all three operating systems. The only difference is that Windows uses dir instead of ls to list folder contents, and some file paths use backslashes instead of forward slashes. The React code itself is identical.

What if npm start shows an error about a port already in use?

Another program is using port 3000. Type npm start -- --port 3001 to use port 3001 instead. Or find and close the other program using port 3000, then run npm start again.

Do I need to understand all the configuration files Create React App creates?

No. Create React App hides most configuration inside the node_modules folder so you can focus on writing React code. You only need to edit package.json if you want to add new packages, and you rarely need to touch anything else.

How do I share my app with other people?

Running npm start only works on your own computer. To share your app, you need to build it for production with npm run build, then deploy the resulting folder to a hosting service like Netlify or Vercel. That is a separate step after you finish building.

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.