Lesson 7 — JSX Explained (with Examples)

by

Introduction 😊

While learning React, one of the first new things you will notice is JSX.

At first glance, JSX looks like HTML written inside JavaScript, which can feel confusing for beginners.
But once you understand it, JSX actually makes React simpler, cleaner, and more powerful.

In this lesson, you will learn:

  • What JSX is
  • Why JSX is used in React
  • How JSX works behind the scenes
  • Rules of JSX with examples

Don’t worry — JSX is easy and beginner-friendly 🚀

What is JSX?

JSX stands for JavaScript XML.

It allows you to write HTML-like code inside JavaScript.

Example:

const element = <h1>Hello React</h1>;

👉 This is JSX.

JSX makes React code:

  • Easier to read 👀
  • Easier to write ✍️
  • Easier to understand 🧠

Why React Uses JSX 🤔

React could work without JSX, but JSX makes development much better.

Without JSX (pure JavaScript):

const element = React.createElement(
  "h1",
  null,
  "Hello React"
);

With JSX:

const element = <h1>Hello React</h1>;

✅ JSX is shorter
✅ JSX is cleaner
✅ JSX looks like HTML

That’s why most React developers prefer JSX.

JSX is Not HTML ⚠️

Although JSX looks like HTML, it is not HTML.

JSX is converted into JavaScript by tools like Babel.

Example JSX:

<h1>Hello</h1>

Behind the scenes:

React.createElement("h1", null, "Hello");

👉 This conversion happens automatically.

Using JavaScript Inside JSX 🔄

One powerful feature of JSX is that you can use JavaScript expressions inside it.

You use curly braces {} for this.

Example:

const name = "Avni";

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

✔ Variables
✔ Functions
✔ Expressions

All work inside JSX using {}.

JSX Rules You Must Follow 📌

JSX has a few important rules.

1️⃣ JSX Must Have One Parent Element

❌ Incorrect:

return (
  <h1>Hello</h1>
  <p>Welcome</p>
);

✅ Correct:

return (
  <div>
    <h1>Hello</h1>
    <p>Welcome</p>
  </div>
);

👉 You can also use React Fragment:

<>
  <h1>Hello</h1>
  <p>Welcome</p>
</>

2️⃣ Use className Instead of class

In JSX:

<h1 className="title">Hello</h1>

❌ class is not allowed
✅ className is correct

3️⃣ All Tags Must Be Closed

❌ Incorrect:

<img src="logo.png">

✅ Correct:

<img src="logo.png" />

JSX follows XML rules.

4️⃣ Use CamelCase for Attributes

Example:

<button onClick={handleClick}>
  Click Me
</button>

✔ onClick
❌ onclick

JSX with Conditional Content 🔀

JSX supports conditional rendering using JavaScript.

Example:

const isLoggedIn = true;

return (
  <h1>{isLoggedIn ? "Welcome Back" : "Please Login"}</h1>
);

👉 We’ll cover this in detail in the Conditional Rendering lesson.

JSX Makes Components Powerful ⚛️

JSX allows React components to:

  • Combine UI and logic
  • Stay reusable
  • Stay readable

Example:

function Welcome() {
  return <h2>Welcome to React Course</h2>;
}

👉 This is a React component written using JSX.

Common JSX Mistakes Beginners Make ❌

  • Forgetting to close tags
  • Using class instead of className
  • Returning multiple elements without a parent
  • Writing statements instead of expressions inside {}

💡 Practice helps you avoid these mistakes quickly.

Conclusion 🎯

JSX is a core part of React that makes UI development easier and more intuitive.

Key takeaways:

  • JSX allows writing HTML-like code in JavaScript
  • JSX improves readability and developer experience
  • JSX is converted to JavaScript behind the scenes
  • Following JSX rules avoids common errors

👉 Once you are comfortable with JSX, React becomes much easier to learn and use 💙

Frequently Asked Questions (FAQs) ❓

Is JSX mandatory in React?

No, but JSX is highly recommended and widely used.

Can browsers understand JSX?

No. JSX is converted into JavaScript before running in the browser.

Can I write logic inside JSX?

Yes, using JavaScript expressions inside {}.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 8 — Components in React (Function vs Class)
Understanding how React components work and how to create reusable UI blocks.

Leave a Comment