Can we convert the following code to reactjs. please help 
Published: 2020-09-03 07:11:59


<!DOCTYPE html>
<html>
<head>
    <title>maptalks.GridLayer demo</title>
    <meta charset="utf-8" />
    <script src="./Map/maptalks.min.js"></script>
    <script src="./Map/maptalks.gridlayer.js"></script>
    <link type="text/css" rel="stylesheet" href="./Map/maptalks.css">
      
    <style>
        #map { width: 1350px; height: 600px; }
    </style>
</head>
<body>
<div id="map"></div>
<script>


    var map = new maptalks.Map("map",{
        center:  [91.89165, 25.5894],
        zoom: 7,
        
        attributionControl : {
            'content' : '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        },
        baseLayer : new maptalks.TileLayer("tile",{
            urlTemplate: 'http://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
            subdomains  : ['a','b','c','d'],
        })
    });

    maptalks.Ajax.get('t.txt', function (err, data) {

        if (err || !data) {

            throw new Error('error when loading midcapse_12h_1km.txt');
                
        }


        var gridData = readData(data);

        // map.setCenter(gridData.center);
        var grid = new maptalks.GridLayer('grid', gridData, {
            symbol : {
                'lineWidth' : 0
            }
        }).addTo(map);
    });

    function readData(content) {
        const data = [];
        // grid's southwest and northeast
        var sw, ne,
            // grid width and grid height
            width, height,
            center,
            cols, rows,
            centerCol = 0,
            centerRow = 0;
        var line = 0;
        var dataRows = 0, dataLineCnt = 0;
        var dataLine = '';
        var currentLine = '';
        var cols;
                  for (var i = 0, l = content.length; i < l; i++) {
            var chr = content.charAt(i);

            if (line < 2) {
                currentLine += chr;

            }
            if (chr === '\n') {
                if (line === 1) {
                    var descripts = currentLine.split(' ');
                    width = +(descripts[6]);

                    height = +(descripts[7]);

                   
                    sw = new maptalks.Coordinate(descripts[8], descripts[10]);
                    ne = new maptalks.Coordinate(descripts[9], descripts[11]);
                    cols = +(descripts[12]),

                    rows = +(descripts[13]),

                    center = sw.add(ne)._multi(1 / 2);
                   
                    centerCol = Math.floor((center.x - sw.x) / width);

                    centerRow = Math.floor((center.y - sw.y) / height);

                }
                if (line < 2) {
                    currentLine = '';
                }
                line++;
            } else if (line === 2) {
                dataLine += chr;
                if (chr === ' ') {
                    dataRows++;
                }
                if (dataRows === cols) {
                    var cells = dataLine.split(' ');
                    for (var ii = 0; ii < cells.length; ii++) {
                        var value = +cells[ii];
                        if (value !== 0) {
                            data.push([
                                ii - centerCol,
                                dataLineCnt - centerRow,
                                {
                                    symbol : {
                                        'polygonFill' : gridValue2FillColor(value),
                                        'polygonOpacity' : 0.7,
                                        'lineWidth' : 0,
                                        'lineColor' : '#bbb',
                                        'lineOpacity' : 0
                                        // 'textName' : '{value}',
                                        // 'textSize' : { stops: [[14, 0], [18, 48]] }
                                    },
                                    properties : {
                                        value : value.toFixed(1)
                                    }
                                }
                            ]);
                        }
                    }
                    dataLine = '';
                    dataRows = 0;
                    dataLineCnt++;
                }

            }
        }
        return {
            unit : 'degree',
            center : center,
            width :  width,
            height : height,
            cols      : [centerCol - cols, cols - centerCol],
            rows      : [centerRow - rows, rows - centerRow],
            data : data
        };
    }

    function gridValue2FillColor(value) {
         

  if (value < 0.0 ) {
            return "#FFFF00";
        } else if (value < 0.1 ) {
            return "#FF0000";
        } else if (value < 40 ) {
             return "#A52A2A";
        }
        }

</script>
</body>
</html>