To render a basic Leaflet map in your React application, you first need to import the Leaflet library and set up a dedicated container for the map within your React component. Begin by ensuring that Leaflet is installed in your project. You can add Leaflet via npm or yarn. Once installed, import the necessary Leaflet assets at the top of your React component file. Typically, you will use the useEffect hook to initialize the map after the component has mounted, ensuring that the map is only created once the DOM element is available.

Within your component, create a div element that will serve as the map container. Assign it a unique id or use a ref for targeting. The Leaflet map instance will be attached to this container. In your useEffect block, create a new map instance by passing the container reference and desired map options, such as center coordinates and zoom level. Make sure to clean up the map instance when the component unmounts to prevent memory leaks.

A critical aspect of displaying a Leaflet map correctly in React is ensuring that the required CSS is included and properly configured. Leaflet relies on its own CSS for visual elements such as tiles, controls, and attribution. If this CSS is not imported, the map may not display correctly, or it could appear blank. Import the Leaflet CSS in your main application entry point or within your component file. Additionally, set explicit height and width styles on the map container, either via a CSS file or inline styles. Without a defined size, the map will not be visible, as the container will collapse to zero height.