Why Remix embraces web standards - See It in Action

Why Remix Embraces Web Standards

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Building accessible and standards-compliant web apps that work well for all users, including those with disabilities.

💼 Career

Understanding web standards and accessibility is essential for frontend developers working with Remix or any modern web framework.

1

DATA SETUP: Create the fruits array

Create a constant array called fruits with these exact string values: "Apple", "Banana", "Cherry".

Remix

// Your code here

Hint

Use const fruits = ["Apple", "Banana", "Cherry"] to create the array.

2

CONFIGURATION: Add an accessibility label

Create a constant called listAriaLabel and set it to the string "List of favorite fruits".

Remix

const fruits = ["Apple", "Banana", "Cherry"]
// Your code here

Hint

Use const listAriaLabel = "List of favorite fruits" to add the label.

3

CORE LOGIC: Render the fruits list using JSX

Create a React functional component called FruitList that returns a <ul> element with the aria-label attribute set to listAriaLabel. Inside the <ul>, use fruits.map with fruit as the iterator to render each fruit inside a <li> element with a key equal to fruit.

Remix

const fruits = ["Apple", "Banana", "Cherry"]
const listAriaLabel = "List of favorite fruits"

// Your code here

Hint

Use fruits.map(fruit => <li key={fruit}>{fruit}</li>) inside the <ul>.

4

COMPLETION: Use semantic HTML and export the component

Ensure the component FruitList uses semantic HTML with a <ul> and <li> elements, includes the aria-label attribute on the <ul>, and is exported using export function FruitList().

Remix

const fruits = ["Apple", "Banana", "Cherry"]
const listAriaLabel = "List of favorite fruits"

export function FruitList() {
  return (
    
      {fruits.map(fruit => (
        {fruit}
      ))}
    
  )
}

// Your code here if needed

Hint

Check that the component is exported and uses semantic HTML with accessibility.