Learn how to set up a complete React development environment and create your first React project.
Before we start building React applications, we need to set up our development environment. This lesson will guide you through installing all the necessary tools and creating your first React project.
React applications require Node.js and npm (Node Package Manager) to run development tools and manage dependencies.
For Windows:
For macOS:
# Using Homebrew (recommended)
brew install node
# Or download from nodejs.org
# Visit https://nodejs.org and download the macOS installer
For Linux (Ubuntu/Debian):
# Update package index
sudo apt update
# Install Node.js and npm
sudo apt install nodejs npm
# Or using NodeSource repository for latest version
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
Check if Node.js and npm are installed correctly:
# Check Node.js version
node --version
# Should output something like: v18.17.0
# Check npm version
npm --version
# Should output something like: 9.6.7
While you can use any text editor, Visual Studio Code is highly recommended for React development.
Install these extensions to enhance your React development experience:
Core React Extensions:
Additional Helpful Extensions:
Ctrl+Shift+X)Create React App is the official tool for creating React projects with zero configuration.
# Install Create React App globally (optional)
npm install -g create-react-app
# Create a new React project
npx create-react-app my-first-react-app
# Navigate to the project directory
cd my-first-react-app
# Start the development server
npm start
Note: Using npx (comes with npm 5.2+) runs the latest version without global installation.
Vite is a faster alternative to Create React App:
# Create React project with Vite
npm create vite@latest my-react-app -- --template react
# Navigate to project directory
cd my-react-app
# Install dependencies
npm install
# Start development server
npm run dev
After creating your project, you'll see this structure:
my-first-react-app/
├── public/
│ ├── index.html # Main HTML file
│ ├── favicon.ico # Website icon
│ └── manifest.json # PWA configuration
├── src/
│ ├── App.js # Main App component
│ ├── App.css # App component styles
│ ├── index.js # Entry point
│ ├── index.css # Global styles
│ └── logo.svg # React logo
├── package.json # Project dependencies and scripts
├── package-lock.json # Dependency lock file
└── README.md # Project documentation
public/index.html - The single HTML file that serves your React app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!-- React app will be injected here -->
</body>
</html>
src/index.js - The entry point that renders your React app:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
src/App.js - Your main application component:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
# Navigate to your project directory
cd my-first-react-app
# Start the development server
npm start
This will:
src/App.js in VS Code// Change this line in App.js
<p>
Hello, React World!
</p>
Your React project comes with several built-in scripts:
# Start development server
npm start
# Create production build
npm run build
# Run tests
npm test
# Eject from Create React App (advanced)
npm run eject
Install the React Developer Tools browser extension:
For Chrome:
For Firefox:
This extension adds React-specific debugging capabilities to your browser's developer tools.
Essential keyboard shortcuts:
Problem: 'node' is not recognized as an internal or external command
Solution:
Problem: Permission denied when installing global packages
Solution:
# Use npx instead of global installation
npx create-react-app my-app
# Or configure npm to use a different directory
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH
Problem: Port 3000 is already in use
Solution:
npm start -- --port 3001Problem: npm install takes too long
Solution:
# Use Yarn as an alternative
npm install -g yarn
yarn create react-app my-app
# Or clear npm cache
npm cache clean --force
Create a .env file in your project root:
REACT_APP_API_URL=https://api.example.com
REACT_APP_VERSION=1.0.0
Important: Environment variables must start with REACT_APP_ to be accessible in your React code.
// In your React components
const apiUrl = process.env.REACT_APP_API_URL;
const version = process.env.REACT_APP_VERSION;
Congratulations! You now have a fully functional React development environment. Here's what we've accomplished:
✅ Installed Node.js and npm
✅ Set up VS Code with React extensions
✅ Created your first React project
✅ Understood the project structure
✅ Made your first code change
✅ Learned about development tools
In the next lesson, we'll dive deeper into your first React application and start building something more interactive!
Try these tasks to reinforce your setup:
public/index.htmlIf you encounter issues:
Ready to build your first interactive React application? Let's continue to the next lesson!