Getting Started with React

Prerequisites

HTML & CSS — basic structure and styling
JavaScript (ES6+) — arrow functions, destructuring, spread, modules, promises
Node.js & npm — required to run the development toolchain

Setting Up a React Project

The recommended way to create a new React app is using Vite (fast, modern) or the classic Create React App.

Create React App — Vite (Recommended) and CRA

# Create a new React project with Vite
npm create vite@latest my-app -- --template react

# Navigate into the project
cd my-app

# Install dependencies
npm install

# Start development server (http://localhost:5173)
npm run dev

# Build for production
npm run build

# Create React App (older, slower, but still widely used)
npx create-react-app my-app

cd my-app

# Start development server (http://localhost:3000)
npm start

# Build for production
npm run build

Project Structure

Vite React Project Structure

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/          # images, fonts
│   ├── components/      # reusable components
│   ├── App.jsx          # root component
│   ├── App.css
│   ├── main.jsx         # entry point — renders App into DOM
│   └── index.css
├── index.html           # HTML template
├── package.json
├── vite.config.js
└── .eslintrc.cjs

// src/App.jsx — Root component
import { useState } from 'react'
import './App.css'

function App() {
    const [count, setCount] = useState(0)

    return (
        <div className="App">
            <h1>Hello, React!</h1>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    )
}

export default App

// src/main.jsx — Entry point
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

// Mount the React app into the #root div in index.html
ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
)

Previous Next

Getting Started with React

Prerequisites

Setting Up a React Project

Project Structure

Ready to Level Up Your Skills?