React on localhost:3000

http://localhost:3000

React development server runs on port 3000 by default with hot module replacement and fast refresh for instant updates during development.

→ Open localhost:3000

Create React Application

Method 1: Create React App

# Create new app npx create-react-app my-react-app # Navigate into directory cd my-react-app # Start development server npm start # Opens at http://localhost:3000

Method 2: Vite (Faster)

# Create with Vite npm create vite@latest my-react-app -- --template react cd my-react-app npm install # Start dev server npm run dev # Opens at http://localhost:5173

React Commands

# Start development server npm start # Build for production npm run build # Run tests npm test # Run tests with coverage npm test -- --coverage # Eject (irreversible) npm run eject

React Project Structure

my-react-app/ ├── public/ │ ├── index.html # HTML template │ ├── favicon.ico │ └── manifest.json ├── src/ │ ├── App.js # Root component │ ├── App.css │ ├── index.js # Entry point │ ├── index.css │ ├── components/ # React components │ │ ├── Header.js │ │ └── Footer.js │ └── utils/ ├── package.json ├── README.md └── node_modules/

Create React Components

Functional Component

// src/components/Welcome.js import React from 'react'; function Welcome(props) { return <h1>Hello, {props.name}!</h1>; } export default Welcome;

Component with Hooks

// src/components/Counter.js import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}> Increment </button>
); } export default Counter;

Component with useEffect

// src/components/DataFetcher.js import React, { useState, useEffect } from 'react'; function DataFetcher() { const [data, setData] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch('http://localhost:3000/api/data') .then(response => response.json()) .then(data => { setData(data); setLoading(false); }) .catch(error => console.error('Error:', error)); }, []); if (loading) return <p>Loading...</p>; return ( <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); } export default DataFetcher;

Change React Port

Environment Variable

# Linux/Mac PORT=3001 npm start # Windows Command Prompt set PORT=3001 && npm start # Windows PowerShell $env:PORT=3001; npm start

package.json

{ "scripts": { "start": "PORT=3001 react-scripts start" } }

.env File

Create .env in project root:

PORT=3001 BROWSER=none

React Development Features

  • Fast Refresh - Preserves component state during updates
  • Hot Module Replacement - Instant updates without full reload
  • Error Overlay - Visual error display in browser
  • Source Maps - Debug original source code
  • ESLint Integration - Code quality checks
  • CSS Modules - Scoped CSS support
  • Production Build - Optimized minified output

Proxy API Requests

Add to package.json to proxy API calls to backend:

{ "proxy": "http://localhost:8000" }

Now API calls work without full URL:

// Instead of: fetch('http://localhost:8000/api/users') // You can use: fetch('/api/users') // React dev server proxies to localhost:8000/api/users

Environment Variables

Create .env file:

# Must start with REACT_APP_ REACT_APP_API_URL=http://localhost:8000 REACT_APP_API_KEY=your-api-key PORT=3000 BROWSER=chrome # Access in code const apiUrl = process.env.REACT_APP_API_URL;

React Router Setup

# Install React Router npm install react-router-dom // src/App.js import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; function App() { return ( <BrowserRouter> <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter> ); } export default App; // URLs: // http://localhost:3000/ // http://localhost:3000/about

Fix "React Not Working"

Issue: Port 3000 already in use

# Find what's using port 3000 # Windows netstat -ano | findstr :3000 # Linux/Mac lsof -i :3000 # Use different port PORT=3001 npm start

Issue: Module not found

# Delete node_modules and reinstall rm -rf node_modules package-lock.json npm install # Or npm ci

Issue: Fast refresh not working

  • Ensure component names start with uppercase
  • Check component is exported correctly
  • Restart dev server
  • Clear browser cache

Issue: Blank page

  • Check browser console for errors
  • Verify index.js imports App correctly
  • Check public/index.html has root div
  • Verify React and ReactDOM versions match

Build for Production

# Create optimized production build npm run build # Output directory: build/ # Contents: build/ ├── static/ │ ├── css/ │ ├── js/ │ └── media/ ├── index.html └── asset-manifest.json # Serve production build locally npx serve -s build -p 3000 # Opens at http://localhost:3000

Install Popular React Packages

# Routing npm install react-router-dom # State management npm install redux react-redux npm install zustand # HTTP client npm install axios # UI components npm install @mui/material @emotion/react @emotion/styled npm install antd # Forms npm install react-hook-form npm install formik yup # Icons npm install react-icons
Performance Tip: Use React.lazy() and Suspense for code splitting to reduce initial bundle size and improve load times.

Frequently Asked Questions

What port does React use?

Create React App uses port 3000 by default. Vite uses port 5173. Both can be changed in configuration.

Do I need Node.js for React?

Yes, React development requires Node.js and npm for running the dev server, managing packages, and building production bundles.

Can I use React without Create React App?

Yes, use Vite for faster development, or configure Webpack/Babel manually. Vite is recommended for new projects.

How do I deploy React from localhost?

Run npm run build, then upload the build/ folder contents to your web server. Configure server to redirect all routes to index.html.

Related Resources