FlexiBlog Theme
HomeAbout Me

React Fundamental: Using JSX

By Daniel Nguyen
Published in React JS
May 04, 2025
2 min read
React Fundamental: Using JSX

🧠 Mastering JSX: From Syntax Sugar to React Power Tool

JSX is often one of the first things developers encounter when learning React—and for good reason. It makes working with the DOM in JavaScript feel almost like writing HTML. But what exactly is JSX? And how does it work under the hood? Let’s explore JSX from the ground up and get familiar with the real power behind this syntax.

🧩 What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write what looks like HTML inside your JavaScript code. While it might look like HTML, JSX is actually syntactic sugar for React.createElement() calls.

For example:

const element = <h1 id="greeting">Hey there</h1>

…is equivalent to:

const element = createElement('h1', {
    id: 'greeting',
    children: 'Hey there',
})

This transformation is handled by a code compiler, such as Babel, which translates your JSX into standard JavaScript that browsers can understand.

🧪 Try it yourself: See how JSX compiles using the Babel REPL!

🛠️ How JSX is Compiled

JSX isn’t valid JavaScript by itself—it must be compiled before it can run in a browser. Typically, this happens at build time using Babel and a bundler like Webpack or Vite.

But during development or for educational purposes, you can also compile JSX in the browser using Babel’s in-browser script:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    // JSX goes here and gets compiled on the fly!
</script>

🧠 Note: When JSX is compiled in the browser, you’ll notice a script injected into the <head> of your HTML that contains the compiled output.

🌀 JSX Interpolation

Interpolation allows you to inject dynamic JavaScript expressions inside your JSX using curly braces {}.

For instance:

const className = 'container'
const children = 'Hello World'
const message = `${greeting} ${subject}`


const element = <div className={className}>{children}</div>

Without interpolation, you’d be stuck hardcoding everything. With it, you make your UI dynamic and reusable.

📚 Learn more:

  • JavaScript in JSX with Curly Braces
  • Passing strings with quotes

🔁 Spread Props in JSX

Sometimes, you have a props object that you want to apply to a JSX element. Instead of passing each prop manually, JSX supports spread syntax using {...}.

const props = {
    children: 'Hello World',
    className: 'container',
}


const element = <div {...props} />

This is functionally identical to:

const element = createElement('div', { ...props })

📚 Reference: Forwarding props with the JSX spread syntax

🧱 Nesting JSX Elements

JSX allows you to nest elements just like you would with HTML:

const element = (
    <div className="container">
        <p>Here's Sam's favorite food:</p>
        <ul className="sams-food">
            <li>Green eggs</li>
            <li>Ham</li>
        </ul>
    </div>
)

Behind the scenes, this is translated into deeply nested createElement() calls. JSX just makes it more readable and intuitive.

💡 Tip: In JSX, class becomes className.

🧩 React Fragments: No More Unnecessary <div>s

What if you want to return multiple elements without wrapping them in a <div>? That’s where React Fragments come in:

<>
    <p>Here's Sam's favorite food:</p>
    <ul className="sams-food">
        <li>Green eggs</li>
        <li>Ham</li>
    </ul>
</>

This compiles to:

React.createElement(React.Fragment, null,
    React.createElement("p", null, "Here's Sam's favorite food:"),
    React.createElement("ul", { className: "sams-food" },
        React.createElement("li", null, "Green eggs"),
        React.createElement("li", null, "Ham")
    )
)

✅ Result: no extra DOM node is introduced, keeping your HTML clean and styling predictable.

📚 Learn more: React Fragment Docs

🧠 Why Understanding JSX Compilation Matters

The more fluent you become in how JSX maps to React.createElement, the better you’ll be at debugging and understanding how React works under the hood. JSX may look like HTML, but remember—it’s just JavaScript in disguise.

Try mentally compiling JSX expressions as a learning exercise. It’ll sharpen your skills and help demystify how React operates under the hood.

🎓 Summary

ConceptJSX SyntaxEquivalent JS
Basic element<h1>Hello</h1>createElement('h1', null, 'Hello')
With props<div className="box">Hi</div>createElement('div', { className: 'box' }, 'Hi')
Spread props<div {...props} />createElement('div', props)
Nested elements<ul><li>1</li></ul>createElement('ul', null, createElement('li', null, '1'))
Fragment<>A</>createElement(React.Fragment, null, 'A')

🧪 Practice Time

  • Try rewriting raw createElement calls in JSX
  • Interpolate variables inside JSX
  • Use spread props with object literals
  • Replace wrapper <div>s with fragments when appropriate

Want to see it in action? Head over to React’s official JSX guide or experiment live using the Babel REPL.

Let JSX be your superpower—not your mystery. Happy coding! 🧑‍💻✨

Tags

#ReactFundamental

Share

Previous Article
React Fundamental: Raw React APIs
Next Article
React Fundamental: Custom components

Table Of Contents

1
🧩 What is JSX?
2
🛠️ How JSX is Compiled
3
🌀 JSX Interpolation
4
🔁 Spread Props in JSX
5
🧱 Nesting JSX Elements
6
🧩 React Fragments: No More Unnecessary <div>s
7
🧠 Why Understanding JSX Compilation Matters
8
🎓 Summary

Related Posts

React Fundamental: Rendering Arrays
Daniel Nguyen
May 11, 2025
3 min
FlexiBlog Theme
© 2025, All Rights Reserved.
Powered By

Quick Links

About Me

Legal Stuff

Privacy Notice

Social Media

github