Phase 2Beginner3 of 28 in React

Components and Props

Build your own tags: write components, split them into files, pass data with props, compose with children, keep renders pure and think in React.

A React app is made of components: functions with capital-letter names that return JSX. In this phase you write your own, use them many times, and move them into separate files with import and export, the way real projects are organised.

Then you'll give components inputs. Props carry data from a parent to a child: strings, numbers, booleans, objects, arrays, functions and even other JSX. You'll learn default values, rest and spread props, and the children prop that lets one component wrap another. You'll also learn the rule that keeps all of this predictable: a component must be pure. Same props in, same JSX out, nothing changed along the way.

The phase ends with Thinking in React, the five-step method the React team recommends for turning a design into a working app. You'll use it to build a small searchable product table from scratch.

0/7 · 0%

7 topics ~3 h 23 code blocks & diagrams

Start with the first topic

2.1

Components: Your Own Tags

A component is a JavaScript function whose name starts with a capital letter and which returns JSX; once defined, you use it like a new HTML tag, as many times as you want, and you always define it at the top level of a file, never inside another component.

28 min 3 code practice

2.2

Components in Files: Import and Export

Real React apps keep components in separate files and connect them with JavaScript modules: a file shares a component with export (default or named) and another file brings it in with the matching import.

23 min 4 code practice

2.3

Passing Props

Props are the inputs of a component: the parent writes them like attributes, React collects them into one object, and the child reads that object (usually by destructuring) to decide what to show. Any JavaScript value can be a prop: strings, numbers, booleans, objects, arrays, functions and JSX.

22 min 3 code practice

2.4

Default Values, Rest and Spread Props

Default parameter values give a prop a fallback when the parent leaves it out, ...rest collects every prop you didn't name, and spreading {...rest} onto an element forwards them all at once: handy for wrapper components, but it can quietly pass bad attributes or overwrite your own.

21 min 3 code practice

2.5

The children Prop and Composition

Whatever you write between a component's opening and closing tags arrives as the children prop, so a component can wrap content it knows nothing about; extra props that hold JSX give it more named slots, and building screens by nesting such pieces (composition) beats piling up configuration props.

21 min 4 code practice

2.6

Props Are Read-Only: Keeping Components Pure

A React component must behave like a pure function: given the same props (and state), it returns the same JSX and changes nothing outside itself while rendering; side effects go in event handlers or effects, and StrictMode renders twice in development to catch components that break this rule.

22 min 3 code practice

2.7

Thinking in React

Thinking in React is the five-step method for turning a design into an app: break the mockup into a component tree, build a static version with props only, find the minimal state, decide which component owns each piece of state, and finally pass callbacks down so children can change it (inverse data flow).

26 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

One component, three greetings

The Greeting component always says Hello, friend!. Give it a name prop so each use can greet someone different.

Beginner

A product card with every kind of prop

Finish ProductCard so it receives name (string), price (number), inStock (boolean) and tags (array of strings), and renders an <article className="product"> containing:

Beginner