React Fundamentals

Chapter 2: React Setup and Installation

2.1 Create React App

Create React App is the official tool for setting up new React projects with zero configuration.

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

// Navigate to project
cd my-app

// Start development server
npm start

// App runs on http://localhost:3000

What Create React App Provides:

• Pre-configured build setup
• Development server with hot reload
• Production build optimization
• ESLint configuration
• Jest testing setup
• Modern JavaScript support (Babel)

Alternative Setup Methods:

• Vite: Fast build tool: npm create vite@latest my-app -- --template react
• Next.js: React framework: npx create-next-app my-app
• Manual Setup: Configure webpack, Babel manually

2.2 Project Structure

Understanding the structure helps organize React applications effectively.

my-app/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src/
│   ├── components/
│   │   └── Header.js
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Key Files:

• public/index.html: HTML template
• src/index.js: Application entry point
• src/App.js: Main App component
• package.json: Dependencies and scripts

Organizing Components:

src/
├── components/
│   ├── Header/
│   │   ├── Header.js
│   │   ├── Header.css
│   │   └── Header.test.js
│   └── Button/
│       ├── Button.js
│       └── Button.css
├── pages/
│   ├── Home.js
│   └── About.js
├── hooks/
│   └── useAuth.js
├── utils/
│   └── helpers.js
└── App.js

2.3 Development Server

The development server provides hot module replacement and error overlay.

Features:

• Automatic page refresh on file changes
• Error overlay in browser
• Fast refresh (preserves component state)
• Source maps for debugging

2.4 Build and Deployment

Build React apps for production deployment.

// Create production build
npm run build

// Build creates optimized files in build/ folder
// Ready for deployment to any static hosting