⚙️ Setting Up React

Install Node.js, create your first React app, and understand the project structure

Getting Started

Before writing React code, you need to set up your development environment. This lesson covers everything you need to start building React applications.

📦 Prerequisites

1. Install Node.js

React requires Node.js for development tools. Download from nodejs.org.

# Verify installation
node --version    # Should show v18+ or higher
npm --version     # Should show v9+ or higher

2. Choose a Code Editor

Recommended VS Code Extensions:

  • ES7+ React/Redux/React-Native snippets - Code shortcuts
  • Prettier - Code formatter
  • ESLint - Code linter
  • Auto Rename Tag - Rename paired tags

🚀 Method 1: Create React App (CRA)

The official and easiest way to start a React project.

# Create new React app
npx create-react-app my-app

# Navigate to project
cd my-app

# Start development server
npm start

Your app will open at http://localhost:3000

CRA Features:

⚡ Method 2: Vite (Recommended for 2025)

Modern, lightning-fast build tool. Better performance than CRA.

# Create new React app with Vite
npm create vite@latest my-app -- --template react

# Navigate to project
cd my-app

# Install dependencies
npm install

# Start development server
npm run dev

Your app will open at http://localhost:5173

Vite Advantages:

📁 Project Structure

my-app/
├── node_modules/         # Dependencies (don't touch)
├── public/               # Static files
│   └── index.html        # HTML template
├── src/                  # Your React code
│   ├── App.jsx           # Main component
│   ├── App.css           # App styles
│   ├── main.jsx          # Entry point
│   └── index.css         # Global styles
├── .gitignore            # Git ignore rules
├── package.json          # Project info & dependencies
├── vite.config.js        # Vite configuration
└── README.md             # Project documentation

Key Files Explained:

📄 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>  <!-- React mounts here -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

📄 src/main.jsx (Entry Point)

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

// Mount React app to DOM
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

📄 src/App.jsx (Main Component)

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Hello React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Count is {count}
      </button>
    </div>
  )
}

export default App

📄 package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",              // Start dev server
    "build": "vite build",      // Build for production
    "preview": "vite preview"   // Preview production build
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.0"
  }
}

🛠️ Available Commands

# Development (with hot reload)
npm run dev           # Vite
npm start             # Create React App

# Production build
npm run build

# Preview production build
npm run preview       # Vite only

# Run tests
npm test

# Install new package
npm install package-name

# Install as dev dependency
npm install -D package-name

🎨 Your First Edits

Let's customize the default app!

Step 1: Edit App.jsx

import { useState } from 'react'
import './App.css'

function App() {
  return (
    <div className="App">
      <h1>My First React App</h1>
      <p>Hello from React! 🎉</p>
    </div>
  )
}

export default App

Step 2: Edit App.css

.App {
  text-align: center;
  padding: 2rem;
  font-family: system-ui;
}

h1 {
  color: #61dafb;
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
}

💡 Save the files and watch the browser update instantly!

📦 Installing Additional Packages

Popular Packages to Add:

# React Router (for navigation)
npm install react-router-dom

# Axios (for API calls)
npm install axios

# Styled Components (CSS-in-JS)
npm install styled-components

# React Icons
npm install react-icons

# UUID (generate unique IDs)
npm install uuid

Using Installed Packages:

import axios from 'axios'
import { FaHeart } from 'react-icons/fa'
import { v4 as uuidv4 } from 'uuid'

function Example() {
  const id = uuidv4()
  
  return (
    <div>
      <FaHeart color="red" />
      <p>ID: {id}</p>
    </div>
  )
}

🐛 Common Setup Issues

Problem: "npm not found"

Solution: Install Node.js from nodejs.org

Problem: Port 3000 already in use

Solution: Kill the process or use different port:

# macOS/Linux
lsof -ti:3000 | xargs kill

# Or specify different port
PORT=3001 npm start

Problem: Module not found

Solution: Reinstall dependencies:

# Delete node_modules and reinstall
rm -rf node_modules
npm install

Problem: Changes not showing

Solution: Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)

🎯 Development Workflow

  1. Start dev server: npm run dev
  2. Edit code: Make changes in src/ folder
  3. See updates: Browser auto-refreshes
  4. Install packages: npm install package-name
  5. Commit changes: Use Git to version control
  6. Build for production: npm run build
  7. Deploy: Upload dist/ folder to hosting

🎯 Key Takeaways