If you can write a JavaScript function, you can write a React component. That is the whole secret.

Forget "class components" exist. In 2026, every new React component is a function. The mental model is simple: input is props, output is JSX.

A component, the smallest possible one

function Hello() {
  return <h1>Hello, Bengaluru</h1>;
}

That is it. Capital H matters; React treats lowercase names as HTML tags. Use it like <Hello /> somewhere else in your tree.

JSX is just function calls in a costume

<div className="card">hi</div> becomes React.createElement('div', {className: 'card'}, 'hi') at build time. You almost never see that, but knowing it kills the magic. JSX is JavaScript. You can put any expression in {}.

const name = 'Shaan';
return <p>Order ready for {name.toUpperCase()}</p>;

Props are arguments

Props are how a parent passes data down. Same as function arguments, with one twist: you destructure them from a single object.

function RestaurantCard({ name, eta, rating }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{eta} min, {rating} stars</p>
    </div>
  );
}
 
<RestaurantCard name="Meghana Foods" eta={32} rating={4.3} />

The Swiggy home page is a hundred of these in a list. Same component, different props.

children is the magic prop

Anything you put between the opening and closing tag shows up as props.children. This is how you make wrapper components.

function Card({ children }) {
  return <div className="card">{children}</div>;
}
 
<Card>
  <h3>Empire Restaurant</h3>
  <p>Biryani, 25 min</p>
</Card>

Card does not know or care what is inside. That is composition.

Composition, not inheritance

In React you never extend a component. You wrap, you pass props, you pass children. A <RestaurantCard> that needs a discount badge does not subclass; it accepts a badge prop or wraps in a <Badge>.

Classes and inheritance are not how React thinks. If you find yourself wanting "extends", you are fighting the framework.

Three quick rules

• One component per file once it gets past 30 lines. Keeps imports clean.
• PascalCase for component names, always. restaurantCard will silently render as an unknown HTML tag.
• Props are read-only. Never mutate props.name = '...'. If a child needs to change something, that something belongs to a parent (next lesson).

Try it

Build a <RestaurantList> that takes an array of restaurants and renders a <RestaurantCard> for each. We will properly cover .map and key two lessons from now. For now, just feel the click of small functions stacking into a real screen.