What is JSX in React - Deep Dive

Overview - What is JSX

What is it?

JSX is a special syntax used in React that looks like HTML but works inside JavaScript. It lets you write UI elements in a way that feels like writing HTML tags, but it actually creates JavaScript objects behind the scenes. This makes building user interfaces easier and more intuitive for developers. JSX is not a separate language but a syntax extension that React understands and transforms.

Why it matters

Without JSX, developers would have to write complex JavaScript code to create UI elements, which is harder to read and write. JSX simplifies the process by allowing a clear, visual way to describe what the UI should look like. This improves productivity and reduces mistakes, making web apps faster to build and easier to maintain. Without JSX, React would be much less approachable for beginners and slower for everyone.

Where it fits

Before learning JSX, you should understand basic JavaScript and HTML. After mastering JSX, you can learn about React components, hooks, and state management. JSX is a foundational skill that connects writing UI structure with React’s dynamic behavior.

Mental Model

Core Idea

JSX is a way to write HTML-like code inside JavaScript that React turns into UI elements.

Think of it like...

JSX is like writing a recipe in your native language that a chef (React) reads and turns into a delicious dish (the UI). You write instructions that look familiar, but the chef knows how to prepare them perfectly.

JavaScript Code
  └─ JSX Syntax (looks like HTML)
       └─ React Transforms
            └─ JavaScript Objects Representing UI
                 └─ Browser Renders UI Elements

Build-Up - 6 Steps

1

Foundation

JSX Looks Like HTML Inside JavaScript

Concept: JSX lets you write tags that look like HTML directly in JavaScript code.

In React, instead of writing plain JavaScript to create UI elements, you write something like

Hello

. This looks like HTML but is actually JSX syntax. Browsers don’t understand JSX directly; React transforms it into JavaScript objects.

Result

You can write UI code that is easy to read and looks like the final webpage structure.

Understanding that JSX is just syntax sugar helps you see it as a tool to write UI code more clearly, not a new language.

2

Foundation

JSX Is Transformed to JavaScript Objects

Concept: JSX code is converted by React into JavaScript objects that describe UI elements.

When you write

Title

in JSX, React turns it into React.createElement('h1', null, 'Title'). This object tells React what to show on the screen. This transformation happens before the code runs in the browser.

Result

JSX code becomes JavaScript instructions that React uses to build the UI.

Knowing JSX is not HTML but a shortcut to create JavaScript objects clarifies why you can use JavaScript expressions inside JSX.

3

Intermediate

Embedding JavaScript Expressions in JSX

🤔Before reading on: Do you think you can put any JavaScript code directly inside JSX tags? Commit to your answer.

Concept: JSX allows embedding JavaScript expressions inside curly braces to make UI dynamic.

Inside JSX, you can write {expression} to include JavaScript values or calculations. For example,

{2 + 3}

will show 5. This lets you mix logic and UI easily.

Result

UI elements can display dynamic content based on JavaScript values or functions.

Understanding that JSX supports JavaScript expressions inside braces unlocks powerful ways to create dynamic interfaces.

4

Intermediate

JSX Must Have One Parent Element

🤔Before reading on: Do you think JSX can return multiple sibling elements without wrapping? Commit to your answer.

Concept: JSX requires all returned UI elements to be wrapped in a single parent element or fragment.

If you try to return

Hello

World

directly, React will give an error. You must wrap them like <>

Hello

World

or inside a div. This keeps the UI structure clear and consistent.

Result

JSX code is always a single tree structure, making React’s rendering predictable.

Knowing JSX’s single parent rule prevents common syntax errors and helps organize UI hierarchies.

5

Advanced

JSX Supports Custom Components as Tags

🤔Before reading on: Do you think JSX tags can only be HTML tags like div or span? Commit to your answer.

Concept: JSX lets you use your own React components as tags, mixing them with HTML tags.

You can write in JSX where MyButton is a React component function or class. React treats these differently from HTML tags and calls your component code to render UI.

Result

JSX becomes a powerful way to compose complex UIs from reusable pieces.

Understanding that JSX tags can represent components as well as HTML elements is key to building modular React apps.

6

Expert

JSX Compilation and Performance Optimizations

🤔Before reading on: Do you think JSX code runs as-is in the browser without any changes? Commit to your answer.

Concept: JSX is compiled by tools like Babel into optimized JavaScript before running, enabling performance improvements.

JSX code is transformed into React.createElement calls or newer JSX runtime calls. This compilation step can optimize code, remove unnecessary parts, and improve rendering speed. Understanding this helps debug and optimize React apps.

Result

JSX code runs efficiently in browsers after compilation, not as raw JSX syntax.

Knowing JSX is a compile-time syntax helps you understand build tools and why errors sometimes appear during compilation, not runtime.

Under the Hood

JSX is parsed by a compiler (like Babel) that converts the JSX tags into JavaScript function calls, usually React.createElement or calls to the new JSX runtime. These calls create plain JavaScript objects called React elements that describe what the UI should look like. React then uses these objects to build and update the actual DOM in the browser efficiently.

Why designed this way?

JSX was designed to combine the clarity of HTML-like syntax with the power of JavaScript. This approach avoids mixing strings of HTML with JavaScript code, which is error-prone. By compiling JSX to JavaScript objects, React can optimize rendering and keep UI descriptions declarative and easy to read.

JSX Source Code
  └─ Babel Compiler
       └─ React.createElement Calls
            └─ React Elements (JS Objects)
                 └─ React DOM Renderer
                      └─ Browser DOM Updates

Myth Busters - 4 Common Misconceptions

Quick: Do you think JSX is HTML that browsers understand directly? Commit to yes or no.

Common Belief: JSX is just HTML inside JavaScript and browsers can run it as-is.

Reality: Browsers do not understand JSX directly; it must be compiled into JavaScript before running.

Why it matters: Trying to run JSX code directly in browsers causes errors and confusion for beginners.

Quick: Do you think JSX tags must always be lowercase? Commit to yes or no.

Common Belief: All JSX tags are lowercase because they represent HTML elements.

Reality: JSX tags starting with uppercase letters represent custom React components, while lowercase tags are HTML elements.

Why it matters: Misnaming components with lowercase letters causes React to treat them as HTML tags, breaking the UI.

Quick: Do you think you can put statements like if or for directly inside JSX braces? Commit to yes or no.

Common Belief: You can write any JavaScript code, including statements, inside JSX curly braces.

Reality: Only JavaScript expressions (which return values) can go inside JSX braces, not statements like if or loops.

Why it matters: Trying to use statements inside JSX causes syntax errors and confusion about JSX capabilities.

Quick: Do you think JSX always creates DOM elements immediately? Commit to yes or no.

Common Belief: JSX code instantly creates DOM elements when the code runs.

Reality: JSX creates React elements (objects), not DOM nodes; React uses these objects to update the DOM efficiently later.

Why it matters: Misunderstanding this leads to confusion about React’s rendering process and performance.

Expert Zone

1

JSX compilation can target different runtimes, like the classic React.createElement or the newer automatic runtime, affecting how imports and code size behave.

2

Using fragments <>... in JSX avoids extra DOM nodes, which is important for clean HTML and CSS styling.

3

JSX expressions are just JavaScript, so you can pass functions, objects, or arrays inside braces, enabling advanced dynamic UI patterns.

When NOT to use

JSX is not suitable if you want to write pure JavaScript without any build step or if you are working in environments that do not support JSX compilation. Alternatives include using React.createElement directly or other UI libraries that do not require JSX.

Production Patterns

In production, JSX is combined with tools like Babel and Webpack to optimize code size and performance. Developers use JSX with TypeScript for type safety and with linting tools to enforce style. JSX is also used with hooks and context to build scalable, maintainable React applications.

Connections

Template Engines (e.g., Handlebars, EJS)

JSX and template engines both let you write UI markup mixed with code logic.

Understanding JSX helps grasp how UI templates work in other frameworks, showing a pattern of combining structure and logic.

Functional Programming

JSX expressions are pure functions returning UI descriptions.

Knowing functional programming concepts clarifies how JSX components are predictable and easy to test.

Declarative UI Design

JSX embodies declarative UI by describing what the UI should look like, not how to build it step-by-step.

Recognizing JSX as declarative helps understand modern UI frameworks and their advantages over imperative DOM manipulation.

Common Pitfalls

#1 Trying to return multiple JSX elements without a wrapper.

Wrong approach:

return (HelloWorld);

Correct approach:

return (<>HelloWorld);

Root cause:

JSX requires a single parent element to form a valid tree structure.

#2 Using lowercase for custom component names.

Wrong approach:

function mybutton() { return ; } export default mybutton;

Correct approach:

function MyButton() { return ; } export default MyButton;

Root cause:

React treats lowercase tags as HTML elements, so components must start with uppercase.

#3 Placing statements like if directly inside JSX braces.

Wrong approach:

{if (x > 0) { 'Yes' }}

Correct approach:

{x > 0 ? 'Yes' : 'No'}

Root cause:

JSX braces accept expressions, not statements; ternary operators are expressions.

Key Takeaways

JSX is a syntax that lets you write HTML-like code inside JavaScript to describe UI elements clearly.

JSX is not HTML but compiles into JavaScript objects that React uses to build the UI efficiently.

You can embed JavaScript expressions inside JSX using curly braces to create dynamic content.

JSX requires a single parent element to wrap multiple elements, ensuring a clear UI structure.

Understanding JSX’s compilation and runtime behavior is key to mastering React development.

Practice

1. What is JSX in React?

easy

A. A syntax that lets you write HTML-like code inside JavaScript

B. A CSS framework for styling React components

C. A database query language used with React

D. A tool to compile JavaScript into machine code

Solution

1. Step 1: Understand JSX purpose

   JSX allows writing HTML-like tags directly in JavaScript code, making UI code easier to write and read.

2. Step 2: Identify incorrect options

   Options B, C, and D describe unrelated tools or concepts not connected to JSX.

3. Final Answer:

   A syntax that lets you write HTML-like code inside JavaScript -> Option A

4. Quick Check:

   JSX = HTML-like code in JavaScript [OK]

Hint: JSX looks like HTML but is inside JavaScript code [OK]

Common Mistakes:

• Confusing JSX with CSS or styling tools
• Thinking JSX is a separate language
• Believing JSX is a database query language

2. Which of the following is the correct way to write a JSX element?

easy

A. <div>Hello World

B. div>Hello World

C. Hello World

D. {div}Hello World{/div}

Solution

1. Step 1: Check JSX tag syntax

   JSX elements must have opening and closing tags properly enclosed in angle brackets, like <div>Hello World</div>.

2. Step 2: Identify syntax errors in other options

   div>Hello World</div> misses the opening angle bracket, C misses the closing tag, and D uses curly braces incorrectly.

3. Final Answer:

   <div>Hello World</div> -> Option C

4. Quick Check:

   Proper JSX tags use <tag>content</tag> [OK]

Hint: JSX tags look like HTML tags with < and > [OK]

Common Mistakes:

• Omitting angle brackets around tags
• Forgetting closing tags
• Using curly braces instead of angle brackets for tags

3. What will this JSX code render?

const element = <h1>Hello, {"React"} & JSX!</h1>;
ReactDOM.render(element, document.getElementById('root'));

medium

A. Hello, {"React"} & JSX!

B. SyntaxError due to curly braces

C. Hello, React & JSX!

D. Hello, React & JSX!

Solution

1. Step 1: Understand JSX expression inside curly braces

   The string "React" inside curly braces is evaluated and inserted as text inside the h1 element.

2. Step 2: Recognize HTML entities and output

   The & symbol renders as & in the browser, so the final rendered text is Hello, React & JSX! inside an h1 tag.

3. Final Answer:

   <h1>Hello, React & JSX!</h1> -> Option D

4. Quick Check:

   JSX expressions render evaluated content [OK]

Hint: Curly braces insert JavaScript values inside JSX [OK]

Common Mistakes:

• Thinking curly braces print raw code
• Confusing HTML entities with literal text
• Expecting syntax error from curly braces

4. Identify the error in this JSX code:

const element = <div>Hello {name}</div>
ReactDOM.render(element, document.getElementById('root'));

Assuming name is not defined anywhere.

medium

A. ReferenceError because 'name' is not defined

B. SyntaxError due to missing quotes around name

C. Renders 'Hello name' as plain text

D. No error, renders empty space after Hello

Solution

1. Step 1: Check variable usage inside JSX

   JSX expressions inside curly braces expect valid JavaScript variables or expressions. Here, 'name' is not defined.

2. Step 2: Understand runtime behavior

   Using an undefined variable causes a ReferenceError at runtime, stopping rendering.

3. Final Answer:

   ReferenceError because 'name' is not defined -> Option A

4. Quick Check:

   Undefined variables in JSX cause ReferenceError [OK]

Hint: Variables in JSX must be defined before use [OK]

Common Mistakes:

• Assuming missing quotes cause syntax error
• Thinking JSX prints variable names as text
• Believing undefined variables render empty strings

5. How can you include a JavaScript expression inside JSX to display the sum of 2 + 3?

hard

A. The sum is {"2 + 3"}

B. The sum is {2 + 3}

C. The sum is (2 + 3)

D. The sum is "2 + 3"

Solution

1. Step 1: Use curly braces for JavaScript expressions in JSX

   JSX lets you insert JavaScript expressions inside curly braces to evaluate and display their result.

2. Step 2: Evaluate each option's expression

   The sum is {2 + 3}

   correctly uses curly braces with 2 + 3, which evaluates to 5. Options A and B treat it as a string, and C uses parentheses without curly braces, so it won't evaluate.

3. Final Answer:

   <p>The sum is {2 + 3}</p> -> Option B

4. Quick Check:

   Curly braces evaluate JS expressions inside JSX [OK]

Hint: Use curly braces to evaluate expressions inside JSX [OK]

Common Mistakes:

• Putting expressions inside quotes disables evaluation
• Using parentheses without curly braces
• Confusing strings with expressions