Create React App (CRA) Complete Beginner Guide
Introduction
Create React App (CRA) is a quick way to scaffold a React project with zero configuration. In this tutorial, you’ll create a new project, understand the scripts, add components, and build for production. If you're using frameworks like Next.js or Vite, the concepts still help you understand React basics.
Prerequisites
- Node.js 18+ and npm (or Yarn/Pnpm)
- A terminal (PowerShell, bash, or zsh)
- A code editor (VS Code)
1) Create a New React App
Using npm (recommended):
npx create-react-app my-app
cd my-app
Using Yarn:
yarn create react-app my-app
cd my-app
2) Start the Development Server
npm start
# or
yarn start
Open `http://localhost:3000` to see your app. The page reloads when you save edits.
3) Project Structure Overview
my-app/
node_modules/
public/
index.html
favicon.ico
src/
App.css
App.js
index.css
index.js
package.json
- `src/App.js`: Main component
- `src/index.js`: Entry point that mounts React to the DOM
- `public/index.html`: HTML template
4) Create Your First Component
Create `src/components/Hello.js`:
export default function Hello({ name }) {
return <h2>Hello, {name}!</h2>;
}
Use it in `src/App.js`:
import Hello from './components/Hello';
export default function App() {
return (
<div>
<h1>My React App</h1>
<Hello name="World" />
</div>
);
}
5) Fetch Data (Example)
import { useEffect, useState } from 'react';
export default function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(r => r.json())
.then(setUsers);
}, []);
return (
<ul>
{users.map(u => <li key={u.id}>{u.name}</li>)}
</ul>
);
}
6) Add React Router (Optional)
npm install react-router-dom
Basic usage in `src/App.js`:
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
export default function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link> | <Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
7) Environment Variables
CRA exposes env vars prefixed with `REACT_APP_`. Create `.env`:
```.env
REACT_APP_API_URL=https://api.example.com
```
Access in code: `process.env.REACT_APP_API_URL`.
8) Useful Scripts
- Start dev: `npm start`
- Test: `npm test`
- Lint (if configured): `npm run lint`
- Build: `npm run build`
- Preview build locally: `npx serve -s build`
9) Build for Production
npm run build
Outputs an optimized `build/` folder: minified JS/CSS, asset hashing, and a service worker if enabled.
10) Deploy
- Netlify: drag-and-drop the `build/` folder or connect repo
- Vercel: import repo, set build command to `npm run build` and output to `build`
- GitHub Pages: `npm install gh-pages --save-dev` and configure `homepage` + `deploy` script
Troubleshooting
- Clear cache: `rm -rf node_modules && rm package-lock.json && npm i` (Windows: delete folder via Explorer)
- Port in use: change port `set PORT=3001 && npm start` (PowerShell: `$env:PORT=3001; npm start`)
- Node version: ensure compatible Node (use `nvm`/`nvs` to switch).
Conclusion
You created and ran a React app with CRA, added components, routing, env variables, and built for production. From here, explore Next.js or Vite for faster builds and SSR/SSG, but CRA remains a simple way to learn React fundamentals.