Create React App (CRA) Complete Beginner Guide

Introduction

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

bash
npx create-react-app my-app
cd my-app

bash
yarn create react-app my-app
cd my-app

2) Start the Development Server

bash
npm start
# or
yarn start

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

javascript
export default function Hello({ name }) {
  return <h2>Hello, {name}!</h2>;
}

javascript
import Hello from './components/Hello';

export default function App() {
  return (
    <div>
      <h1>My React App</h1>
      <Hello name="World" />
    </div>
  );
}

5) Fetch Data (Example)

javascript
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)

bash
npm install react-router-dom

javascript
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

REACT_APP_API_URL=https://api.example.com

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

bash
npm run build

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

Share this article

Comments