JSX in Vue components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Vue component using JSX that renders a <div> with text.

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () => <[1]>Hello Vue JSX!</[1]>;
  }
});

Drag options to blanks, or click blank then click option'

Adiv

Bp

Csection

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using inline tags like when a block container is expected.

Forgetting to close the JSX tag properly.

The JSX code returns a div element with the text inside. Using div is correct here.

2fill in blank

medium

Complete the code to define a JSX render function that returns a button with a click event handler.

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const handleClick = () => alert('Clicked!');
    return () => <button on[1]={handleClick}>Click me</button>;
  }
});

Drag options to blanks, or click blank then click option'

AonClick

Bclick

CClick

Donclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' (lowercase), forming invalid 'onclick'.

Using 'onClick' or 'onclick', forming malformed attributes.

In Vue JSX, event handlers use camelCase after on, like onClick. Fill Click to form onClick={handleClick}.

3fill in blank

hard

Fix the error in the JSX code that tries to render a list of items inside a Vue component.

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const items = ['apple', 'banana', 'cherry'];
    return () => (
      <ul>
        {items.[1](item => <li key={item}>{item}</li>)}
      </ul>
    );
  }
});

Drag options to blanks, or click blank then click option'

Areduce

BforEach

Cfilter

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using forEach which returns undefined and breaks rendering.

Using filter which only selects items but does not transform.

The map method transforms each item into a JSX element. Using forEach or others won't return the new array needed for rendering.

4fill in blank

hard

Fill both blanks to create a reactive state and update it on button click in a Vue JSX component.

Vue

import { defineComponent, [1] } from 'vue';

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

Drag options to blanks, or click blank then click option'

Aref

Breactive

CuseState

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' which is for objects, not primitives.

Using React's 'useState' which is not in Vue.

Vue uses ref to create a reactive primitive value. Importing ref and calling ref(0) creates a reactive count.

5fill in blank

hard

Fill all three blanks to create a Vue JSX component that conditionally renders text based on a signal.

Vue

import { defineComponent, [1] } from 'vue';

export default defineComponent({
  setup() {
    const isVisible = [2](true);
    return () => (
      <div>
        {isVisible.value ? <p>[3]</p> : null}
      </div>
    );
  }
});

Drag options to blanks, or click blank then click option'

Aref

Breactive

CVisible!

DHidden!

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' instead of 'ref' for a boolean.

Putting raw text without quotes inside JSX.

We import and use ref to create a reactive boolean. The JSX conditionally renders the text Visible! when isVisible.value is true.

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