What is React?

React is a JavaScript library for building user interfaces. It lets you create reusable components that manage their own state and combine them to build complex UIs.

The Simple Explanation

Building a website is like building with LEGO:

Without React: You glue all the pieces together permanently. Want to change the roof color? Rebuild the entire house!
With React: Each piece is a separate component. Change the roof? Just swap that piece!

React makes it easy to build, maintain, and reuse parts of your UI.

Why React?

1. Component-Based

Break your UI into independent, reusable pieces:

Website
├── Header
│   ├── Logo
│   └── Navigation
├── Main Content
│   ├── Hero Section
│   ├── Features
│   └── Testimonials
└── Footer

Each piece is a component you can reuse anywhere!

2. Declarative

Traditional JavaScript (Imperative):

// Step-by-step instructions
const heading = document.createElement('h1');
heading.textContent = 'Hello World';
heading.className = 'title';
document.body.appendChild(heading);

React (Declarative):

// Just describe what you want
<h1 className="title">Hello World</h1>

You describe what you want, not how to create it!

3. Efficient Updates

React only updates parts of the page that changed, not the entire page. This makes apps fast!

JSX: HTML-like Syntax in JavaScript

JSX lets you write HTML-like code in JavaScript files:

function Welcome() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to our site.</p>
    </div>
  );
}

Key differences from HTML:

Use className instead of class
Use htmlFor instead of for
Self-closing tags need /: <img />, <input />
Can embed JavaScript with {}

Embedding JavaScript in JSX

function Greeting() {
  const name = "Alex";
  const time = "morning";

  return (
    <div>
      <h1>Good {time}, {name}!</h1>
      <p>The answer is {2 + 2}</p>
    </div>
  );
}

Anything in {} is JavaScript!

Components

Components are the building blocks of React apps.

Function Components

function Button() {
  return <button>Click me</button>;
}

// Use it like an HTML tag
<Button />

Components with Props

Props pass data to components (like function parameters):

function Button(props) {
  return <button>{props.text}</button>;
}

// Usage
<Button text="Click me" />
<Button text="Submit" />
<Button text="Cancel" />

Modern syntax (destructuring):

function Button({ text, color }) {
  return (
    <button style={{ color: color }}>
      {text}
    </button>
  );
}

// Usage
<Button text="Click me" color="blue" />

Children Prop

Special prop for nested content:

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

// Usage
<Card>
  <h2>Title</h2>
  <p>Description here</p>
</Card>

State: Making Components Interactive

State is data that changes over time. When state updates, React re-renders the component.

useState Hook

import { useState } from 'react';

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

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

Breaking this down:

useState(0): Initial count is 0
count: Current value
setCount: Function to update the value
When button clicked → setCount updates count → Component re-renders

Multiple State Variables

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = () => {
    setSubmitted(true);
  };

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
      />
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button onClick={handleSubmit}>Submit</button>

      {submitted && <p>Thanks, {name}!</p>}
    </div>
  );
}

Event Handling

Handle user interactions:

function InteractiveButton() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  const handleMouseEnter = () => {
    console.log('Mouse entered');
  };

  return (
    <button
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
    >
      Hover or click me
    </button>
  );
}

Common events:

onClick: Button/element clicked
onChange: Input value changed
onSubmit: Form submitted
onMouseEnter: Mouse enters element
onMouseLeave: Mouse leaves element

Conditional Rendering

Show different content based on conditions:

Using &&

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
      {!isLoggedIn && <p>Please log in.</p>}
    </div>
  );
}

Using Ternary Operator

function Status({ isOnline }) {
  return (
    <div>
      Status: {isOnline ? 'Online' : 'Offline'}
    </div>
  );
}

Using if/else

function Dashboard({ user }) {
  if (!user) {
    return <p>Please log in</p>;
  }

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
    </div>
  );
}

Lists and Keys

Render arrays of data:

function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a project' },
    { id: 3, text: 'Deploy it' }
  ];

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Important: Always include a unique key prop when rendering lists. This helps React track which items changed.

Real Example from Our Codebase

From components/layout/Navigation.tsx:

const navItems = [
  { name: 'About', href: '/about' },
  { name: 'Model', href: '/model' },
  { name: 'Programs', href: '/programs' },
  // ...
];

export default function Navigation() {
  return (
    <nav>
      {navItems.map((item) => (
        <Link key={item.href} href={item.href}>
          {item.name}
        </Link>
      ))}
    </nav>
  );
}

What's happening:

Array of navigation items
.map() loops through each item
Renders a Link component for each one
Each link has a unique key (the href)

Client vs Server Components (Next.js Specific)

In Next.js, components can be:

Server Components (Default)

// No "use client" directive
export default function ServerComponent() {
  return <div>This runs on the server</div>;
}

Render on server (build time for our static site)
Can't use useState, useEffect, or event handlers
Better for static content

Client Components

'use client'; // Add this directive at the top

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Run in browser
Can use hooks and event handlers
Use for interactive components

Rule of thumb: Start with server components, add 'use client' only when you need interactivity.

Common React Patterns in Our Codebase

1. Layout Components

function DefaultLayout({ children }) {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

// Usage
<DefaultLayout>
  <h1>Page content here</h1>
</DefaultLayout>

2. Conditional Styling

function Button({ primary }) {
  return (
    <button className={primary ? 'btn-primary' : 'btn-secondary'}>
      Click me
    </button>
  );
}

3. Form Handling

'use client';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    // Send to API
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      {/* More inputs */}
      <button type="submit">Submit</button>
    </form>
  );
}

What You Don't Need to Know (Yet)

React has many advanced features. For our codebase, skip these initially:

❌ useEffect hook (we use it minimally)
❌ useContext for global state
❌ useReducer for complex state
❌ Custom hooks
❌ React.memo and optimization techniques
❌ Error boundaries

Focus on:

✅ Function components
✅ Props and children
✅ useState for simple state
✅ Event handlers
✅ Conditional rendering
✅ Mapping arrays to lists

Common React Mistakes

1. Forgetting Keys in Lists

// ❌ Wrong
{items.map(item => <div>{item}</div>)}

// ✅ Right
{items.map((item, index) => <div key={index}>{item}</div>)}

2. Modifying State Directly

// ❌ Wrong
count = count + 1;

// ✅ Right
setCount(count + 1);

3. Using class Instead of className

// ❌ Wrong
<div class="container">

// ✅ Right
<div className="container">

4. Forgetting to Bind Event Handlers

// ❌ Wrong (runs immediately)
<button onClick={handleClick()}>

// ✅ Right (runs when clicked)
<button onClick={handleClick}>
<button onClick={() => handleClick()}>

Tips for Learning React

1. Components Are Just Functions

Don't overthink it! Components are JavaScript functions that return JSX.

2. Start Simple

Build simple components first, then compose them into complex UIs.

3. Read Error Messages

React's error messages are usually helpful. They tell you exactly what's wrong!

4. Use React DevTools

Install React DevTools browser extension to inspect components, props, and state.

External Resources

Essential Reading

React Documentation: https://react.dev

What it is: Official React docs (completely rewritten in 2025)
When to use: Daily reference for hooks, components, and patterns
Start with: "Learn React" section

React Tutorial - Tic Tac Toe: https://react.dev/learn/tutorial-tic-tac-toe

What it is: Official hands-on tutorial
When to use: Best way to learn React fundamentals
Time: 1-2 hours

Video Learning

React Course for Beginners by freeCodeCamp: https://www.youtube.com/watch?v=bMknfKXIFA8

What it is: Comprehensive React course
When to use: If you prefer video learning
Time: 12 hours (watch relevant sections)

React in 100 Seconds: https://www.youtube.com/watch?v=Tn6-PIqc4UM

What it is: Quick overview
When to use: Fast intro before diving deeper
Time: 2 minutes

Interactive Learning

Scrimba - Learn React: https://scrimba.com/learn/learnreact

What it is: Interactive React course
When to use: Hands-on learning in the browser
Time: 4-5 hours

React Challenges: https://reactjschallenges.com/

What it is: Practice problems for React
When to use: Test your understanding
Time: Ongoing practice

Tools

React DevTools: Chrome | Firefox

What it is: Browser extension to inspect React components
When to use: Debugging and understanding component structure
Install it: Highly recommended!

Summary

React is:

A library for building user interfaces
Component-based (reusable pieces)
Declarative (describe what you want)

Key concepts:

Components: Functions that return JSX
Props: Pass data to components
State: Data that changes over time
Events: Handle user interactions

JSX:

HTML-like syntax in JavaScript
Use {} to embed JavaScript
className instead of class

In our project:

Function components everywhere
TypeScript for prop types
Mix of server and client components
Simple state management with useState

What you need to know:

How to create components
How to use props
Basic state with useState
Event handling
Rendering lists

That's the foundation! Everything else builds on these concepts.

Next Up

Now let's learn about Tailwind CSS, our styling solution:

What is Tailwind CSS? →