Web Development · Intermediate level

Intermediate level · Module 3: Component-Based Front Ends with React · Lesson 1 of 3

Components, JSX and Props

Create a React project, write components with JSX and pass data down with props.

In this lesson you will

  • Create a React project with Vite and run the development server
  • Write components that receive props and render lists

Key concepts

componentJSXpropskey for list items

The lesson

React builds interfaces from components: functions that return JSX, an HTML-like syntax that compiles to JavaScript. Each component handles one piece of the interface, such as a CourseCard, and can be reused.

Data flows down through props: <CourseCard title={course.title} weeks={course.weeks} />. A component should not change its props; they are inputs, like function arguments.

Render lists with map and give each item a stable key: courses.map((c) => <CourseCard key={c.id} {...c} />). A tool such as Vite creates the project and runs a development server that updates the page as you save.

Step by step

  1. Create a project with Vite and start the dev server.
  2. Write a CourseCard component with props.
  3. Render a list of cards from an array with keys.
  4. Split the page into Header, CourseList and Footer components.

Practice activity

Build the static course catalogue from an array of course objects using components and props.

Expected result: The catalogue renders from data, each card is a reusable component and there are no key warnings.

Check your understanding

  1. What are props?

    Show answer

    Inputs passed from a parent component to a child component.

  2. Why does each list item need a key?

    Show answer

    So React can track items correctly between renders.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.