React Essentials

React is a powerful JavaScript library for building user interfaces using components. You’ll learn the fundamentals of JSX, state, hooks, routing, and context to create interactive and maintainable applications.

Components & JSX

Components are the building blocks of React. JSX allows you to write HTML-like syntax directly inside JavaScript, making UI development declarative and intuitive.

jsx

// Simple React Component
function Welcome() {
  return <h1>Hello, React!</h1>;
}

// Using the component
export default function App() {
  return (
    <div>
      <Welcome />
      <p>Welcome to your first React app!</p>
    </div>
  );
}

State Management & Hooks

Hooks let you use React features like state and lifecycle methods inside functional components. The most common hooks are useState and useEffect.

jsx

import { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div className="text-center">
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

Routing with React Router

React Router enables navigation between pages in a single-page application (SPA). You can define routes and link to them without reloading the page.

jsx

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Us</h2>;
}

export default 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>
  );
}

Global State with Context API

The Context API helps share data across components without prop drilling. It’s ideal for global state like themes, user data, or language settings.

jsx

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function ThemeButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Toggle Theme (Current: {theme})
    </button>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <ThemeButton />
    </ThemeProvider>
  );
}

Performance & Best Practices

Optimize your React apps by minimizing unnecessary re-renders, splitting components logically, and using React.memo or useMemo when appropriate.

jsx

import { memo, useMemo } from "react";

const ExpensiveCalculation = memo(({ value }) => {
  const result = useMemo(() => {
    console.log("Calculating...");
    return value * 2;
  }, [value]);

  return <p>Result: {result}</p>;
});

export default function App() {
  return (
    <div>
      <h2>Performance Example</h2>
      <ExpensiveCalculation value={10} />
    </div>
  );
}