React Essentials — Components, JSX, Props, State & More

React ↔ Angular reference. React examples use React 19 + TypeScript. Angular examples use modern Angular (standalone components, signals, input()/output()/model(), @if/@for).

Test yourself

15 questions

1
Props and One-Way Data Flow
Props are the read-only inputs a parent passes to a child component.
2
children vs Attribute Props and Component Composition
children is the special prop holding whatever JSX is placed between a component's opening and closing tags. Attribute props are values passed as named attributes.
3
Passing Functions as Props (Child-to-Parent Communication)
A parent passes a function to a child; the child calls it to notify the parent that something happened.
4
Multiple Slots and Passing Components as Props
A component can accept several pieces of JSX as separate props, and can even receive a component type to use as its wrapper element.
5
Props Are Not Forwarded Automatically
A wrapper component only passes on the props it explicitly uses; everything else is ignored.
6
Rules of Hooks
Two rules that every hook call (useState, useEffect, custom hooks) must follow.
7
Managing State with useState
A hook for managing data that, when updated, tells React to re-execute the component function.
8
Lifting State Up
Moving state to the closest ancestor component that contains every component needing that state.
9
Conditional Rendering and JSX in Variables
Choosing what to render based on state, using plain JavaScript.
10
Two-Way Binding (One-Way Binding + useState + onChange)
Keeping an input's displayed value and a state variable in sync in both directions.
11
Static Assets: public/ vs src/assets/
Where to store images and files, and how the build tool treats each location.