JSX in Vue components - Step-by-Step Execution

Concept Flow - JSX in Vue components

Define Vue component

↓

Write render function using JSX

↓

Vue compiles JSX to render function

↓

Render function returns VNodes

↓

Vue renders VNodes to DOM

↓

User interacts -> state changes

↓

Component re-renders with updated JSX output

JSX in Vue components works by writing a render function with JSX syntax, which Vue compiles to virtual nodes that update the DOM reactively.

Execution Sample

Vue

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    return () => <button onClick={() => count.value++}>Count: {count.value}</button>;
  }
});

A Vue component using JSX to render a button that increments a count on click.

Execution Table

Step	Action	JSX Evaluation	State Before	State After	Rendered Output
1	Component setup runs	JSX function created	count=undefined	count=0	<button>Count: 0</button>
2	Initial render	Render function called	count=0	count=0	<button>Count: 0</button>
3	User clicks button	onClick handler runs	count=0	count=1	<button>Count: 1</button>
4	Re-render triggered	Render function called	count=1	count=1	<button>Count: 1</button>
5	User clicks button again	onClick handler runs	count=1	count=2	<button>Count: 2</button>
6	Re-render triggered	Render function called	count=2	count=2	<button>Count: 2</button>
7	No more clicks	No action	count=2	count=2	<button>Count: 2</button>

💡 User stops clicking, component state stabilizes with count=2

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
count.value	undefined	0	1	2	2

Key Moments - 3 Insights

Why does the button text update when count changes?

Because the render function returns JSX using count.value, and Vue tracks count as reactive. When count.value changes (see steps 3 and 5), Vue re-runs the render function to update the DOM (steps 4 and 6).

Is JSX a template or a function in Vue?

JSX in Vue is used inside a render function (see step 1). It is not a separate template but JavaScript code that returns virtual nodes.

What happens if you forget to use count.value inside JSX?

The displayed count won't update because Vue tracks reactivity on count.value. Using count directly won't trigger updates (not shown in table but important).

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output after step 3?

A <button>Count: 0</button>

B <button>Count: 1</button>

C <button>Count: 2</button>

D <button>Count: undefined</button>

💡 Hint

Check the 'Rendered Output' column at step 3 in the execution_table.

At which step does the component first re-render after a state change?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look for 'Re-render triggered' in the 'Action' column of execution_table.

If count.value was not reactive, what would happen to the rendered output after clicks?

A Output never updates after initial render

B Component crashes

C Output updates normally

D Output updates but with delay

💡 Hint

Refer to variable_tracker and how Vue reactivity triggers re-renders.

Concept Snapshot

JSX in Vue components:
- Write JSX inside a render function returned from setup()
- Use reactive refs (e.g., count.value) inside JSX
- Vue compiles JSX to virtual DOM nodes
- State changes trigger re-render with updated JSX output
- JSX allows JavaScript logic inside Vue rendering

Full Transcript

This visual trace shows how JSX works inside a Vue component. The component defines a reactive count variable using ref. The render function returns JSX that displays the count and increments it on button click. Each click updates count.value, triggering Vue to re-run the render function and update the DOM with new JSX output. The execution table tracks each step: setup, initial render, clicks, and re-renders. The variable tracker shows count.value changing from 0 to 2. Key moments clarify why JSX updates with reactive state and how JSX is a render function, not a template. The quiz tests understanding of rendered output and reactivity. This helps beginners see how JSX and Vue reactivity work together to update the UI.

Practice

1. What is the main purpose of using JSX in Vue components?

easy

A. To write HTML-like code inside JavaScript functions for UI rendering

B. To replace JavaScript with HTML code

C. To write CSS styles directly inside Vue components

D. To create Vue components without any JavaScript

Solution

1. Step 1: Understand JSX role in Vue

   JSX allows writing HTML-like syntax inside JavaScript, making UI code dynamic and easier to manage.

2. Step 2: Compare options

   Only To write HTML-like code inside JavaScript functions for UI rendering correctly describes JSX's purpose. Others confuse JSX with CSS or removing JavaScript.

3. Final Answer:

   To write HTML-like code inside JavaScript functions for UI rendering -> Option A

4. Quick Check:

   JSX = HTML-like code in JS [OK]

Hint: JSX mixes HTML look inside JavaScript functions [OK]

Common Mistakes:

• Thinking JSX replaces JavaScript entirely
• Confusing JSX with CSS styling
• Believing JSX removes the need for Vue components

2. Which of the following is the correct way to return JSX inside the setup() function in Vue 3?

easy

A. return Hello;

B. return function() { Hello };

C. return () => (Hello);

D. return { template: 'Hello' };

Solution

1. Step 1: Recall Vue 3 setup JSX syntax

   In Vue 3, setup() returns a render function, usually an arrow function returning JSX wrapped in parentheses.

2. Step 2: Evaluate options

   return () => (
   Hello); correctly returns an arrow function with JSX. return

   Hello

   ; returns JSX directly (invalid). return function() {

   Hello

   }; returns a function but misses return statement. return { template: '

   Hello

   ' }; uses template string, not JSX.

3. Final Answer:

   return () => (<div>Hello</div>); -> Option C

4. Quick Check:

   setup returns arrow function with JSX [OK]

Hint: Always return an arrow function wrapping JSX in setup() [OK]

Common Mistakes:

• Returning JSX directly without a function
• Using function without return statement
• Confusing JSX with template strings

3. What will be the rendered output of this Vue JSX component?

import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const name = 'Vue';
    return () => (
      

        
Hello, {name}!
      
    );
  }
});

medium

A. Hello, Vue!

B. Hello, {name}!

C. Hello, !

D. SyntaxError due to JSX expression

Solution

1. Step 1: Understand JSX expression interpolation

   In JSX, curly braces insert JavaScript expressions. Here, {name} inserts the string 'Vue'.

2. Step 2: Predict rendered HTML

   The component renders a div with an h1 containing 'Hello, Vue!'. No syntax errors occur.

3. Final Answer:

   <div><h1>Hello, Vue!</h1></div> -> Option A

4. Quick Check:

   JSX {name} inserts variable value [OK]

Hint: JSX curly braces insert JavaScript values directly [OK]

Common Mistakes:

• Thinking JSX shows variable name literally
• Expecting empty output if variable used
• Assuming JSX causes syntax errors without Babel

4. Identify the error in this Vue JSX component code:

import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const count = 0;
    return () => {
      {count}
    };
  }
});

medium

A. count variable should be reactive

B. JSX cannot be used inside setup()

C. setup() should not return a function

D. Missing parentheses around JSX in return function

Solution

1. Step 1: Check JSX return syntax in arrow function

   The arrow function uses curly braces but does not return JSX explicitly or wrap JSX in parentheses, causing no output.

2. Step 2: Correct syntax for returning JSX

   JSX must be wrapped in parentheses and returned explicitly, e.g., () => ( <button>{count}</button> ).

3. Final Answer:

   Missing parentheses around JSX in return function -> Option D

4. Quick Check:

   JSX must be wrapped in parentheses and returned [OK]

Hint: Wrap JSX in parentheses when returning from arrow function [OK]

Common Mistakes:

• Forgetting to return JSX explicitly
• Not wrapping JSX in parentheses
• Thinking reactive is required for static display

5. You want to create a Vue JSX component that renders a list of items passed as a prop. Which is the correct way to map the items array to JSX elements inside setup()?

hard

A. return () => ({props.items.forEach(item => {item})});

B. return () => ({props.items.map(item => {item})});

C. return () => ({for (const item of props.items) {item}});

D. return () => ({props.items.map(item => '' + item + '')});

Solution

1. Step 1: Understand how to render lists in JSX

   JSX uses JavaScript expressions. map() returns an array of JSX elements, perfect for rendering lists.

2. Step 2: Evaluate each option

   return () => (
   {props.items.map(item =>
   • {item}
   )}
   ); correctly uses map() to return
3. elements. return () => (
   {props.items.forEach(item =>
   • {item}
   )}
   ); uses forEach which returns undefined. return () => (
   {for (const item of props.items)
   • {item}
   }
   ); uses invalid syntax inside JSX. return () => (
   {props.items.map(item => '
   • ' + item + '
   ')}
   ); returns strings, not JSX elements.

4. Final Answer:

   return () => (<ul>{props.items.map(item => <li>{item}</li>)}); -> Option B

5. Quick Check:

   Use map() to return JSX list items [OK]

Hint: Use map() to create JSX elements for lists [OK]

Common Mistakes:

• Using forEach instead of map for JSX lists
• Trying to use for loops inside JSX expressions
• Returning strings instead of JSX elements