React Essentials — Components, JSX, Props, State & MoreEntry 1 of 11

Props and One-Way Data Flow

Props are the read-only inputs a parent passes to a child component.

Notes

Props are "custom HTML attributes" set on components. React handles them in three steps:

  1. Set props. The parent adds attributes to the component tag.
  2. Merge into an object. React collects every prop into a single object, e.g. { title: 'Components', description: 'Core UI Building Blocks' }.
  3. Receive props. React passes that object to the component function as its first argument.

Data flows one way, from parent to child. A child must never modify its props. If data needs to change, the parent owns it as state and passes down both the value and a way to change it (see Entry 3).

Props are usually destructured in the function signature. Default values are set with ES default parameters during destructuring; a default applies only when the prop is undefined, not null.

What / Why / When

What

Arguments to a component.

Why

They make components reusable and predictable; the same props always produce the same output.

When

Any time a component needs data or configuration from its parent.

Use case

A CoreConcept card rendered once per item in a list, each with a different title, description, and image.

Code compare

React
type CoreConceptProps = {  title: string;  description: string;  image?: string;};​// Without destructuring: props is the merged objectexport function CoreConceptBasic(props: CoreConceptProps) {  return <h3>{props.title}</h3>;}​// With destructuring and a default value (preferred)export function CoreConcept({ title, description, image = "/placeholder.png" }: CoreConceptProps) {  return (    <li>      <img src={image} alt={title} />      <h3>{title}</h3>      <p>{description}</p>    </li>  );}
Angular
import { Component, input } from "@angular/core";​@Component({  selector: "app-core-concept",  template: `    <li>      <img [src]="image()" [alt]="title()" />      <h3>{{ title() }}</h3>      <p>{{ description() }}</p>    </li>  `,})export class CoreConceptComponent {  title = input.required<string>();  description = input.required<string>();  image = input("/placeholder.png"); // default value}

Differences and gotchas

  • React merges props into one object. Angular has no props object; each input is its own class member.
  • Angular has no equivalent of {...concept}. Bind each input, or pass the whole object as one input.
  • React props are plain values. Angular signal inputs are read by calling them: title().
  • Both treat inputs as read-only. Signal inputs enforce it, since they have no .set().

Quick reference

ReactAngular
function C(props) / function C({ title })title = input.required<string>()
image = '/x.png' in destructuringimage = input('/x.png')
<C title="x" /><app-c title="x" />