Installation - React Application

System Requirements

Before installing, make sure you have the following installed on your system:

Node.js

Version 14.0 or higher recommended

# Check Node.js version
node --version

# Should output: v14.0.0 or higher

NPM or Yarn

Package manager for JavaScript

# Check NPM version
npm --version

# Or Yarn version
yarn --version

Download Node.js: Visit nodejs.org to download and install the latest LTS version.

Create React App

The easiest way to create a new React application using Create React App (CRA).

Quick Start

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

# Navigate to project
cd my-app

# Start development server
npm start

With TypeScript

# Create React app with TypeScript template
npx create-react-app my-app --template typescript

cd my-app
npm start

Note: Create React App is now in maintenance mode. For new projects, consider using Vite (see below).

Vite Setup (Recommended)

Vite provides a faster and leaner development experience for modern web projects.

Create Vite Project

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

# Or with TypeScript
npm create vite@latest my-app -- --template react-ts

# Navigate and install
cd my-app
npm install

# Start development server
npm run dev

Using Yarn

# Create with Yarn
yarn create vite my-app --template react

cd my-app
yarn
yarn dev

Why Vite?

Lightning-fast HMR (Hot Module Replacement)
Instant server start regardless of app size
Optimized build with Rollup
Native ES modules in development
Rich plugin ecosystem

Installing Dependencies

Essential Packages

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

# State management with Redux Toolkit
npm install @reduxjs/toolkit react-redux

# HTTP client
npm install axios

# Form handling
npm install react-hook-form

# UI component library
npm install @mui/material @emotion/react @emotion/styled

Development Dependencies

# Testing libraries
npm install --save-dev @testing-library/react @testing-library/jest-dom

# ESLint and Prettier
npm install --save-dev eslint prettier eslint-config-prettier

# TypeScript (if not using TS template)
npm install --save-dev typescript @types/react @types/react-dom

Common Dependencies Table

Package	Purpose	Installation
`react-router-dom`	Routing and navigation	`npm install react-router-dom`
`axios`	HTTP requests	`npm install axios`
`@reduxjs/toolkit`	State management	`npm install @reduxjs/toolkit react-redux`
`react-hook-form`	Form validation	`npm install react-hook-form`
`styled-components`	CSS-in-JS styling	`npm install styled-components`

Development Server

Start Development Server

# Create React App
npm start

# Vite
npm run dev

# With custom port
PORT=3001 npm start

Your app will automatically open in the browser at http://localhost:3000 (CRA) or http://localhost:5173 (Vite)

Available Scripts

Command	Description
`npm start` / `npm run dev`	Starts development server with hot reload
`npm test`	Runs test suite in watch mode
`npm run build`	Creates optimized production build
`npm run lint`	Runs ESLint to check code quality
`npm run format`	Formats code with Prettier

Production Build

Build for Production

# Create optimized production build
npm run build

# Build output will be in 'build/' (CRA) or 'dist/' (Vite) folder

Build Optimization

Code splitting and lazy loading
Minification and tree-shaking
Asset optimization
Source maps generation

Deploy to Production

Vercel

npm install -g vercel
vercel

Netlify

npm install -g netlify-cli
netlify deploy

GitHub Pages

npm install --save-dev gh-pages
npm run deploy

Environment Variables: Use .env files for different environments. Prefix variables with REACT_APP_ (CRA) or VITE_ (Vite).

Installation Guide