ReactNot Started

Components & Props

Build reusable components and pass data through props

Knowledge Debt detected

You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.

JSX0%

Explanation

Components are the building blocks of React UIs — reusable functions that accept inputs (props) and return JSX.

Function components:

jsx function Button({ label, onClick, disabled = false }) { return ( <button onClick={onClick} disabled={disabled}> {label} </button> ); }

Using a component:

jsx <Button label="Save" onClick={handleSave} /> <Button label="Delete" onClick={handleDelete} disabled={true} />

Props rules:

Props are read-only — a component must never modify its own props
Any JS value is a valid prop: strings, numbers, booleans, arrays, objects, functions, JSX
Boolean props: <Button disabled /> is the same as <Button disabled={true} />

children prop — content between component tags: ```jsx function Card({ title, children }) { return ( <div className="card"> <h2>{title}</h2> {children} </div> ); }

<Card title="Welcome"> <p>This paragraph is the children prop</p> </Card> ```

Component naming must start with a capital letter — lowercase tags are treated as HTML elements.

Examples

Composing components

Components compose — UserCard uses Avatar as a building block

function Avatar({ src, name }) {
  return <img src={src} alt={name} className="avatar" />;
}

function UserCard({ user }) {
  return (
    <div className="user-card">
      <Avatar src={user.avatarUrl} name={user.name} />
      <h3>{user.name}</h3>
      <p>{user.bio}</p>
    </div>
  );
}

Children and layout components

Layout wrapper components use children to stay flexible

function Section({ title, children }) {
  return (
    <section>
      <h2 className="section-title">{title}</h2>
      <div className="section-body">{children}</div>
    </section>
  );
}

// Usage
<Section title="About">
  <p>We build things.</p>
  <a href="/contact">Get in touch</a>
</Section>

Next in React

State with useState

Continue

Unlocks

State with useState Lists & Keys