← Back to React Course | Chapter 1: Environment Setup & Tooling | Lesson 4 of 10

Creating an App with Create React App

Create React App is a machine that instantly builds you a ready-to-use React project, so you don't have to assemble all the pieces by hand.

In this page:

  1. What Create React App Sets Up
  2. Starting the Dev Server
  3. The CRA Folder Structure
Syntax
markup 
npx create-react-app app-name
cd app-name
npm start

What Create React App Sets Up

Create React App (CRA) is a command that generates a ready-to-run React project -- folder structure, a build configuration, and a dev server -- so you don't have to configure a bundler by hand.

Note: Run npx create-react-app my-app to scaffold a brand-new project without installing CRA globally first.
Warning: Create React App is now in maintenance mode -- many new projects prefer Vite (covered next) for its faster dev server.

Example: What Create React App Sets Up

bash 
$ npx create-react-app my-app
Creating: my-app/src, my-app/public, my-app/package.json
Success! Your project is ready.

⚠️ Run this in your own terminal or Node.js environment.

Starting the Dev Server

Inside a CRA project, running npm start launches a local development server (usually at localhost:3000) that automatically reloads the page whenever you save a file.

Note: Keep the terminal running npm start open while you work -- closing it stops the dev server.
Warning: npm start in a CRA project is different from a production build -- it's slower and includes extra debugging help not meant for real users.

Example: Starting the Dev Server

bash 
$ npm start
Compiled successfully!
Local: http://localhost:3000

⚠️ Run this in your own terminal or Node.js environment.

The CRA Folder Structure

A fresh CRA project has a src/ folder for your components (starting with App.js and index.js), a public/ folder for static files like the HTML shell and favicon, and package.json listing dependencies.

Note: index.js is the entry point -- it's the file that actually calls ReactDOM.createRoot and renders your top-level App component.
Warning: Editing files inside public/index.html directly is fine for the page title or meta tags, but component UI belongs in src/, not there.

Example: The CRA Folder Structure

bash 
$ ls -R my-app
my-app:
node_modules  package.json  public  README.md  src

my-app/public:
favicon.ico  index.html  manifest.json  robots.txt

my-app/src:
App.css  App.js  App.test.js  index.css  index.js  logo.svg

⚠️ Run this in your own terminal or Node.js environment.

Related Topics

Creating an App with Vite · Creating a Production Build · npm vs yarn vs pnpm · Installing Node.js and npm

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using Create React App for new projects even though it's no longer actively recommended in favor of Vite.
  2. Not understanding what npm start and npm run build actually do under the hood.
  3. Manually editing generated config files without realizing they may be reset on updates.
Chapter Summary
  • Create React App (CRA) scaffolds a complete React project with one command.
  • It bundles Webpack, Babel, and other tooling so you don't configure them yourself.
  • npm start runs a local dev server; npm run build creates a production bundle.
  • CRA is now considered legacy -- Vite is the more commonly recommended alternative today.
Browser Support

The generated app itself supports all modern evergreen browsers by default; CRA is a build tool, not a runtime concern.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson npm vs yarn vs pnpm Next Lesson → Creating an App with Vite

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.