Components and Props

Building Components

A React component is simply a JavaScript function that returns JSX. Component names must start with a capital letter to distinguish them from HTML elements.

Props: Passing Data Down

Props (short for "properties") are how you pass data from a parent component to a child. Think of props like function arguments.

function Greeting({ name }) { return <h1>Hello, {name}!</h1> }

To use this component: <Greeting name="Alice" />

Props are Read-Only

A fundamental rule in React: components must never modify their own props. Data flows one way — from parent to child. If you need to modify data, you'll use state (covered in the next module).

Children Prop

The special children prop lets you pass JSX between the opening and closing tags of a component, making it useful for wrapper components.