React Foundations·Components, state and data

Components and JSX

Components turn a screen into small functions with explicit inputs.

Intermediate 12 min read Lesson 6 of 300 Challenge included

What you will be able to do

Name components with a capital letter so JSX treats them as components.
Every list item needs a stable key, not the array index when order can change.
Keep components focused; split when a component has more than one reason to change.

In plain English

A React component is a function that returns UI. JSX looks like HTML but compiles to function calls. Props are read-only inputs; composition is preferred over inheritance.

LessonCard.jsxJSX

function LessonCard({ title, minutes, onOpen }) {
  return (
    <article className="lesson-card">
      <h3>{title}</h3>
      <p>{minutes} min</p>
      <button onClick={() => onOpen(title)}>Open lesson</button>
    </article>
  )
}

export default LessonCard

Your turn

Make a badge component

Easy

Create a Badge component that accepts children and a tone prop, and renders a styled span.

JSX · starter

function Badge(props) {
  return <span>{props.children}</span>
}

Check your understanding before moving on.

Knowledge checkQuestion 1

Why should a dynamic list use a stable key?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: State and events

Lesson 6 of 300 · 0% of course