leaflet.App.js

import { useEffect } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

function App() {
  const mapId = 'map';

  useEffect(() => {
    const map = L.map(mapId, {
      center: [37.774929, -122.419418],
      zoom: 8,
    });

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}{r}.png', {
      attribution:
        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);
  }, []);

  return (
    <div id={mapId}></div>
  );
}

export default App;