Components & Props

What this module covers

4 steps · React

1. Step 1. Components & Props

   React apps are trees of components. Each component is a function that takes props (inputs) and returns JSX (output). <Button label="Save" onClick={handleSave} /> function Button({ label, onClick, disabled = false }) { return <button onClick={onClick}>{label}</button>; } Rule: props are read-only. Never mutate them inside the component. The children prop lets a component wrap arbitrary content: function Card({ title, children }) { return ( <div> <h2>{title}</h2> {children} </div> ); } <Card title="Profile"> <p>Content here</p> </Card>

   Object destructuring in the function signature — { label, onClick } — is the idiomatic way to read props, cleaner than referencing props.label everywhere. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Wire the label and onClick props into a real button element.

2. Step 2. Quiz: Components & Props

   Answer these questions about props and composition.

   Props flow one way, parent to child, and are read-only; children is whatever JSX is nested between a component's tags. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Answer the quiz below.

3. Step 3. Reusable Card Component

   Build a reusable Card component that accepts title, subtitle, and children props. Create two different cards using it in App.

   This is composition in action — Card doesn't know or care what its children are, which is exactly what makes it reusable across completely different content. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does Card render title, subtitle, and children, and is it used at least twice in App?

4. Step 4. Mini project: Components & Props

   Build a reusable Card component that accepts title, subtitle, and children props. Create two different cards using it in App. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This is composition in action — Card doesn't know or care what its children are, which is exactly what makes it reusable across completely different content. This project stage asks you to apply the same idea without step-by-step scaffolding. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does Card render title, subtitle, and children, and is it used at least twice in App?