Components, Props and Composition

MODULE 06 · LESSON 6.1

Break a screen into components with small, explicit interfaces.

Practice-firstBeginner-friendlyProduction-aware

Use the concept at the correct boundary

Components, Props and Composition becomes useful when you can point to an observable result, not merely repeat its vocabulary. This decision shapes the frontend boundary: what is rendered, what becomes interactive, and which state is allowed to cross into another component or route.

Here, that decision supports a specific checkpoint: Create a searchable course catalog and learner dashboard. A reviewable result should include a focused component test, an accessibility check and a before/after browser trace rather than a claim that the feature simply works.

Components, Props and Composition workflowA four-step visual showing JSX, props, composition, keys.Components, Props and Composition workflow1JSX2Props3Composition4Keys

Components, Props and Composition workflow

  1. 1JSX
  2. 2Props
  3. 3Composition
  4. 4Keys
Components, Props and Composition workflow: a practical sequence used in this lesson.

A practical model for components, props and composition

Break a screen into components with small, explicit interfaces. The useful unit of understanding is the boundary: who owns the decision, which input crosses it, what result is visible and how a failure is reported.

  • JSX: Implement one behavior that another learner can reproduce without reading your mind.
  • Props: Compare the simplest correct approach with one credible alternative.
  • Composition: State the assumption this concept relies on and show how the system behaves when it is false.
  • Keys: Connect this concept to the module checkpoint and identify the evidence a reviewer should expect.

What the example proves

Read the sample from the outside in: identify the caller, follow JSX, and note where failure becomes visible.

TSX
function CourseCard({ course }: { course: Course }) {
  return <article><h2>{course.title}</h2></article>;
}
Prefer evidence over familiarity

Run the smallest check that could disprove your understanding of JSX, then keep the result with the exercise.

Implement and verify one behavior

  1. 1
    JSX

    Compare expected and actual output before editing; the difference tells you where to investigate.

  2. 2
    Props

    Keep names tied to the product rule so a reviewer can follow the change without decoding abbreviations.

  3. 3
    Composition

    Add a regression check close to the boundary where this behavior can fail.

  4. 4
    Keys

    Describe the behavior in one sentence, then choose the smallest input that can prove it.

Common design traps

  • Treating JSX as vocabulary instead of defining the behavior it must produce.
  • Testing the expected path while ignoring an empty, invalid, repeated or unauthorized case around props.
  • Allowing composition to cross a boundary without an explicit contract or useful error.
  • Changing several layers before capturing the first piece of evidence, which makes the original cause harder to see.

Diagnose before changing code

  1. Reduce the problem to the smallest failing Components, Props and Composition case.
  2. Capture the actual input and output at the JSX boundary.
  3. Read the first relevant error, request, trace or query rather than the loudest downstream symptom.
  4. Test one explanation for the failure in props; avoid changing two variables together.
  5. Keep a regression check that would expose the same defect if it returned.

Security decision

Assume data from props, storage, URLs and APIs can be malformed. Do not expose secrets in client bundles, and do not treat hidden UI as authorization.

Performance decision

Measure shipped JavaScript, rendering work and network waterfalls. Move work off the client only when the measured trade-off supports it.

PRACTICE

Build something you can inspect

Build reusable CourseCard, ProgressMeter and EmptyState components.

Stretch challenge

Reduce the implementation to its smallest reviewable change while preserving the behavior required by the exercise.

Definition of done

  • The behavior around JSX works with realistic input.
  • A failure involving props is handled clearly and without leaking sensitive detail.
  • The implementation remains keyboard-usable when it produces an interface.
  • Your evidence directly supports the claim made in the exercise.
  • The README records the important trade-off without pretending the solution is universal.

Check your reasoning

Why should list keys represent stable identity rather than array position?

Answer by naming the expected JSX behavior, the layer responsible for it and the evidence that would confirm your explanation.

Where would you investigate the first failure?

Start where props crosses a boundary. Compare the actual input and output there before following downstream symptoms.

What would make this work reviewable?

Show the focused change, repeatable steps, the result of your check and one honest trade-off connected to composition.

What to carry into the next lesson

  • Break a screen into components with small, explicit interfaces.
  • Keep JSX visible at the boundary where it can be tested.
  • Use evidence from props before widening the implementation.

References and related reading

Progress is stored only in this browser.

Share this page

Share this page with the people who will use it next.

X Facebook LinkedIn WhatsApp Email

Discussion

No comments yet. Add the first useful question or observation.