Fundamentals
JSX
Master JSX (JavaScript XML), covering compilation rules to React.createElement, embedding dynamic expressions, and attribute binding differences.
1. Learning Objectives
In this lesson, you will master the syntax and mechanics of JSX. By the end of this topic, you will be able to:
- Explain what JSX is and how it relates to JavaScript.
- Describe how compilers like Babel translate JSX into
React.createElementfunction calls. - Embed dynamic JavaScript expressions inside layouts using curly braces (
{{}}). - Identify key differences in attribute naming conventions between HTML and JSX.
- Explain how React protects applications against Cross-Site Scripting (XSS) by escaping inputs.
2. Overview
JSX (JavaScript XML) is a syntax extension for JavaScript used with React to describe what the user interface should look like. Although JSX resembles HTML, it is compiled down to standard JavaScript object creation calls. By using JSX, developers can write layout structures and component logic in the same file.
3. Why This Topic Matters
JSX bridges the gap between layout structure and application logic:
- Unified File Structure: Traditionally, markup (HTML) and logic (JavaScript) were separated into different files. JSX keeps the layout structure close to the logic that controls it, making code easier to read and maintain.
- Syntactic Sugar: Writing UI layouts using pure JavaScript calls (like `React.createElement('div', null, 'Hello')`) is verbose and difficult to read. JSX provides a clean, visual syntax.
4. Real-World Analogy
Think of JSX like **a shorthand order slip at a restaurant**:
- Raw JavaScript (The chef's manual): A list of step-by-step instructions: "Take a plate, add a bun, add a beef patty, add cheese, top with a bun."
- JSX (The order slip): You simply write `š`. It is a clean, visual shorthand that represents the final dish. The waiter translates this symbol into the chef's manual instructions, and the kitchen builds the dish. JSX is the clean shorthand that compiles down to JavaScript instructions for the browser.
5. Core Concepts
Below is a comparison of HTML and JSX syntax rules:
| Property | HTML Standards | JSX Standards |
|---|---|---|
| CSS Classes | class="btn-primary" |
className="btn-primary" |
| Form Labels | for="input-id" |
htmlFor="input-id" |
| Self-Closing Tags | Optional (e.g. <img src="..."> is allowed). |
Required (e.g. <img src="..." /> must end with slash). |
| Attribute Names | Lowercase (e.g. onclick, tabindex). |
camelCase (e.g. onClick, tabIndex). |
6. Syntax & API Reference
This example shows how a JSX snippet is compiled into JavaScript:
7. Visual Diagram
This diagram displays how compilers process JSX into final browser DOM elements:
8. Live Example ā Full Working Code
Below is a complete, single-file HTML page showing how to bind dynamic attributes and evaluate expressions inside JSX:
What just happened? Inside the component, we declare variables and functions. In the return block, we use curly braces `{}` to dynamic values (like `{user.avatarUrl}` for the image source, and `{getFullName(user)}` for the header text). React evaluates these expressions synchronously and inserts the computed values into the Virtual DOM.
9. Interactive Playground
Try It Yourself Challenges:
- Change the
themeColorvariable value to a green HEX code (e.g.#22c55e) and verify the photo border changes color. - Modify
getFullNameto return the name in all capital letters using the JavaScript.toUpperCase()method.
10. Common Mistakes
| Mistake | Why it happens | Wrong | Correct |
|---|---|---|---|
| Wrapping styles in string values | The style attribute in JSX accepts a JavaScript object, not a plain string. |
<div style="color: red"> |
<div style={{{{ color: 'red' }}}}> (double braces: outer denotes expression, inner denotes object) |
| Unclosed elements | Unlike HTML, all elements in JSX must be explicitly closed, including empty elements. | <input type="text"> |
<input type="text" /> |
11. Best Practices
- Use curly braces for dynamic values: Use strings for static values (e.g. `title="Hello"`) and curly braces for dynamic values (e.g. `title={myTitle}`).
- Keep JSX readable: If a JSX block stretches beyond multiple lines, wrap it in parentheses to prevent automatic semicolon insertion bugs.
- Apply camelCase names: Use camelCase for attributes (e.g. `strokeWidth`, `tabIndex`, `readOnly`).
12. Browser Compatibility/Requirements
JSX is not supported natively by browsers. It must be compiled to standard JavaScript (ES5/ES6) using a tool like Babel or TypeScript before running.
13. Interview Questions
Q1: Can browsers run JSX files directly? Why or why not?
Answer: No. JSX is not a valid ECMAScript standard; it is a syntax extension. Browsers only understand standard JavaScript. Therefore, JSX must be compiled into standard JavaScript function calls (specifically `React.createElement` or the newer `_jsx` runtime calls) using compilers like Babel or swc.
Q2: How does React protect applications against Cross-Site Scripting (XSS) attacks inside JSX templates?
Answer: By default, React automatically escapes any values embedded in JSX before rendering them. All values are converted to strings before being rendered. This prevents malicious scripts injected through user inputs from executing as executable code, protecting the application against XSS attacks.
14. Debugging Exercise
Identify the compile-time syntax error in this style block:
Diagnosis: Inside JSX style objects, CSS property names must be written in camelCase (without hyphens). JavaScript interprets the hyphen in `background-color` as a subtraction operator, resulting in a syntax error.
Fix: Change property keys to camelCase:
15. Practice Exercises
Exercise 1: Render a dynamic checklist page
Build a component named TaskCard. Declare an object containing task titles and completion status. Render a list item with a green checkmark if complete, or a red cross if incomplete, using JavaScript ternary operators directly inside the JSX template.
16. Scenario-Based Challenge
The Dynamic HTML content rendering bypass:
You are building a blog platform. The API returns the blog post content as raw HTML strings containing formatting tags (e.g. <strong>Title</strong>). By default, React escapes these HTML tags, rendering them as plain text. Explain how to bypass this escaping behavior using dangerouslySetInnerHTML, and discuss the security risks associated with this bypass.
17. Quick Quiz
Q1: How are JavaScript expressions evaluated inside JSX templates?
A) Inside double quotes: ""
B) Inside parenthesis: ()
C) Inside curly braces: {}
Answer: C ā Curly braces {} tell the JSX compiler to evaluate the enclosed expression as JavaScript.
18. Summary & Key Takeaways
- JSX is a syntax extension that compiles down to JavaScript objects (React elements).
- HTML attribute names are mapped to camelCase keys inside JSX.
- Double curly braces
style={{{{ fontSize: '12px' }}}}are used for inline styling objects. - React automatically escapes values embedded in JSX to prevent Cross-Site Scripting (XSS).
19. Cheat Sheet
| HTML Attribute | JSX Equivalent |
|---|---|
class |
className |
for |
htmlFor |
onclick |
onClick |
tabindex |
tabIndex |