Using React to create Maps with AmMaps

Question

I am using ReactJs to create USA Map with AmCharts library. What I want exactly is this: https://www.amcharts.com/demos/us-heat-map/. When you check it's code on fiddle, you will note they have used a separate library for the US map in the script tag.

I checked the amcharts documentation with react here https://github.com/amcharts/amcharts3-react but couldn't find it much helpful. How can I implement this Map or any other county map using React? Am I supposed to include the library of the USA in my index.html file? I tried this approach, but I see an empty screen without any errors. Check my code below:

import React, {Component} from 'react';
import AmCharts from "@amcharts/amcharts3-react";

export default class Map extends Component {
    render(){
    return(
    <div>
    <AmCharts.React style={{width: "100%",height: "500px"}}
        options={{
          "type": "serial",
          "theme": "light",
          "dataProvider": {
            "map": "usaLow",
            "areas": [ {
              "id": "US-AL",
              "value": 4447100
            }, {
              "id": "US-AK",
              "value": 626932
            }, {
              "id": "US-AZ",
              "value": 5130632
            }, {
              "id": "US-AR",
              "value": 2673400
            }, {
              "id": "US-CA",
              "value": 33871648
            }, {
              "id": "US-CO",
              "value": 4301261
            }, {
              "id": "US-CT",
              "value": 3405565
            }, {
              "id": "US-DE",
              "value": 783600
            }, {
              "id": "US-FL",
              "value": 15982378
            }, {
              "id": "US-GA",
              "value": 8186453
            }, {
              "id": "US-HI",
              "value": 1211537
            }, {
              "id": "US-ID",
              "value": 1293953
            }, {
              "id": "US-IL",
              "value": 12419293
            }, {
              "id": "US-IN",
              "value": 6080485
            }, {
              "id": "US-IA",
              "value": 2926324
            }, {
              "id": "US-KS",
              "value": 2688418
            }, {
              "id": "US-KY",
              "value": 4041769
            }, {
              "id": "US-LA",
              "value": 4468976
            }, {
              "id": "US-ME",
              "value": 1274923
            }, {
              "id": "US-MD",
              "value": 5296486
            }, {
              "id": "US-MA",
              "value": 6349097
            }, {
              "id": "US-MI",
              "value": 9938444
            }, {
              "id": "US-MN",
              "value": 4919479
            }, {
              "id": "US-MS",
              "value": 2844658
            }, {
              "id": "US-MO",
              "value": 5595211
            }, {
              "id": "US-MT",
              "value": 902195
            }, {
              "id": "US-NE",
              "value": 1711263
            }, {
              "id": "US-NV",
              "value": 1998257
            }, {
              "id": "US-NH",
              "value": 1235786
            }, {
              "id": "US-NJ",
              "value": 8414350
            }, {
              "id": "US-NM",
              "value": 1819046
            }, {
              "id": "US-NY",
              "value": 18976457
            }, {
              "id": "US-NC",
              "value": 8049313
            }, {
              "id": "US-ND",
              "value": 642200
            }, {
              "id": "US-OH",
              "value": 11353140
            }, {
              "id": "US-OK",
              "value": 3450654
            }, {
              "id": "US-OR",
              "value": 3421399
            }, {
              "id": "US-PA",
              "value": 12281054
            }, {
              "id": "US-RI",
              "value": 1048319
            }, {
              "id": "US-SC",
              "value": 4012012
            }, {
              "id": "US-SD",
              "value": 754844
            }, {
              "id": "US-TN",
              "value": 5689283
            }, {
              "id": "US-TX",
              "value": 20851820
            }, {
              "id": "US-UT",
              "value": 2233169
            }, {
              "id": "US-VT",
              "value": 608827
            }, {
              "id": "US-VA",
              "value": 7078515
            }, {
              "id": "US-WA",
              "value": 5894121
            }, {
              "id": "US-WV",
              "value": 1808344
            }, {
              "id": "US-WI",
              "value": 5363675
            }, {
              "id": "US-WY",
              "value": 493782
            } ]
          }
        }} />
   </div>
   );
 }
}

I added following libraries from http://jsfiddle.net/api/post/library/pure/ to my index.html file

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js">
</script>

If this is not the right way, please let me know the correct approach.

Answer 1

In a plain create-react-app just place this code in your App.js

import React, { Component } from 'react';
import AmCharts from "@amcharts/amcharts3-react";

class App extends Component {
render(){
 //config as same as yours but inside const
  const config = {
    "type": "map",
    "theme": "light",
    "colorSteps": 10,
    "dataProvider": {
        "map": "usaLow",
        "areas": [{
            "id": "US-AL",
            "value": 4447100
        },{//..all areas mentioned in question}]
    },
    "areasSettings": {
        "autoZoom": true
    },
    "valueLegend": {
        "right": 10,
        "minValue": "little",
        "maxValue": "a lot!"
    },
    "listeners": [{
        "event": "descriptionClosed",
        "method": function(ev) {
            ev.chart.selectObject();
        }
    }]
};

  return (
    <div className="App">
        <AmCharts.React style={{ width: "100%", height: "500px" }} options={config} />
    </div>);
   }
 }

its enough to include these into index.html

<link href="https://www.amcharts.com/lib/3/ammap.css" rel="stylesheet">
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>