9 minutes·Lesson 2 of 6

Components and JSX

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup directly inside your JavaScript code. It is the standard way to describe React UI.

// JSX looks like HTML but it is JavaScript
const element = <h1>Hello, world!</h1>;

// JSX is transformed into regular JavaScript by a build tool (like Babel or Vite)
const element = React.createElement("h1", null, "Hello, world!");

You never need to write React.createElement manually — JSX does it for you.

Functional Components

A React component is a JavaScript function that returns JSX. The function name must start with a capital letter:

// A simple functional component
function Welcome() {
  return <h1>Welcome to CareerEx!</h1>;
}

// Arrow function component — equally valid
const Welcome = () => {
  return <h1>Welcome to CareerEx!</h1>;
};

// Using the component — looks like an HTML tag
<Welcome />

JSX Rules

JSX has a few rules that differ from HTML:

1. Return One Root Element

A component can only return a single root element. Wrap multiple elements in a <div> or a Fragment:

// Wrong — two root elements
function Card() {
  return (
    <h2>Title</h2>
    <p>Description</p>
  );
}

// Correct — wrapped in a div
function Card() {
  return (
    <div>
      <h2>Title</h2>
      <p>Description</p>
    </div>
  );
}

// Better — use a Fragment (no extra DOM node)
function Card() {
  return (
    <>
      <h2>Title</h2>
      <p>Description</p>
    </>
  );
}

2. Self-Close Empty Tags

<img src="photo.jpg" alt="Photo" />  // Self-closed with /
<input type="text" />                 // Self-closed with /

3. Use className Instead of class

class is a reserved word in JavaScript, so JSX uses className:

<div className="card">Content</div>

4. Inline Styles Use Objects

<p style={{ color: "teal", fontSize: "16px" }}>Styled text</p>
// Note the double curly braces: outer {} for JSX expression, inner {} for the object

Expressions in JSX

Wrap any JavaScript expression in curly braces {} to use it inside JSX:

const name = "Fatima";
const progress = 65;

function Dashboard() {
  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <p>Progress: {progress}%</p>
      <p>Modules left: {Math.ceil((100 - progress) / 12)}</p>
      <p>Joined: {new Date().toLocaleDateString()}</p>
    </div>
  );
}

Conditional Rendering

Ternary Operator

function Status({ isOnline }) {
  return (
    <span className={isOnline ? "status-online" : "status-offline"}>
      {isOnline ? "Online" : "Offline"}
    </span>
  );
}

Short-Circuit (&&)

Use && to conditionally render content only when a condition is true:

function Notifications({ count }) {
  return (
    <div>
      <h2>Dashboard</h2>
      {count > 0 && (
        <p className="badge">{count} new notifications</p>
      )}
    </div>
  );
}

Lists and Keys

Use .map() to render a list from an array. Each item needs a unique key prop:

const courses = [
  { id: 1, title: "HTML Basics" },
  { id: 2, title: "CSS Fundamentals" },
  { id: 3, title: "JavaScript Basics" }
];

function CourseList() {
  return (
    <ul>
      {courses.map(course => (
        <li key={course.id}>{course.title}</li>
      ))}
    </ul>
  );
}

The key prop helps React efficiently update the list when items are added, removed, or reordered. Always use a stable, unique ID (not the array index if the list can change).

Key Takeaways

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like UI descriptions inside JavaScript
Functional components are JavaScript functions starting with a capital letter that return JSX
JSX must have one root element; use a Fragment (<> </>) to avoid extra DOM nodes
Use className (not class) for CSS classes and double curly braces for inline style objects
Embed any JavaScript expression in JSX using curly braces {}
Use .map() to render lists; always provide a unique key prop to each list item

Practice Exercise

Create a ProfileCard component that accepts name, role, and isVerified as props
Display a checkmark or badge only when isVerified is true using conditional rendering
Create a SkillList component that takes an array of skill strings and renders them as list items with .map()
Render both components inside an App component

Try it yourself

Preview

Key Takeaways

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like UI descriptions inside JavaScript functions
React components are JavaScript functions starting with a capital letter that return JSX
JSX requires one root element — use a Fragment (<> </>) to group elements without adding extra DOM nodes
Use className (not class) for CSS classes and double curly braces for inline style objects in JSX
Embed any JavaScript expression inside JSX using curly braces {}; use .map() to render lists
Each list item rendered with .map() needs a unique and stable key prop so React can efficiently update the list

Quick Quiz

1.Why does JSX use className instead of class?

2.What is a React Fragment and why would you use it?

3.Why must each item in a React list have a unique key prop?

4.What will {count > 0 && <p>New messages</p>} render when count is 0?

← What is React and Why Use It Next: Props and State →

Ready to go further?

CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.

Join CareerEx

9 minutes·Lesson 2 of 6

Components and JSX

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup directly inside your JavaScript code. It is the standard way to describe React UI.

// JSX looks like HTML but it is JavaScript
const element = <h1>Hello, world!</h1>;

// JSX is transformed into regular JavaScript by a build tool (like Babel or Vite)
const element = React.createElement("h1", null, "Hello, world!");

You never need to write React.createElement manually — JSX does it for you.

Functional Components

A React component is a JavaScript function that returns JSX. The function name must start with a capital letter:

// A simple functional component
function Welcome() {
  return <h1>Welcome to CareerEx!</h1>;
}

// Arrow function component — equally valid
const Welcome = () => {
  return <h1>Welcome to CareerEx!</h1>;
};

// Using the component — looks like an HTML tag
<Welcome />

JSX Rules

JSX has a few rules that differ from HTML:

1. Return One Root Element

A component can only return a single root element. Wrap multiple elements in a <div> or a Fragment:

// Wrong — two root elements
function Card() {
  return (
    <h2>Title</h2>
    <p>Description</p>
  );
}

// Correct — wrapped in a div
function Card() {
  return (
    <div>
      <h2>Title</h2>
      <p>Description</p>
    </div>
  );
}

// Better — use a Fragment (no extra DOM node)
function Card() {
  return (
    <>
      <h2>Title</h2>
      <p>Description</p>
    </>
  );
}

2. Self-Close Empty Tags

<img src="photo.jpg" alt="Photo" />  // Self-closed with /
<input type="text" />                 // Self-closed with /

3. Use className Instead of class

class is a reserved word in JavaScript, so JSX uses className:

<div className="card">Content</div>

4. Inline Styles Use Objects

<p style={{ color: "teal", fontSize: "16px" }}>Styled text</p>
// Note the double curly braces: outer {} for JSX expression, inner {} for the object

Expressions in JSX

Wrap any JavaScript expression in curly braces {} to use it inside JSX:

const name = "Fatima";
const progress = 65;

function Dashboard() {
  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <p>Progress: {progress}%</p>
      <p>Modules left: {Math.ceil((100 - progress) / 12)}</p>
      <p>Joined: {new Date().toLocaleDateString()}</p>
    </div>
  );
}

Conditional Rendering

Ternary Operator

function Status({ isOnline }) {
  return (
    <span className={isOnline ? "status-online" : "status-offline"}>
      {isOnline ? "Online" : "Offline"}
    </span>
  );
}

Short-Circuit (&&)

Use && to conditionally render content only when a condition is true:

function Notifications({ count }) {
  return (
    <div>
      <h2>Dashboard</h2>
      {count > 0 && (
        <p className="badge">{count} new notifications</p>
      )}
    </div>
  );
}

Lists and Keys

Use .map() to render a list from an array. Each item needs a unique key prop:

const courses = [
  { id: 1, title: "HTML Basics" },
  { id: 2, title: "CSS Fundamentals" },
  { id: 3, title: "JavaScript Basics" }
];

function CourseList() {
  return (
    <ul>
      {courses.map(course => (
        <li key={course.id}>{course.title}</li>
      ))}
    </ul>
  );
}

The key prop helps React efficiently update the list when items are added, removed, or reordered. Always use a stable, unique ID (not the array index if the list can change).

Key Takeaways

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like UI descriptions inside JavaScript
Functional components are JavaScript functions starting with a capital letter that return JSX
JSX must have one root element; use a Fragment (<> </>) to avoid extra DOM nodes
Use className (not class) for CSS classes and double curly braces for inline style objects
Embed any JavaScript expression in JSX using curly braces {}
Use .map() to render lists; always provide a unique key prop to each list item

Practice Exercise

Create a ProfileCard component that accepts name, role, and isVerified as props
Display a checkmark or badge only when isVerified is true using conditional rendering
Create a SkillList component that takes an array of skill strings and renders them as list items with .map()
Render both components inside an App component

Try it yourself

Preview

Key Takeaways

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like UI descriptions inside JavaScript functions
React components are JavaScript functions starting with a capital letter that return JSX
JSX requires one root element — use a Fragment (<> </>) to group elements without adding extra DOM nodes
Use className (not class) for CSS classes and double curly braces for inline style objects in JSX
Embed any JavaScript expression inside JSX using curly braces {}; use .map() to render lists
Each list item rendered with .map() needs a unique and stable key prop so React can efficiently update the list

Quick Quiz

1.Why does JSX use className instead of class?

2.What is a React Fragment and why would you use it?

3.Why must each item in a React list have a unique key prop?

4.What will {count > 0 && <p>New messages</p>} render when count is 0?

← What is React and Why Use It Next: Props and State →

Ready to go further?

CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.

Join CareerEx