Updating code for v4 of ESRI ArcGIS API

Author: Bojan Zivkovic

build/resources/App4.css

@@ -0,0 +1,28 @@
+@import "https://js.arcgis.com/4.5/esri/css/main.css";
+
+html, body, #root, .App {
+  height: 100%;
+  width: 100%;
+  background-color: #cfcfd4;
+}
+
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color: #222;
+  height: 80px;
+  padding: 20px;
+  color: white;
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 0.25em;
+}
+
+/* Map view */
+#mapContainer {
+  height: calc(100% - 80px);
+}

build/resources/App4.js

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

build/resources/index-api-4.html

@@ -4,7 +4,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
   <meta name="author" content="Bojan Zivkovic">
-  <link rel="preload stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
   <!--
     manifest.json provides metadata used when your web app is added to the
     homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/