What Create React App does and why you'd use it

Create React App is a tool that sets up a new React project with all the configuration already done for you. Instead of manually installing React, configuring a bundler like Webpack, and setting up a development server, Create React App does all of that in one command. You get a working project folder with a development environment ready to run.

The main reason to use it: React projects need a lot of setup that has nothing to do with writing React code. Webpack needs to know how to turn your code into something a browser can read. Babel needs to convert modern JavaScript into older JavaScript that more browsers understand. A development server needs to reload your code when you make changes. Create React App handles all of this so you can focus on writing components instead of configuration.

If you're starting your first React project or building something small to medium in size, Create React App is the standard choice. For very large projects or when you need unusual configuration, teams sometimes use other tools like Vite or Next.js, but Create React App is where most people begin.

Key Takeaways

  • You need Node.js and npm installed on your computer before you can use Create React App.
  • The command npx create-react-app my-app creates a new project folder with everything configured and ready to run.
  • Running npm start inside your project folder launches a development server where you can see your app in a browser and watch changes happen live.
  • Your React code goes in the src folder, and the main file you edit is src/App.js.
  • When your app is finished, npm run build creates an optimized version ready to put on the internet.

Install Node.js and npm first

Create React App runs through npm, which is a package manager that comes with Node.js. Before you can create a React app, you need both installed on your computer.

Go to nodejs.org and download the LTS (Long Term Support) version, which is the stable version most people use. Run the installer and follow the prompts. When it finishes, Node.js and npm are both installed.

To check that the installation worked, open your terminal or command prompt and type node --version and npm --version. You should see version numbers for both. If you see an error instead, the installation didn't complete — try running the installer again or restart your computer.

Create a new React project with one command

Open your terminal or command prompt and navigate to the folder where you want to create your project. Then run this command:

npx create-react-app my-app

Replace my-app with whatever you want to name your project. The command will take a few minutes to run — it's downloading React, the development tools, and everything else your project needs. You'll see text scrolling in your terminal as it installs packages.

When it finishes, you'll have a new folder named my-app (or whatever name you chose). Inside that folder is your complete React project with all the configuration already set up. You don't need to touch any of the configuration files unless you have a specific reason to later.

Start the development server and see your app running

Navigate into your project folder by typing cd my-app in your terminal. Then run:

npm start

This command starts a development server and opens your app in your default web browser. You'll see a page with the React logo and some text. This is the default starter app that Create React App creates for every new project.

The development server watches your files for changes. If you open src/App.js in a text editor and change some text, save the file, and look back at your browser, the page will reload automatically with your changes. This live reload feature is one of the biggest time-savers when you're building React apps.

To stop the development server, go back to your terminal and press Ctrl+C (or Cmd+C on Mac).

Understand the project folder structure

When you open your project folder, you'll see several files and folders. The ones that matter most when you're starting out are:

src/ — This is where your React code lives. App.js is the main component you'll edit. index.js is the entry point that tells React where to put your app in the HTML page. App.css holds styles for your App component.

public/ — This folder contains the HTML file that your React app runs inside. You rarely need to edit anything here, but index.html is where the <div id="root"></div> lives — that's the container where React renders your components.

package.json — This file lists all the packages your project depends on and the commands you can run (like npm start and npm run build). Don't edit this by hand unless you know what you're doing.

node_modules/ — This folder contains all the actual code for every package your project uses. It's large and you never edit it directly. If you delete it by accident, running npm install will recreate it.

Build your app for the internet when it's ready

While you're developing, you use npm start to run the development server on your computer. When your app is finished and you want to put it on the internet, you need to create a production build.

Run this command in your project folder:

npm run build

This creates a build folder with optimized, minified versions of your code. The files are smaller and faster than the development versions. This is what you upload to a hosting service like Netlify, Vercel, or GitHub Pages.

The build process takes a minute or two. When it finishes, you'll see a message telling you the build was successful and showing you the file sizes. At that point, your app is ready to deploy.

Frequently Asked Questions

Do I have to use Create React App, or are there other ways to start a React project?

Create React App is the most common starting point and handles configuration automatically. Other tools like Vite, Next.js, and Remix also create React projects but with different features and setup. For learning React or building a standard single-page app, Create React App is the standard choice.

What if npm start doesn't work or I get an error?

The most common causes are Node.js not being installed correctly, or your terminal not being in the right folder. Run node --version to confirm Node.js is installed. Make sure you're inside your project folder (the one with package.json) when you run npm start. If you still see errors, try deleting the node_modules folder and running npm install to reinstall everything.

Can I use Create React App for a large production website?

Yes, many production websites use Create React App. It works well for projects of all sizes. As your project grows, you might eventually want to customize the build configuration, which requires running npm run eject — but this is a one-way change and most teams avoid it. For very large teams, some choose Next.js or other frameworks instead, but that's a choice, not a requirement.

How do I add packages like React Router or Axios to my project?

Use npm to install them. For example, npm install react-router-dom or npm install axios. The package is downloaded into node_modules and added to your package.json. Then you can import and use it in your code like any other JavaScript module.

What's the difference between npm start and npm run build?

npm start runs a development server on your computer with live reload and detailed error messages. It's slow and large because it's meant for development. npm run build creates an optimized production version that's fast and small, meant to be uploaded to a hosting service where real users will see it.