Components

By the end of this lesson you'll be able to build reusable function components, pass data into them with props, nest them to compose a screen, render lists with .map() , and show or hide content conditionally — the core skills behind every React UI.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

1️⃣ Function Components

A React component is simply a JavaScript function that returns JSX (the HTML-like markup describing what to show). “Rendering” a component just means React calls that function and uses what it returns. Define it once, reuse it anywhere. One non-negotiable rule: a component name must start with a capital letter ( PascalCase ) — React reads lowercase tags as plain HTML, so would silently do nothing.

Here's a complete component. Read it first — every part has a job:

The demo below runs the same idea as plain JavaScript so you can watch a function return its output and be reused — exactly what React does when it renders a component.

Now your turn. A component returns its output, so build a function that returns a string (don't console.log inside it). Fill in the blank:

2️⃣ Props — Passing Data Down

Props (short for “properties”) are how a parent component hands data to a child . They behave just like function arguments, and they all arrive bundled into a single object called props . Two habits make them pleasant to work with: destructuring (pull the fields you need straight out in the parameter list) and default values (a fallback used when a prop isn't passed).

Critically, props are read-only . A component must never change its own props — that's data flowing down from the parent, and rewriting it breaks React's mental model. (When data needs to change, you'll use state — the next lesson.)

The demo passes those same prop objects into a plain function so you can see destructuring and a default prop actually run:

3️⃣ Children & Composition

Everything you put between a component's opening and closing tags arrives as a special prop called children . That lets you build generic wrappers — a Card , a Modal — that don't care what they contain. This is composition : building complex UIs by nesting small, focused components, which React prefers over inheritance.

Composition keeps each component small and reusable: Card handles the border and padding once, and every screen reuses it with different children.

4️⃣ Rendering Lists with .map()

UIs are full of repeated rows — a to-do list, search results, a menu. You don't write each one by hand; you take an array and transform it into UI with .map() , which returns a new array containing one element per item. Each element needs a key : a stable, unique id React uses to track rows when the list changes. Use a real id from your data — never the array index if items can be reordered, added, or removed.

The demo runs the .map() behind that JSX so you can see exactly what it builds — one line per item:

Your turn — this is the single most common React pattern. Map an array of objects , using each object's id as the key and its name as the text. Fill in the two blanks:

5️⃣ Conditional Rendering

Because JSX is just an expression, you choose what to show with normal JavaScript. The two everyday tools: the ternary condition ? a : b when you're picking between two things, and the && operator when you want to show something only if a condition is true (and render nothing otherwise).

One trap with && : write {' '} , not {' '} . If unread is 0 , the second form renders a literal 0 on screen. The demo shows both operators running:

6️⃣ Fragments — Returning Multiple Elements

A component can only return one root element . Try to return two siblings side by side and you'll get an error. The old fix was to wrap them in a , but that adds clutter to your HTML. A Fragment groups elements without adding an extra node — write it as (the short form) or .

This combines everything: a small child “component” renders one member, a parent maps the array to call it for each row, and each line uses ternaries to pick a role and an activity label. In real React, memberLine would be a component with a key .

📋 Quick Reference

'} Frequently Asked Questions Q: Why must component names start with a capital letter?

React decides what a tag means by its case. Lowercase tags like are treated as built-in HTML; capitalised tags like are treated as your components. Lowercase your component and React looks for an HTML element of that name and renders nothing useful.

Q: What exactly is the key for, and can I use the array index?

The key gives React a stable identity for each list item so it can update the minimum needed when the list changes. A real, unique id (e.g. item.id ) is best. The array index works only if the list never reorders, inserts, or deletes — otherwise it causes subtle bugs.

Props are passed in from a parent and are read-only to the child. State is data a component owns and can change over time. This lesson is all props; state is next.

Q: When should I reach for a Fragment instead of a ?

Use a Fragment whenever you only need to group elements to satisfy the “one root” rule and an extra would mess up your layout or semantics (e.g. inside a table row or a flex container).

No blanks this time — just a brief and a starter array. Map the products into display lines and add a sale tag conditionally. Run it and check your output against the example in the comments. This is the exact pattern real product pages are built from.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary