Components and JSX

Your first component

In modern React, a component is simply a JavaScript function that returns UI. That's it — if you can write a function, you can write a component. By convention, component names start with a capital letter (this is how React tells them apart from regular HTML tags):

function Welcome() {
  return <h1>Hello, welcome to React!</h1>;
}

// Use it like an HTML tag:
// <Welcome />

This function Welcome is a complete React component. It returns something that looks like HTML but is written inside JavaScript — that's JSX, and it's the next thing to understand. Once defined, you use a component like a custom HTML tag: <Welcome />.

JSX: HTML inside JavaScript

JSX is a special syntax that lets you write HTML-like markup directly in your JavaScript. It looks like HTML, but it's actually JavaScript under the hood, which gives it superpowers — you can embed real JavaScript values right inside it using curly braces:

function Greeting() {
  const name = "Mehul";
  const hour = new Date().getHours();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>The hour is {hour}.</p>
      <p>In 5 years you'll be a pro: {2026 + 5}</p>
    </div>
  );
}

The curly braces { } are the magic of JSX — anything inside them is real JavaScript. You can drop in variables, do calculations, call functions. This blending of markup and logic in one place is what makes React components so expressive: your UI and the data that drives it live together.

The rules of JSX

JSX looks like HTML but has a few important differences that trip up beginners. Learn these now and save yourself confusion:

• One root element — a component must return a single top-level element. Wrap multiple elements in a <div> or an empty <>...</> fragment.
• className not class — because class is a reserved word in JavaScript, JSX uses className for CSS classes.
• Close every tag — even self-closing ones: <img />, <br />, <input />.
• camelCase attributes — onClick not onclick, htmlFor not for.

function Card() {
  return (
    <div className="card">          {/* className, not class */}
      <h2>Title</h2>
      <img src="pic.jpg" alt="" />  {/* self-closing tag */}
    </div>                          {/* single root element */}
  );
}

These small differences exist because JSX is JavaScript, not HTML. They feel odd at first but become second nature quickly. The "one root element" rule is the most common early stumble — if you need to return several elements, wrap them.

Props: passing data to components

Components become truly powerful when they're reusable with different data. Props (short for "properties") are how you pass data into a component, like attributes on an HTML tag. The component receives them as a parameter:

// A reusable component that accepts props
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Use it with different data each time:
// <Greeting name="Mehul" />   -> Hello, Mehul!
// <Greeting name="Riya" />    -> Hello, Riya!

You pass name="Mehul" like an HTML attribute, and inside the component it arrives as props.name. Now one Greeting component works for anyone. Props are how data flows into components, making them flexible and reusable — the whole point of components.

Destructuring props (the common style)

In real React code, props are almost always destructured right in the function parameter — cleaner than writing props. everywhere (remember destructuring from JavaScript?):

// Destructure props directly — the standard modern style
function ProductCard({ name, price, inStock }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Price: Rs {price}</p>
      <p>{inStock ? "In stock" : "Sold out"}</p>
    </div>
  );
}

// <ProductCard name="Laptop" price={50000} inStock={true} />

Here we pull name, price, and inStock straight out of props in the parameter list. Notice price={50000} uses curly braces because it's a number (and inStock={true} a boolean) — only strings use plain quotes. Now you can render a whole catalogue by reusing ProductCard with different props. You can build static UIs from components and props — but real apps need to change in response to users. That's state, and it's next.