How to use Esri Arcgis Maps in React-Redux Project?

Question

I'm trying to use Esri map. To include map in my project , I'm confused how to import esri into project? what are the dependencies ?

I have written a sample code . But it is not working and the map is not loading

 import * as esriLoader from 'esri-loader'
 import React from 'react'
 class esriMap extends React.Component {

constructor(props) {
    super(props); 
    this._createMap = this._createMap.bind(this)
}
componentDidMount() {
    if (!esriLoader.isLoaded()) {
        // lazy load the arcgis api
        const options = {
            // use a specific version instead of latest 4.x
            url: '//js.arcgis.com/3.18compact/'
        }
        esriLoader.loadScript((err) => {
            if (err) {
                console.error(err)
            }
            // now that the arcgis api has loaded, we can create the map
            this._createMap()
        }, options)
    } else {
        // arcgis api is already loaded, just create the map
        this._createMap()
    }
}

_createMap() {
    // get item id from route params or use default
    const itemId = 'f2ea5d874dad427294641d2d45097c0e' 
        // require the map class
    esriLoader.dojoRequire(['esri/arcgis/utils'], (arcgisUtils) => {
        // create a map at a DOM node in this component
        arcgisUtils.createMap(itemId, this.refs.map)
            .then((response) => {
                // hide the loading indicator
                // and show the map title
                // NOTE: this will trigger a rerender
                this.setState({
                    mapLoaded: true,
                    item: response.itemInfo.item
                })
            })
    })
}

render() {
    return (<div ref = "map" style={{height: 'calc(100% - 66px)'}}></div>)
}
}

export default esriMap;

Answer 1

import React, {
  Component
} from 'react'
import * as esriLoader from 'esri-loader'
require('./contentMap.css')

export default class ContentMap extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-37.82, 2.28]
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-34.82, -1.36]
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-34.31, 0.67]
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-40.19, -0.10]
            }
        }]
      }
    };
  }


  componentDidMount() {
      esriLoader.loadModules(["esri/Map", "esri/views/SceneView", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/geometry/Point" , "esri/layers/FeatureLayer"])
      .then(([Map, MapView, GraphicsLayer, Graphic, Point , FeatureLayer]) => {
          var map = new Map({
            basemap: "topo",
          });
          var view = new MapView({
            map: map,
            container: "viewDiv",
            center: [37.82, -2.28],
            zoom: 12,

          });

          var graphicsLayer = new GraphicsLayer();
          map.add(graphicsLayer);


          var markerSymbol = {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            color: [255, 0, 0],
            outline: { // autocasts as new SimpleLineSymbol()
              color: [255, 255, 255],
              width: 2
            }
          };

          this.state.data.features.forEach(function(feature) {
              var pt = new Point(feature.geometry.coordinates, map.spatialReference);
              graphicsLayer.add(new Graphic(pt, markerSymbol));
          })
          })

          .catch(err => {
            // handle any errors
            console.error(err);
          });
        }

    render() {
      return (<div id = 'viewDiv' style = {{height: '700px'}}></div>)

    }
  }