Optimizing App.js for API v3 and v4

Author: Bojan Zivkovic

build/resources/App3.js

@@ -1,46 +1,35 @@
 import React, {Component} from 'react';
+import esriLoader from 'esri-loader';
 import './App.css';
-import * as esriLoader from 'esri-loader';
 
-class App extends Component {
+const options = {
+  url: `https://js.arcgis.com/3.22/`
+};
+
+export default class App extends Component {
   constructor() {
     super();
 
-    if (!esriLoader.isLoaded()) {
-      esriLoader.bootstrap((err) => {
-        if (err) {
-          console.error(err);
-        } else {
-          this.createMap();
-        }
-      }, {
-        url: 'https://js.arcgis.com/3.22/' // Here you can change API version
-      });
-    } else {
-      this.createMap();
-    }
-
-    this.state = {
-      map: null
-    }
-  }
-
-  createMap = () => {
-    esriLoader.dojoRequire([
+    esriLoader.loadModules([
       'esri/map'
-    ], (Map) => {
-      let map = new Map('mapContainer', {
-        center: [-100, 30],
-        zoom: 3,
-        basemap: 'gray-vector'
-      });
-      window.map = map;
+    ], options)
+        .then(([Map]) => {
+          let map = new Map('mapContainer', {
+            basemap: 'gray-vector',
+            center: [-100, 30],
+            zoom: 3
+          });
 
-      this.setState({
-        map
-      })
-    });
-  };
+          window.map = map;
+
+          this.setState({
+            map
+          })
+        })
+        .catch(err => {
+          console.error(err);
+        });
+  }
 
   render() {
     return (
@@ -53,5 +42,3 @@ class App extends Component {
     );
   }
 }
-
-export default App;

build/resources/App4.js

@@ -1,65 +1,50 @@
 import React, {Component} from 'react';
-import * as esriLoader from 'esri-loader';
+import esriLoader from 'esri-loader';
 import './App.css';
 
-class App extends Component {
+const options = {
+  url: 'https://js.arcgis.com/4.5'
+};
+
+export default class App extends Component {
   constructor() {
     super();
 
-    if (!esriLoader.isLoaded()) {
-      esriLoader.bootstrap((err) => {
-        if (err) {
-          console.error(err);
-        } else {
-          this.createMap();
-        }
-      }, {
-        // url: 'https://js.arcgis.com/4.4/' // Here you can change API version
-      });
-    } else {
-      this.createMap();
-    }
-
-    this.state = {
-      map: null,
-      view: null
-    }
-  }
+    esriLoader.loadModules([
+      'esri/Map',
+      'esri/views/MapView'
+    ], options)
+        .then(([Map, MapView]) => {
+          let map = new Map({
+            basemap: "gray-vector"
+          });
 
-  createMap = () => {
-    esriLoader.dojoRequire([
-      "esri/Map",
-      "esri/views/MapView"
-    ], (Map, MapView) => {
-      let map = new Map({
-        basemap: "gray-vector"
-      });
-      window.map = map;
-      let view = new MapView({
-        map: map,
-        container: "mapContainer",
-        basemap: 'gray-vector',
-        center: [-100, 30],
-        zoom: 3
-      });
+          let view = new MapView({
+            map: map,
+            container: "mapContainer",
+            basemap: 'gray-vector',
+            center: [-100, 30],
+            zoom: 5
+          });
 
-      this.setState({
-        map,
-        view
-      })
-    });
-  };
+          this.setState({
+            map,
+            view
+          })
+        })
+        .catch(err => {
+          console.error(err);
+        });
+  }
 
   render() {
     return (
         <div className="App">
           <div className="App-header">
             <h1>Welcome to ESRI React App</h1>
           </div>
-          <div id="mapContainer" />
+          <div id="mapContainer"/>
         </div>
     );
   }
 }
-
-export default App;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-esri-react-app",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Creating ESRI applications with React included",
   "main": "./src/index.js",
   "bin": {