How to integrate this onemap-leaftlet into react.js

How to integrate the below code in react js

    <title>OneMap2 XYZ (Default)</title>
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <h1>Singapore Map</h1>
    <div id='mapdiv' style='height:800px;'></div>
    var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();
    var map ='mapdiv').setView([center.x, center.y], 12);

    var basemap = L.tileLayer('https://maps-{s}{z}/{x}/{y}.png', {
      detectRetina: true,
      maxZoom: 18,
      minZoom: 11

    map.setMaxBounds([[1.56073, 104.1147], [1.16, 103.502]]);


    function getLocation() {
      if (navigator.geolocation) {

    function showPosition(position) {           
      marker = new L.Marker([position.coords.latitude, position.coords.longitude], {bounceOnAdd: false}).addTo(map);             
      var popup = L.popup()
      .setLatLng([position.coords.latitude, position.coords.longitude]) 
      .setContent('You are here!')

@shanmuga2414 please check if leaflet supports reactjs first or reactjs supports leaflet modules.