Skip to content
WebDev Path
Back

Week 10: Components, props and JSX

Next video

Free lesson by Fireship on YouTube

About this lesson

Module:
React
Time:
about 11 hours
Video:
2 min

Think in components and build UIs from small reusable pieces.

By the end of this week you can

  • Set up a React app with Vite
  • Write components with props
  • Render lists and conditional content

Learn

  • Why React: components and declarative UI
  • JSX rules
  • Props and children
  • Lists, keys and conditional rendering

Read or watch

Practice

  1. Rebuild Project 1 as React components
  2. Make a Card that accepts any content as children

Build

A small component library: button, card, modal.

Check your understanding

Score 4 out of 5 to complete this week.

  1. 1. What is a React component?
  2. 2. How does a parent pass data to a child?
  3. 3. Why does React need a key on list items?
  4. 4. In JSX, how do you set a CSS class?
  5. 5. Can a component change its own props?
0 of 5 answered