Beginner⏱️ 8 min📘 Topic 2 of 13

🧩 JSX and Components — The Building Blocks of React

Master React JSX syntax and components. Learn how JSX compiles, why class names use className, and the difference between functional and class components — with examples.

JSX is JavaScript with HTML-like syntax. It's not HTML, it's not a template language — it's syntactic sugar over React.createElement(...) calls.

🧠 What JSX really is

// You write this:
const el = <h1 className="title">Hi</h1>;

// Babel turns it into this:
const el = React.createElement('h1', { className: 'title' }, 'Hi');

📏 JSX rules that catch beginners

Return ONE root element (or use <>...</> Fragment)
Use className, not class (class is a reserved JS word)
Use htmlFor, not for
Self-close tags: <img />, <br />
Use camelCase for events: onClick, not onclick
Inline styles take an object: style={{color: 'red'}}
Embed JS with {...}

🧩 Functional vs class components

Modern React = functional components + hooks. Class components still work but you'll almost never write a new one.

// Modern (preferred)
function Greeting({ name }) {
  return <p>Hi {name}</p>;
}

// Legacy
class Greeting extends React.Component {
  render() { return <p>Hi {this.props.name}</p>; }
}

💡 Tip: Component names MUST start with an uppercase letter. <button> is an HTML tag; <Button> is your component.

💻 Code Examples

Embedding JavaScript inside JSX

function Greeting({ user }) {
  const time = new Date().getHours();
  return (
    <h2>
      {time < 12 ? 'Good morning' : 'Hello'}, {user.name}!
    </h2>
  );
}

Output:

Renders 'Good morning, Sam!' or 'Hello, Sam!' depending on the hour.

Fragment to avoid extra divs

function List() {
  return (
    <>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </>
  );
}

Output:

Three <li>s with no wrapping element.

⚠️ Common Mistakes

Writing `class=` instead of `className=` — it silently doesn't work.
Returning multiple sibling elements without a Fragment or wrapper.
Forgetting that JSX expressions are values — `if/else` doesn't work inline, only ternaries or `&&`.
Naming a component with a lowercase letter — React treats it as an HTML tag and ignores props.

🎯 Interview Questions

Real questions asked at top product and service-based companies.

Q1.What is JSX?Beginner

A syntax extension to JavaScript that looks like HTML but compiles to React.createElement() calls. It's not a string, not HTML — it's an expression that evaluates to a JavaScript object (a React element).

Q2.Why do we use className instead of class in JSX?Beginner

Because `class` is a reserved keyword in JavaScript. JSX compiles to JS, so reserved words are remapped — `className` for class, `htmlFor` for for.

Q3.What's the difference between a React element and a component?Intermediate

An element is a plain object describing what to render (`{type:'h1', props:{}}`). A component is a function (or class) that returns elements. Elements are immutable snapshots; components are factories.

Q4.What is a Fragment and when do you use it?Intermediate

<></> or <React.Fragment>. Lets you return multiple sibling elements without adding an extra DOM node. Useful for table rows, list items, or any time a wrapping div would break styling/structure.

Q5.Can JSX exist without React in scope?Intermediate

Modern transforms (the 'new JSX runtime' in React 17+) auto-import what they need, so you no longer need `import React from 'react'` at the top of every file. Older versions did require it.

🧠 Quick Summary

JSX compiles to React.createElement() calls.
className, htmlFor, camelCase events, self-closed tags.
Always one root element — use <>...</> if needed.
Components are functions; names start with uppercase.
Functional + hooks is the modern way to write React.