JSX syntax rules in React - Mini Project: Build & Apply

JSX Syntax Rules in React

📖 Scenario: You are building a simple React component that displays a greeting message and a list of your favorite fruits. You will learn how to write JSX correctly, including how to use expressions, attributes, and proper syntax.

🎯 Goal: Create a React functional component named FavoriteFruits that renders a heading and an unordered list of fruits using correct JSX syntax.

📋 What You'll Learn

Create a functional component named FavoriteFruits

Use JSX to render a <div> container

Inside the container, add a <h1> with the text 'My Favorite Fruits'

Create an array of fruits inside the component

Render the fruits as an unordered list (<ul>) with each fruit as a list item (<li>)

Use correct JSX syntax for expressions and attributes

💡 Why This Matters

🌍 Real World

React components with JSX are the building blocks of modern web apps. Knowing JSX syntax helps you create interactive and dynamic user interfaces.

💼 Career

React is widely used in web development jobs. Understanding JSX syntax rules is essential for writing clean, maintainable React code.

1

Create the React functional component and fruit array

Write a React functional component named FavoriteFruits. Inside it, create a constant array called fruits with these exact strings: 'Apple', 'Banana', 'Cherry'.

React

function FavoriteFruits() {
  // Create the fruits array here
  // Your code here
}

Need a hint?

Remember to use function FavoriteFruits() to define the component and const fruits = [...] to create the array.

2

Add JSX container and heading

Inside the FavoriteFruits component, return a JSX <div> element. Inside this <div>, add an <h1> element with the exact text My Favorite Fruits.

React

function FavoriteFruits() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  
  return (
    
      {/* Add h1 heading here */}
      {/* Your code here */}
    
  );
}

Need a hint?

Use parentheses ( ) to wrap the JSX return. The <h1> should be inside the <div>.

3

Render the fruits array as a list

Inside the returned <div>, below the <h1>, add an unordered list <ul>. Use fruits.map with parameters fruit and index to create a list item <li> for each fruit. Use the key attribute set to index on each <li>. The content of each <li> should be the fruit string.

React

function FavoriteFruits() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  
  return (
    
      My Favorite Fruits
      
        {/* Use fruits.map to create list items here */}
        {/* Your code here */}
      
    
  );
}

Need a hint?

Remember to wrap the fruits.map expression in curly braces { } inside JSX.

4

Export the component as default

Add a line at the end of the file to export the FavoriteFruits component as the default export using export default FavoriteFruits;.

React

function FavoriteFruits() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  
  return (
    
      My Favorite Fruits
      
        {fruits.map((fruit, index) => (
          {fruit}
        ))}
      
    
  );
}

// Export the component here
// Your code here

Need a hint?

Use the exact syntax export default FavoriteFruits; to export the component.