JSX in Vue components - Mini Project: Build & Apply

JSX in Vue components

📖 Scenario: You are building a simple Vue 3 component that uses JSX syntax to render a greeting message and a list of favorite fruits. JSX lets you write HTML-like code inside JavaScript, making your component code clear and easy to read.

🎯 Goal: Create a Vue 3 component using JSX syntax that displays a greeting and a list of fruits.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Use JSX syntax inside the render function

Display a greeting message inside an <h1> tag

Render a list of fruits inside <ul> with each fruit in an <li>

Use a reactive data array for fruits

💡 Why This Matters

🌍 Real World

JSX in Vue components helps you write UI code that looks like HTML but is fully integrated with JavaScript logic, making it easier to build dynamic interfaces.

💼 Career

Many modern Vue projects use JSX or similar templating techniques. Knowing JSX in Vue helps you work on advanced Vue apps and collaborate with teams using this style.

1

Set up the fruits array

Create a reactive array called fruits with these exact values: 'Apple', 'Banana', 'Cherry' using Vue's ref function.

Vue

// Create a reactive array called fruits with 'Apple', 'Banana', 'Cherry'
// Your code here

Hint

Use import { ref } from 'vue' and then const fruits = ref([...]).

2

Add a greeting message

Create a constant called greeting and set it to the string 'Hello from JSX!'.

Vue

import { ref } from 'vue'

const fruits = ref(['Apple', 'Banana', 'Cherry'])
// Create a constant greeting with 'Hello from JSX!'
// Your code here

Hint

Just write const greeting = 'Hello from JSX!'.

3

Write the render function with JSX

Add a render function that returns JSX. It should render an <h1> with the greeting text and a <ul> with each fruit from fruits.value inside an <li>. Use fruits.value.map((fruit) => <li>{fruit}</li>).

Vue

import { ref } from 'vue'

const fruits = ref(['Apple', 'Banana', 'Cherry'])
const greeting = 'Hello from JSX!'

// Add a render function returning JSX with  and  with fruits
// Your code here

Hint

Write a render function that returns JSX with <h1> and <ul>. Use fruits.value.map to create <li> elements.

4

Export the component

Export the component as default with the render function you created. Use export default { render }.

Vue

import { ref } from 'vue'

const fruits = ref(['Apple', 'Banana', 'Cherry'])
const greeting = 'Hello from JSX!'

function render() {
  return (
    
      {greeting}
      
        {fruits.value.map(fruit => {fruit})}
      
    
  )
}

// Export the component with the render function
// Your code here

Hint

Write export default { render } to export the component.