esri-react-router-example

This example application has been archived because it is very out of date. See https://github.com/tomwayson/create-arcgis-app/ for a more complete and modern implementation using recent versions of Create React App and React Router as well as ArcGIS REST JS.

Example of how to use esri-loader-react and esri-loader to load the ArcGIS API for JavaScript in a react-router application.

View it live

How it works

The ArcGIS API is not needed until the user navigates to the /map route, but we can preload the script without blocking rendering by including esri-loader-react's <EsriLoaderContainer /> component.

Once on the map route, the <Map> component loads the esri/arcgis/util module using esri-loader's dojoRequire() and then renders a map:

// modules/Map.js
componentDidMount () {
  // get item id from route params or use default
  const itemId = this.props.params.itemId || '8e42e164d4174da09f61fe0d3f206641'
  // require the map class
  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
      })
    }, (err) => {
      this.setState({
        mapLoaded: true,
        error: err.message || err
      })
    })
  })

Why?

See the esri-loader documentation for an explanation of why you would use these techniques.

Development instructions

First you'll need Node.js and the package manager that comes with it: npm.

git clone https://github.com/tomwayson/esri-react-router-example
cd esri-react-router-example
npm install
npm start

Now open up http://localhost:8080