Master the TrickFoundationFree

React Component Foundations

Reason about React props, state, list identity and accessible event-driven components.

3 reading lessons · about 30 min ·written by MTT

The idea

A component describes UI from its props and state. Props come from the parent and should not be mutated by the child. Rendering should be pure: do not send requests or modify external state merely because React asks for a render. Derive simple display values from existing inputs rather than duplicating them unnecessarily.

Worked example

A course component receives a title and price. Its free label can be derived from price === 0 without storing a second isFree state. Editing the props object inside the child would violate the expected data flow.

Try it

Sketch a course component contract with title, price and destination. Identify two values that can be derived instead of stored. Write which user action could legitimately request a state change and which side effect must not run during rendering.

Lesson 1 of 3 · About 10 min

Render from inputs

Check your understanding

Course quiz

Finish the course to unlock the quiz

Complete all 3 lessons and 5 questions open up here. You have 3 to go.

What you will learn

Separate props from local state
Update state without mutation
Choose stable keys and semantic controls

Before you start

Prerequisites: Basic HTML and JavaScript. Use an existing practice project or trace the examples on paper.
Cost: Free introductory reading lessons, exercises and quiz. Optional third-party tools, hosting or AI subscriptions may cost money.

Original introductory lessons and assessment by Master the Trick. Estimated times include the suggested exercises.