From your first component to hooks, data fetching, and routing — the most widely used library for building web UIs.

React was released by Facebook (now Meta) in 2013 and has since become the most widely used library for building web user interfaces. Rather than a full framework, React is deliberately focused on one job: turning your application’s data into what the user sees on screen, and keeping that view in sync as the data […]

function CourseCard({ title, lessonCount }) {n return (n <div className=”card”>n <h3>{title}</h3>n <p>{lessonCount} lessons</p>n </div>n );n} Embedding JavaScript expressions Curly braces {} inside JSX drop back into plain JavaScript — {title} above inserts the value of the title variable directly into the markup. Any valid JavaScript expression works: a function call, a ternary, basic arithmetic. className, […]

function CourseCard({ title, lessonCount, level }) {n return (n <div className=”card”>n <span className=”card__tag”>{level}</span>n <h3>{title}</h3>n <p>{lessonCount} lessons</p>n </div>n );n}nnfunction App() {n return (n <CourseCard title=”React” lessonCount={7} level=”Basic to Pro” />n );n} Props (short for “properties”) are how data flows into a component from its parent — title, lessonCount, and level above are all props, passed the […]

Props flow in from a parent; state is data a component owns and manages itself, and — critically — updating it triggers React to automatically re-render that component with the new value. useState import { useState } from “react”;nnfunction LessonCounter() {n const [completed, setCompleted] = useState(0);nn return (n <div>n <p>Completed: {completed}</p>n <button onClick={() => setCompleted(completed […]

Event handlers function StartButton() {n function handleClick() {n console.log(“Starting course…”);n }nn return <button onClick={handleClick}>Start Course</button>;n} React event handlers use camelCase (onClick, not onclick) and are passed an actual function reference, not a string — onClick={handleClick}, never onClick={handleClick()}, which would call the function immediately during render rather than waiting for the actual click. Controlled form inputs […]

import { useState, useEffect } from “react”;nnfunction CourseList() {n const [courses, setCourses] = useState([]);n const [loading, setLoading] = useState(true);nn useEffect(() => {n fetch(“/api/courses”)n .then(response => response.json())n .then(data => {n setCourses(data);n setLoading(false);n });n }, []);nn if (loading) return <p>Loading…</p>;nn return (n <ul>n {courses.map(course => <li key={course.id}>{course.title}</li>)}n </ul>n );n} This pattern — useState to hold the data […]

Client-side routing npm install react-router-dom import { BrowserRouter, Routes, Route, Link } from “react-router-dom”;nnfunction App() {n return (n <BrowserRouter>n <nav>n <Link to=”/”>Home</Link>n <Link to=”/courses”>Courses</Link>n </nav>nn <Routes>n <Route path=”/” element={<Home />} />n <Route path=”/courses” element={<CourseList />} />n </Routes>n </BrowserRouter>n );n} React Router is the standard library for building a multi-page feel inside a React app without […]