react-application.js

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}


import React from 'react';

export default function Home() {
  return (
    <div>
      <h1>Welcome to My React Page!</h1>
      <p>This is a simple React component.</p>
	<ShoppingList>  </ShoppingList>
    </div>
  );
}