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.
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
})
})
})See the esri-loader documentation for an explanation of why you would use these techniques.
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 startNow open up http://localhost:8080