React Fundamentals — Building Interactive UIs

What is React and Why Does it Exist?

In traditional vanilla JavaScript, building an interactive application requires imperative DOM manipulation. When an item is clicked or an API response arrives, you have to manually find the DOM element with document.getElementById(), attach event listeners, update innerHTML, toggle CSS classes, and keep the browser view in sync with your JavaScript data. As applications grow, this creates tangled spaghetti code where data and DOM state easily diverge.

React is a JavaScript library for building user interfaces. Instead of manually mutating DOM elements step-by-step, you write declarative code: you describe what the UI should look like for any given state, and React takes care of efficiently updating the actual browser DOM whenever your state changes:

Breaking Complex UIs into Reusable Building Blocks

React applications are structured as a tree of components. A component is an independent, reusable piece of UI. Consider how a real-world learning platform dashboard is decomposed:

The Golden Rule of React Components:
A React component is just a JavaScript function that returns UI.

JSX is Not HTML

JSX looks like HTML, but under the hood, it is a syntax extension for JavaScript. Every JSX tag is transformed by modern compilers into JavaScript function calls (like jsx('div', { ... })). Because JSX is JavaScript, certain rules apply:

• JavaScript Expressions with {}: Any valid JavaScript expression (variables, calculations, ternary checks, function calls) can be embedded directly inside curly braces.
• className instead of class: Because class is a reserved keyword in JavaScript, HTML classes in JSX are written as className="course-card".
• Self-Closing Elements: Tags with no children (like <img />, <input />, and <br />) must be explicitly self-closed with />.
• Fragments (<>...</>): A component can only return a single root JSX element. If you have multiple siblings without wanting to introduce an unnecessary wrapper <div> in the DOM, wrap them in a Fragment.

// Notice: Function name is PascalCase (CourseCard), not lowercase!
function CourseCard({ title, level, isEnrolled }) {
  // JavaScript logic before the return
  const formattedLevel = level.toUpperCase();

  return (
    <article className="course-card">
      {/* JavaScript expressions evaluated dynamically */}
      <h2>{title}</h2>
      <p className="level-badge">{formattedLevel}</p>
      
      {/* Self-closing tag with dynamic attribute */}
      <input type="checkbox" checked={isEnrolled} readOnly />
    </article>
  );
}

What are Props?

React components use props (short for properties) to communicate with each other. Every parent component can pass information to its child components by giving them attributes, just like HTML attributes.

// 1. Parent Component passes data down
function App() {
  return (
    <main className="catalog">
      <CourseCard 
        title="React 19 Fundamentals" 
        level="Beginner" 
      />
      <CourseCard 
        title="PostgreSQL Advanced Schema Design" 
        level="Intermediate" 
      />
    </main>
  );
}

// 2. Child Component receives props and renders UI
function CourseCard({ title, level }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <span className="badge">{level}</span>
    </div>
  );
}

Why Normal Variables are Not Enough

When a function executes, its local variables are created and then discarded when the function returns. Furthermore, modifying a plain JavaScript variable does not notify React that it needs to update the DOM. To retain data between render cycles and trigger an automatic UI update, React provides the useState Hook:

import { useState } from 'react';

function EnrollmentButton() {
  // 1. Declare state variable and its setter function
  const [isEnrolled, setIsEnrolled] = useState(false);

  // 2. Event handler function
  function handleClick() {
    // Calling the setter triggers React to re-render the component with the new value!
    setIsEnrolled(prev => !prev);
  }

  return (
    <button 
      type="button"
      className={isEnrolled ? "btn-enrolled" : "btn-enroll"}
      onClick={handleClick}
    >
      {isEnrolled ? "Enrolled ✓" : "Enroll"}
    </button>
  );
}

List Rendering with .map() and the Importance of key

In React, you transform arrays of data into arrays of JSX elements using standard JavaScript Array.prototype.map(). Every item rendered in a list must have a unique, stable key prop:

function CourseList({ courses }) {
  // Pattern 1: Empty state conditional check
  if (courses.length === 0) {
    return <p className="empty">No courses found matching your criteria.</p>;
  }

  // Pattern 2: List rendering with unique, stable ID keys
  return (
    <div className="course-grid">
      {courses.map(course => (
        <CourseCard 
          key={course.id} // ⚠️ CRITICAL: Stable key helps React track DOM elements
          course={course}
        />
      ))}
    </div>
  );
}

How Parents and Children Coordinate

In React, components don’t talk directly across siblings. Instead, communication strictly follows a single, predictable cycle:

Lifting State Up: If two child components need to share data (e.g., a search bar component and a course list component), move the state up to their closest common parent, and pass it down as props.