Lesson 1 — App anatomy and JSX¶

Objective¶

Render an accessible application shell and dashboard from typed function components.

Prerequisites¶

Comfort with TypeScript function components and running a Vite dev server. No prior React internals required.

Mental Model¶

A component call describes UI for its current props and state. JSX creates React elements; it is neither HTML nor a mutable template. Rendering must remain pure.

Concept¶

A React application starts at a root and builds a tree of typed components. Each component returns a description of what the DOM should look like for a given set of inputs. Because render is a pure function of props and state, the same inputs must always produce the same element tree without side effects.

Example¶

function App() {
  return (
    <div className="app">
      <header>Interview Labs</header>
      <main>
        <Dashboard />
      </main>
      <footer>Footer</footer>
    </div>
  );
}

main.tsx mounts <App /> to the root, and each JSX tag becomes a React element.

Real-World Usage¶

Application shells in dashboards, admin panels, and marketing sites. Landmark elements (header, nav, main, footer) are used by screen readers to skip to meaningful regions.

Common Mistakes¶

Treating JSX as an HTML string or a template engine.
Calling createRoot on document.body instead of a dedicated container.
Adding side effects directly in render, such as logging analytics or mutating the DOM.

Mini Lab¶

Task¶

Trace main.tsx from createRoot through App, then build a header, primary navigation, main, and footer. Extract a dashboard without losing landmark semantics. Add a skip-friendly focus order and inspect the rendered DOM.

Constraints¶

Exactly one main landmark exists.
Re-rendering with the same inputs causes no external side effect.
TypeScript rejects invalid props.

Expected Result¶

A typed, accessible shell renders in the browser, and the accessibility tree shows one main landmark with a logical heading and link hierarchy.

Hints¶

Keep bootstrapping small. Compose semantic elements in App; do not introduce Context or effects merely to share static UI.

Knowledge Check¶

Where does createRoot live and why is the root element separate from the document body?
Why must render be pure?
What is the difference between a React element, a component, and a DOM node?

Challenge¶

Predict what StrictMode intentionally exposes about unsafe assumptions during the mount phase. Defend your answer with a concrete example.

Summary¶

React components describe UI as a pure function of props and state. JSX creates elements, not DOM, and the mount root must be a dedicated container.

What Comes Next¶

Lesson 2 — Rendering, lists, and conditional UI