React Guide

Introduction

React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small, isolated pieces of code called components.

Setup

Create a new React app with create-react-app or Vite. Below is a quick start using Vite.

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

Components

A component is a JavaScript function that returns JSX.

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

State & Props

Use useState to manage local state and pass data via props.

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>
    </div>
  );
}

Hooks

Hooks let you use state and other React features without writing a class.

import { useEffect, useState } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData);
  }, [url]);
  return data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>;
}

Routing

Use react-router-dom for client‑side routing.

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
      </Routes>
    </Router>
  );
}

Deployment

Build your app and serve it with any static host.

npm run build
# Deploy the contents of the /dist folder