ReactJS Installation Guide
Prerequisites
Before installing React, ensure you have these installed:
- Node.js (version 14 or later recommended)
- npm (comes with Node.js) or Yarn (v1.22.0+)
- A code editor (VS Code recommended)
- Chrome Developer Tools for debugging
1. Installation Using create-react-app
Official Boilerplate
The easiest way to set up a React project:
npx create-react-app my-app
cd my-app
npm startThis creates:
- Development environment with live reloading
- Webpack for bundling
- Babel for JSX/ES6+ transpilation
- Jest for testing
2. Manual Setup (Advanced)
Step-by-Step Configuration
- Create project directory:
mkdir react-manual-setup - Initialize npm:
npm init -y - Install React:
npm install react react-dom - Install Babel:
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev - Install Webpack:
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev - Create
webpack.config.jsand configure loaders - Set up Babel presets in
.babelrc
3. CDN Links (Quick Testing)
For quick prototyping without local installation:
<!-- Development -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Production -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>Add Babel standalone for JSX processing:
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>4. Using Vite (Modern Alternative)
Ultra-Fast Development
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run devKey advantages:
- Native ES modules support
- Instant server start
- Lightning-fast HMR (Hot Module Replacement)
- Optimized production build
Project Structure Comparison
create-react-app
my-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── App.css
│ ├── App.js
│ ├── index.js
│ └── index.css
├── package.json
└── README.mdManual Setup
react-manual/
├── dist/
├── node_modules/
├── src/
│ ├── components/
│ ├── App.js
│ └── index.js
├── .babelrc
├── package.json
└── webpack.config.jsPost-Installation Steps
Essential Packages
Recommended additional installations:
npm install react-router-dom axios prop-types
npm install --save-dev @testing-library/react prettier eslintTroubleshooting
Common Issues and Solutions:
| Issue | Solution |
|---|---|
| EACCES permissions error | Run sudo chown -R $(whoami) ~/.npm |
| Port 3000 already in use | Set PORT=3001 before npm start |
| Missing dependencies | Delete node_modules and run npm install |
| Slow installation | Use npm install --verbose to identify bottlenecks |
Environment Setup Verification
Verify your React installation by creating a test component:
// src/App.js
import React from 'react';
function App() {
return <h1>Hello React!</h1>;
}
export default App;Then run the development server:
npm startYou should see "Hello React!" at http://localhost:3000
