W3Schools Tryit Editor

main.jsx

index.html

cars.jsx

import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Cars from './Cars';
// Click the "cars.jsx" tab to see the content of the "Cars.jsx" file

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Cars />
      </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 MyCars() {
  const cars = ['Volvo', 'BMW', 'Ford'];
  return (
    <>
      <h2>My Favorite Cars</h2>          
      <ul>
        {cars.map((car, index) => (
          <li key={index}>{car}</li>
        ))}
      </ul>
    </>
  );
}

export default MyCars;