Module 1: The Foundation

Setup, JSX, Components, and TypeScript Props.

1. Deep Dive: The React Mental Model

1.1 Components are just Functions

Forget "classes" or "instances" for a moment. A React component is simply a JavaScript function. It takes an input (props) and returns an output (JSX). If you call the function with the same props, you should get the exact same UI. This is called idempotency.

// Input: { name: "Alice" }
// Output: <h1>Hello, Alice</h1>
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

1.2 JSX is not HTML

Browsers do not understand JSX. Build tools (Vite/Babel) compile it into standard JavaScript calls.
<div className="box">Hi</div> becomes React.createElement('div', { className: 'box' }, 'Hi').

Why this matters: You can't use HTML keywords like class (reserved in JS) or for. You must use className and htmlFor. You can't return multiple sibling elements without a parent because a function cannot return two values at once.

1.3 The One-Way Data Flow

Data flows down. Parents pass data to children via props. Children cannot modify props. If a child needs to change something, it must ask the parent to do it (via a callback function). This strict hierarchy makes debugging predictable.

1.4 TypeScript & React

We use TypeScript to enforce the "contract" between components. If a component expects a userId, TS ensures you don't forget it.

interface UserCardProps {
  name: string;
  age?: number; // Optional
  role: 'admin' | 'user'; // Union type (Specific strings only)
}

1.5 Industry Standard: The Component Interface

In professional codebases, components are treated as APIs. They must be robust and predictable. A "Senior" component definition often looks like this:

// Real-world Button Interface
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
  leftIcon?: React.ReactNode;
}
// Note: It extends native HTML attributes so you don't have to manually type 'onClick', 'disabled', etc.

1.4 Industry Standard: Scalable Component Design

To build scalable, high-performance applications, avoid monolithic components. Break UI into:

Collaborate with designers to ensure these match the design system.

2. The Setup Challenge

Task: Initialize the Environment

Note on Tools: You might see "Create React App" (CRA) in older job descriptions. It is deprecated. We use Vite because it is significantly faster (uses native ES modules) and easier to configure. However, the React code you write inside src/ is identical.

Do not use a template you found online. Use the CLI.

  1. Open your terminal.
  2. Run npm create vite@latest my-app -- --template react-ts.
  3. Navigate into the folder, install dependencies, and start the server.
  4. Cleanup: Delete App.css, delete the contents of App.tsx (keep the component shell), and delete the logo files. Start blank.

3. The Build Challenge: "User Card"

Level 1: The Basics

Create a component named UserCard.

Level 2: Senior Constraints (Strict Mode)

Level 3: Nice to Haves

4. The Bug Hunt

🐛 Scenario: The Missing Key

The Setup:

const users = ["Alice", "Bob", "Charlie"];
return (
  <ul>
    {users.map(user => <li>{user}</li>)}
  </ul>
);

The Bug: Check your console. You'll see a warning: "Each child in a list should have a unique 'key' prop."

The Task:

  1. Fix the warning by adding a key.
  2. Interview Question: Why does React need keys? (Hint: Reconciliation).
  3. Trap: Why is using index as a key (e.g., map((u, i) => key={i})) dangerous if the list order changes?

5. Test on your own

Verify your Environment