W3Schools Tryit Editor

main.jsx

index.html

fruits.jsx

import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import MyFruits from './Fruits';
//Click the "Fruits.jsx" tab to check out the Fruits.jsx file

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyFruits />
      </Suspense>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

<!doctype html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

function fetchFruitData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(['Apple', 'Banana', 'Cherry']);
    }, 2000);
  });
}

let fruitResource = {
  data: null,
  read() {
    if (this.data !== null) return this.data;
    throw fetchFruitData().then(result => this.data = result);
  }
};

function MyFruits() {
  const fruits = fruitResource.read();
  return (
    <>
      <h2>My Favorite Fruits</h2>          
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </>
  );
}

export default MyFruits;