What is JSX in React - Visual Explanation

Concept Flow - What is JSX

Write JSX code

↓

React compiles JSX

↓

JSX becomes React.createElement calls

↓

React renders elements to DOM

↓

User sees UI in browser

JSX is a syntax that looks like HTML but is transformed by React into JavaScript calls that create UI elements.

Execution Sample

React

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

This code creates a JSX element and renders it inside the page element with id 'root'.

Execution Table

Step	Action	JSX Code	Transformed Code	Result
1	Write JSX	<h1>Hello, world!</h1>	N/A	JSX element created in code
2	Compile JSX	<h1>Hello, world!</h1>	React.createElement('h1', null, 'Hello, world!')	JSX transformed to React call
3	Render element	React.createElement('h1', null, 'Hello, world!')	N/A	React renders <h1>Hello, world!</h1> in DOM
4	Display UI	N/A	N/A	User sees 'Hello, world!' as heading on page

💡 Rendering completes and user sees the heading on the webpage.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
element	undefined	<h1>Hello, world!</h1>	React.createElement('h1', null, 'Hello, world!')	Rendered in DOM	Displayed on page

Key Moments - 2 Insights

Why does JSX look like HTML but is not a string?

JSX looks like HTML but is actually JavaScript syntax that React compiles into function calls, as shown in step 2 of the execution_table.

What happens to JSX before it reaches the browser?

JSX is transformed by React's compiler into React.createElement calls before rendering, as seen in step 2 and 3 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what does the JSX <h1>Hello, world!</h1> become after compilation?

A '<h1>Hello, world!</h1>' string

B document.createElement('h1')

C React.createElement('h1', null, 'Hello, world!')

D A plain JavaScript object

💡 Hint

Check step 2 in the execution_table where JSX is compiled.

At which step does React actually put the element into the webpage DOM?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Render element' action in the execution_table.

If we change the JSX to <p>Hi!</p>, what changes in the execution_table?

A The transformed code changes to React.createElement('p', null, 'Hi!')

B The rendering step is skipped

C The variable 'element' becomes undefined

D The user sees 'Hello, world!' still

💡 Hint

Focus on how JSX transforms in step 2 of the execution_table.

Concept Snapshot

JSX is a syntax that looks like HTML inside JavaScript.
React compiles JSX into React.createElement calls.
These calls create React elements.
React renders these elements to the browser DOM.
JSX makes writing UI easier and clearer.

Full Transcript

JSX is a special syntax used in React that looks like HTML but is actually JavaScript. When you write JSX, React compiles it into calls to React.createElement. These calls create React elements that React uses to build the user interface. Finally, React renders these elements into the browser's DOM so the user can see the UI. This process lets developers write UI code that looks like HTML but works as JavaScript behind the scenes.