The fastest way to start a React project

The standard way to create a React app is to use a tool called Create React App, which sets up a working project folder with all the files and settings you need in one command. You run that command in your terminal, wait a few minutes while it downloads and installs dependencies, and then you have a folder ready to edit and test.

The command itself is straightforward: npx create-react-app my-app (replacing "my-app" with whatever you want to name your project). After it finishes, you navigate into that folder and run npm start to launch a local development server in your browser. From there, you edit the files in your text editor, and the browser automatically refreshes to show your changes.

This approach saves you from manually configuring webpack, Babel, and a dozen other tools that React needs behind the scenes. Create React App handles all of that for you, so you can focus on writing React code instead of wrestling with build configuration.

Key Takeaways

  • Create React App is a command-line tool that generates a complete React project folder with all dependencies pre-configured and ready to use.
  • You need Node.js and npm installed on your computer first; if you do not have them, read the latest LTS version from nodejs.org.
  • The command npx create-react-app my-app creates a new folder, installs all required packages, and takes three to five minutes depending on your internet speed.
  • After creation, npm start launches a development server on localhost:3000 where you can see your app and watch changes update in real time.
  • Create React App includes built-in testing tools, a development server, and a build command for production, so you do not need to install or configure those separately.

What you need before you start

You must have Node.js and npm (Node Package Manager) installed on your computer. npm comes bundled with Node.js, so you only need to read and install Node.js once. Go to nodejs.org, read the LTS (Long Term Support) version, and run the installer for your operating system.

To check whether you already have them, open your terminal or command prompt and type node --version and npm --version. If both commands return a version number, you are ready to go. If either one does not, install Node.js first.

You also need a text editor to write your code. Visual Studio Code is the most common choice among React developers, but any text editor works — Sublime Text, Atom, or even Notepad will do. The editor itself does not create the app; it just lets you edit the files that Create React App generates.

Running the create-react-app command

Open your terminal or command prompt and navigate to the folder where you want your project to live. For example, if you keep projects in a folder called "dev" on your desktop, navigate there first. Then type the command exactly as shown: npx create-react-app my-app. Replace "my-app" with whatever you want to name your project — use lowercase letters and hyphens, no spaces.

The command will take three to five minutes to run. You will see text scrolling in your terminal showing what it is downloading and installing. Do not close the terminal or interrupt the process. When it finishes, you will see a message saying "Happy hacking!" or similar, and your new project folder will be ready.

If the command fails, the most common reason is that Node.js is not installed or not in your system path. Run node --version again to confirm it is installed, then try the create-react-app command again. If you still see an error, try running npm install -g create-react-app first, then use create-react-app my-app instead of the npx version.

Starting the development server

After Create React App finishes, navigate into your new project folder by typing cd my-app (using your actual project name). Then type npm start. This command starts a local development server and automatically opens your app in your default web browser at localhost:3000.

You will see a spinning React logo and a message saying "Edit src/App.js and save to reload." This is the key feature of the development server: whenever you save a file in your project, the browser automatically refreshes to show your changes. You do not have to manually reload the page.

The development server keeps running in your terminal until you stop it. To stop it, press Ctrl+C (or Cmd+C on Mac) in the terminal window. You can start it again anytime by running npm start from inside your project folder.

The files Create React App creates for you

Inside your project folder, you will find a src folder and a public folder, plus several configuration files. The src folder is where you write your React code. The main file is App.js, which is the root component of your app. You also get index.js, which loads your app into the HTML page, and App.css for styling.

The public folder contains index.html, the single HTML file that your React app runs inside. You rarely need to edit this file directly. The node_modules folder holds all the packages that npm installed — React itself, ReactDOM, and hundreds of other dependencies. Do not edit anything in node_modules; it is managed by npm.

The package.json file lists all your project's dependencies and the scripts you can run (like npm start and npm test). The .gitignore file tells Git which folders to ignore if you push your code to GitHub. You do not need to understand all of these files right away — focus on editing files in the src folder first.

Building your app for production

When you are ready to deploy your app to the internet, you need to create a production build. Run the command npm run build from inside your project folder. This command compresses and optimizes your code, removes development-only tools, and creates a build folder with files ready to upload to a web server.

The build process takes a minute or two and produces a folder called build containing static HTML, CSS, and JavaScript files. These files are what you actually upload to a hosting service like Netlify, Vercel, or a traditional web host. The development server (npm start) is only for your local machine while you are writing code.

Create React App also includes a command npm test that runs automated tests on your code, and npm eject, which exposes all the hidden configuration so you can customize webpack and Babel directly. Eject is permanent and rarely necessary for beginners — only use it if you hit a limitation that Create React App does not support.

Common issues and how to fix them

Port 3000 is already in use: If another app is using port 3000, the development server will ask if you want to use port 3001 instead. Type "y" and press Enter. Your app will open at localhost:3001.

npm command not found: This means Node.js is not installed or not in your system path. read and install Node.js from nodejs.org, then restart your terminal and try again.

Create React App is slow or hangs: This usually means your internet connection is slow or unstable. The command needs to read hundreds of megabytes of packages. If it times out, try running the command again. If it keeps failing, check your internet connection and try a different network if possible.

Changes are not showing up in the browser: Make sure you saved the file in your text editor. The development server watches for saved changes, not unsaved ones. If you saved and the page still did not refresh, try stopping the server (Ctrl+C) and running npm start again.

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 official recommendation and the easiest path for beginners because it handles all configuration for you. Other tools like Vite, Next.js, and Remix exist and are faster or more powerful for specific use cases, but they require more setup knowledge. Start with Create React App unless you have a specific reason to use something else.

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

Yes. Node.js and npm work on all three operating systems. The commands are identical on Mac and Linux; on Windows, use the same commands in PowerShell or Command Prompt. If you use Git Bash on Windows, the commands are also the same.

What happens if I delete the node_modules folder?

You can safely delete it — npm can recreate it anytime by running npm install. This is useful if your project is taking up too much disk space or if something in node_modules got corrupted. Just run npm install and npm will read and reinstall all the packages listed in package.json.

How do I add a new package to my React app?

Use the command npm install package-name, replacing "package-name" with the name of the package you want. For example, npm install axios installs the axios HTTP library. npm downloads the package, adds it to node_modules, and updates package.json automatically.

Can I rename my project folder after Create React App creates it?

Yes, you can rename the folder to anything you want. The folder name does not affect how the app works. Just make sure you navigate into the renamed folder before running npm start.