JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js?2"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
<div id="map" style="height: 300px;"></div>

JavaScript

var map = L.map('map').setView([52.0, 1.0], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

var markerLayer = L.markerClusterGroup()

var data = [];
data.push([52.0, -1.1]);
data.push([51.5, -1.4]);
data.push([51, -1.5]);
data.push([49.2, -1.3]);
data.push([52.0, -1.3]);
data.push([52.0, -2.0]);
data.push([52.0, -3.0]);
data.push([52.0, 1.0]);

for (var i = 0; i < data.length; i++) {
    alert(data[i]);
    var marker = L.marker(data[i]);
    markerLayer.addLayer(marker);
}

markerLayer.on('click', function (a) {
    console.log('marker ' + a.layer);
});

markerLayer.on('clusterclick', function (a) {
    console.log('cluster ' + a.layer.getAllChildMarkers().length);
    a.originalEvent.preventDefault();
    return false;
});

map.addLayer(markerLayer);