Describing the UI
Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.
Last reviewed: March 2026.
In this section, you'll learn how to make your components dynamic and reusable using Props and Logic.
Who This Is For
Learners following the React or Next.js roadmap.
1. Passing Props
Props (short for "properties") are how you pass data down the tree from a parent component to a child. They are read-only.
The Concept: Imagine a component is a function. Props are the arguments.
// Parent
<Profile name="Bob" role="Teacher" />
// Child
function Profile(props) {
return <h2>{props.name} is a {props.role}</h2>;
}
Learn it on Scrimba: -> Interactive Lesson: Passing Data to Components
2. Conditional Rendering
Sometimes you want to show different things depending on the state of your app (e.g., a "Login" button vs a "Logout" button).
You can use standard JavaScript logic:
ifstatements- Ternary operators (
condition ? true : false) - Logical AND (
condition && true)
Learn it on Scrimba: -> Interactive Lesson: Conditional Rendering
3. Rendering Lists
You will often want to display multiple similar components from a collection of data. In React, you use the JavaScript .map() array method for this.
Key Rule: Every list item needs a unique key prop so React can track it.
const items = ["Apple", "Banana", "Cherry"];
const listItems = items.map(item => <li key={item}>{item}</li>);
Learn it on Scrimba: -> Interactive Lesson: Mapping Components
Ready to build something?
Practice these concepts by building an Airbnb Experiences clone in the free React course.
Start the Project
(opens in a new tab)Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.