React Introduction

React is a JavaScript library for building user interfaces — created by Meta (Facebook).

Why React?

• Component-based: Build encapsulated components that manage their own state
• Declarative: Describe what the UI should look like, React handles updates
• Virtual DOM: Efficiently updates only what changed
• Huge ecosystem: React Native, Next.js, Remix, etc.
• Most popular: #1 UI library in the world

Your First Component

function Welcome({ name }) {
  return (
    <div className="welcome">
      <h1>Hello, {name}!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

// Usage
<Welcome name="Developer" />

JSX

JSX lets you write HTML-like syntax in JavaScript:

// JSX
const element = (
  <div className="card">
    <h2>Card Title</h2>
    <p>Card content</p>
  </div>
);

// Expressions in JSX
const name = "Alice";
const element = <h1>Hello, {name.toUpperCase()}!</h1>;

// Conditional rendering
const isLoggedIn = true;
const content = (
  <div>
    {isLoggedIn ? <Dashboard /> : <Login />}
    {isLoggedIn && <LogoutButton />}
  </div>
);

useState Hook

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

useEffect Hook

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]); // Re-run when userId changes

  if (loading) return <p>Loading...</p>;
  return <h1>{user?.name}</h1>;
}

Props

// Parent
function App() {
  return (
    <Card
      title="React Basics"
      description="Learn React step by step"
      level="beginner"
      onEnroll={() => console.log("Enrolled!")}
    />
  );
}

// Child
function Card({ title, description, level, onEnroll }) {
  return (
    <div className="card">
      <span className="badge">{level}</span>
      <h2>{title}</h2>
      <p>{description}</p>
      <button onClick={onEnroll}>Enroll Now</button>
    </div>
  );
}