Stop 04 · Frontend with ReactTopics · 1/8

Components & JSX

Part of the Full Stack Developer Roadmap

In short

React apps aren't one giant page. They're small components snapped together, each one a function that returns some UI. Build a ProductCard once and your whole shop page can reuse it.

React's core building block — reusable functions that return JSX, an HTML-like syntax that compiles into the actual UI. Everything in a React app is composed from these.

The mascot slides identical cabinet boxes into place to build a kitchen.

Think of it like this

A modular kitchen

A modular kitchen isn't built brick by brick on site. The carpenter makes standard units, a drawer, a corner shelf, a sink cabinet, and slots them together. Need a bigger kitchen? Add more units. React components are those units.

Watch it happen

A shop page as a component tree

App

Navbar

ProductList

ProductCard

Footer

1/4App is the root component. React starts rendering here.

The big ideas

What you need to know

A component is a function

It takes inputs and returns JSX. Names start with a capital letter, so React can tell <ProductCard> from a plain <div>.

JSX is not HTML

It compiles to JavaScript calls. That's why you write className instead of class and close every tag, even <img />.

Curly braces run JavaScript

Anything inside { } is a JavaScript expression: a variable, a function call, a ternary or a .map().

Lists need a key

When you map an array, give each item a stable key like the database id, so React can track which row changed.

See it in code

Walk through the code

jsx

1function ProductCard({ name, price }) {2  return (3    <article className="card">4      <h3>{name}</h3>5      <p>₹{price.toLocaleString("en-IN")}</p>6    </article>7  );8}9 10export default function ProductList({ products }) {11  return (12    <section>13      {products.map((p) => <ProductCard key={p.id} name={p.name} price={p.price} />)}14    </section>15  );16}

1/3A small component that shows one product. toLocaleString formats 129900 as 1,29,900.

products here is the JSON array your API returned. React turns each object into a card.

Save yourself the pain

Common mistakes

Oops

Using the array index as key for a list that can be sorted or filtered.

Do this instead

Use a stable id from your data. Index keys make React mix up rows when the order changes.

Oops

Writing one 400-line component for the whole page.

Do this instead

Split it when a piece has its own job or repeats. Small components are easier to test and reuse.

Your mission

Build a product grid

~30 min

Quick check

Why does React need a capital letter for <ProductCard /> but not for <div>?

Go deeper

1Build a small UI broken into 3-4 separate components.
2Practice conditional rendering with `&&` and ternaries inside JSX.
3Learn JSX's rules: one root element, `className` not `class`, `{}` for JS expressions.