Creating an App with Create React App
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
$ npx create-react-app my-app
Creating: my-app/src, my-app/public, my-app/package.json
Success! Your project is ready.⚠️ Run this command in your terminal.
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
$ npm start
Compiled successfully!
Local: http://localhost:3000⚠️ Run this command in your terminal.
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
$ 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 command in your terminal.
- Using Create React App for new projects even though it's no longer actively recommended in favor of Vite.
- Not understanding what
npm startandnpm run buildactually do under the hood. - Manually editing generated config files without realizing they may be reset on updates.
- 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 startruns a local dev server;npm run buildcreates a production bundle.- CRA is now considered legacy -- Vite is the more commonly recommended alternative today.
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: