Using React to create Maps with AmMaps - reactjs

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>