JSX syntax rules in React - Deep Dive

Overview - JSX syntax rules

What is it?

JSX is a special syntax used in React to write HTML-like code inside JavaScript. It lets you describe what the user interface should look like in a way that feels natural and easy to read. JSX is not a string or HTML but a syntax that compiles to JavaScript function calls. It helps combine structure and logic in one place for building web components.

Why it matters

Without JSX, writing user interfaces in React would be much harder and less intuitive because you'd have to use plain JavaScript function calls to create elements. JSX makes the code look like HTML, which is familiar to most developers, speeding up development and reducing mistakes. It also helps React understand the structure of your UI clearly, improving performance and maintainability.

Where it fits

Before learning JSX syntax rules, you should understand basic JavaScript and React concepts like components and functions. After mastering JSX, you can learn about React hooks, component state, and advanced rendering patterns to build dynamic applications.

Mental Model

Core Idea

JSX lets you write HTML-like code inside JavaScript that React transforms into UI elements.

Think of it like...

JSX is like writing a recipe in your native language that a chef (React) understands and turns into a delicious dish (the UI).

JavaScript Code
  └─ JSX Syntax (looks like HTML)
       └─ Compiled by React
            └─ Creates UI Elements

JSX Example:
<div>
  <h1>Hello</h1>
</div>

Becomes:
React.createElement('div', null, React.createElement('h1', null, 'Hello'))

Build-Up - 7 Steps

1

Foundation

JSX looks like HTML inside JavaScript

Concept: JSX syntax allows writing tags that look like HTML directly in JavaScript code.

In JSX, you write tags like

,

, or

Result

The function returns a JSX element that React can render as a heading on the page.

Understanding that JSX is not a string or HTML but a special syntax inside JavaScript helps you see how React builds the UI.

2

Foundation

JSX must return a single root element

Concept: JSX expressions must have one parent element wrapping all other elements.

If you want to return multiple elements, you must wrap them in one container element like a

or React.Fragment: function List() { return (

Item 1

Item 2

); } Or using a fragment: function List() { return ( <>

Item 1

Item 2

); }

Result

React can only render one root element, so wrapping multiple elements prevents errors.

Knowing the single root rule avoids common syntax errors and helps structure your components properly.

3

Intermediate

JSX uses camelCase for attributes

🤔Before reading on: do you think JSX attributes use HTML names like 'class' or JavaScript names like 'className'? Commit to your answer.

Concept: JSX attributes mostly use camelCase naming instead of HTML attribute names.

For example, instead of 'class' you write 'className', and instead of 'onclick' you write 'onClick'. This matches JavaScript naming conventions:

Result

JSX attributes map to JavaScript properties, making event handling and styling consistent.

Understanding camelCase attribute names prevents bugs and confusion when adding styles or events.

4

Intermediate

JSX expressions use curly braces for JavaScript

🤔Before reading on: do you think you can put any JavaScript code directly inside JSX tags or only inside curly braces? Commit to your answer.

Concept: To include JavaScript values or expressions inside JSX, you wrap them in curly braces {}.

For example: const name = 'Alice'; return

Hello, {name}!

; You can also use expressions: return

{1 + 2}

; But you cannot put statements like if or for directly inside JSX without wrapping them in JavaScript code.

Result

JSX renders dynamic content by evaluating expressions inside curly braces.

Knowing when and how to use curly braces lets you mix JavaScript logic with UI markup cleanly.

5

Intermediate

JSX elements must be properly closed

Concept: All JSX tags must be closed, either with a closing tag or self-closing slash.

Unlike HTML, JSX requires every tag to be closed: Correct:

Incorrect:

This rule helps JSX parse the code correctly.

Result

Properly closed tags prevent syntax errors and parsing issues.

Recognizing JSX's strict closing rules avoids frustrating errors during compilation.

6

Advanced

JSX compiles to React.createElement calls

🤔Before reading on: do you think JSX runs directly in the browser or is transformed before running? Commit to your answer.

Concept: JSX is not understood by browsers directly; it is compiled into React.createElement calls by tools like Babel.

For example, this JSX:

Hello

Becomes: React.createElement('div', null, 'Hello') This function call creates a React element object that React uses to build the UI.

Result

JSX is a developer-friendly syntax that compiles into JavaScript function calls React understands.

Knowing JSX compiles to function calls clarifies why JSX must follow strict syntax rules.

7

Expert

JSX supports embedding expressions but not statements

🤔Before reading on: can you write an if statement directly inside JSX tags or only expressions? Commit to your answer.

Concept: JSX allows embedding JavaScript expressions inside curly braces but not statements like if or loops directly.

You can write: {condition ? : } But not: {if (condition) { }} To use statements, you must write them outside JSX or use helper functions. This keeps JSX declarative and simple.

Result

JSX remains a clean syntax for UI description without mixing complex logic inside markup.

Understanding this limitation guides you to separate logic from UI structure effectively.

Under the Hood

JSX is a syntax extension that browsers do not understand natively. During build time, tools like Babel transform JSX code into React.createElement calls. Each JSX tag becomes a function call that returns a plain JavaScript object describing the UI element, its properties, and children. React then uses these objects to efficiently update the real DOM. This process allows JSX to combine the clarity of HTML-like syntax with the power of JavaScript.

Why designed this way?

JSX was designed to make UI code easier to write and read by blending markup and logic. Traditional JavaScript function calls for UI creation were verbose and hard to read. JSX's HTML-like syntax leverages developers' familiarity with HTML, improving productivity. The compilation step ensures browsers only run standard JavaScript, maintaining compatibility. Alternatives like template strings or separate HTML files were less flexible or harder to integrate with JavaScript logic.

Source Code with JSX
  └─ Babel Compiler
       └─ React.createElement Calls
            └─ React Element Objects
                 └─ React DOM Renderer
                      └─ Browser DOM Updates

Myth Busters - 4 Common Misconceptions

Quick: Do you think JSX is HTML code that runs directly in the browser? Commit yes or no.

Common Belief: JSX is just HTML inside JavaScript and runs as HTML in the browser.

Reality: JSX is a syntax that compiles to JavaScript function calls; browsers never see JSX directly.

Why it matters: Believing JSX is HTML can cause confusion about syntax errors and how React updates the UI.

Quick: Do you think you can use statements like if or for directly inside JSX tags? Commit yes or no.

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

Reality: JSX only allows expressions inside curly braces, not statements like if or loops.

Why it matters: Trying to use statements inside JSX leads to syntax errors and misunderstanding of JSX's declarative nature.

Quick: Do you think JSX attributes use the same names as HTML attributes? Commit yes or no.

Common Belief: JSX uses HTML attribute names like 'class' and 'for' exactly as in HTML.

Reality: JSX uses camelCase names like 'className' and 'htmlFor' to match JavaScript property names.

Why it matters: Using HTML attribute names in JSX causes bugs and warnings, breaking styling or behavior.

Quick: Do you think JSX allows multiple root elements without wrapping? Commit yes or no.

Common Belief: You can return multiple sibling JSX elements without a parent container.

Reality: JSX requires a single root element; multiple siblings must be wrapped in a container or fragment.

Why it matters: Ignoring this causes syntax errors and prevents React from rendering components properly.

Expert Zone

1

JSX elements are just objects, so you can store them in variables, pass them as props, or return them from functions, enabling powerful composition patterns.

2

React.Fragment lets you group multiple elements without adding extra nodes to the DOM, which is important for clean HTML structure and CSS styling.

3

JSX can be customized with Babel plugins to support advanced syntax like automatic runtime or custom pragma functions, optimizing performance and developer experience.

When NOT to use

JSX is not suitable when you want to generate UI purely on the server without React or when working with non-React frameworks. In those cases, use plain JavaScript templating or server-side rendering tools. Also, for very simple scripts or static HTML, JSX adds unnecessary complexity.

Production Patterns

In production, JSX is used with build tools like Webpack and Babel to compile code before deployment. Developers use JSX with hooks and context to build reusable components. Patterns like conditional rendering with ternaries, mapping arrays to JSX lists, and using fragments for grouping are common. Also, linting tools enforce JSX syntax rules to maintain code quality.

Connections

Template Literals in JavaScript

Both embed expressions inside strings or markup using special syntax.

Understanding how template literals embed expressions helps grasp how JSX uses curly braces to embed JavaScript inside markup.

Declarative Programming

JSX supports declarative UI description, focusing on what the UI should be, not how to build it step-by-step.

Knowing declarative programming principles clarifies why JSX disallows statements inside markup and encourages expression-based UI definitions.

XML Syntax Rules

JSX syntax is inspired by XML, requiring proper tag closing and nesting.

Familiarity with XML helps understand JSX's strict tag closing and single root element requirements.

Common Pitfalls

#1 Using HTML attribute names instead of JSX camelCase names.

Wrong approach:

Content

Correct approach:

Content

Root cause: Confusing HTML attribute names with JSX property names causes React to ignore or warn about attributes.

#2 Returning multiple sibling JSX elements without a wrapper.

Wrong approach: return (

Title

Paragraph

);

Correct approach: return (<>

Title

Paragraph

);

Root cause: JSX requires a single root element; forgetting this leads to syntax errors.

#3 Trying to use statements like if directly inside JSX.

Wrong approach: return (

{if (show)

Show

}

);

Correct approach: return (

{show ?

Show

: null}

);

Root cause: JSX only accepts expressions inside curly braces, not statements.

Key Takeaways

JSX is a syntax that looks like HTML but compiles to JavaScript function calls React uses to build UI.

JSX requires a single root element and all tags must be properly closed to avoid syntax errors.

Attributes in JSX use camelCase names matching JavaScript properties, not HTML attribute names.

JavaScript expressions can be embedded inside JSX using curly braces, but statements like if or loops cannot.

Understanding JSX's compilation and syntax rules helps write clean, error-free React components.