Merge pull request #7 from gis-tools/develop

Develop
gis-tools · Dec 9, 2017 · d61b8b2 · d61b8b2
2 parents 782bdad + 018bb6a
commit d61b8b2
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 144 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Goal of Create ESRI React App is to connect ESRI and React application with mini
 A prerequisite for this application is Create React App already installed in your development environment. If Create React App is not installed on your system run: 
 
 ```
-npm install -g create-react-app
+npm install create-react-app -g
 ```  
 
 
@@ -50,7 +50,7 @@ You can specify version of ESRI ArcGIS JS api during creation process. If you do
 ```
 $ create-esri-react-app esri_app_v4
 - or -
-$ create-esri-react-app esri_app_v3 -v 3
+$ create-esri-react-app esri_app_v3 -a 3
 ```
 
 ### Information's related to Create React App

diff --git a/build/index.js b/build/index.js
@@ -7,17 +7,19 @@ var fs = require('fs');
 var path = require('path');
 var program = require('commander');
 
+var colorGreen = '\x1b[32m';
+var colorReset = '\x1b[0m';
+
 var bootstrapAppJs3 = __dirname + '/resources/App3.js';
-var bootstrapAppJs4 = __dirname + '/resources/App4.js';
-var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html';
-var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html';
 var bootstrapAppCss3 = __dirname + '/resources/App3.css';
+
+var bootstrapAppJs4 = __dirname + '/resources/App4.js';
 var bootstrapAppCss4 = __dirname + '/resources/App4.css';
-var colorGreen = '\x1b[32m';
-var colorReset = '\x1b[0m';
+
+var bootstrapAppHtml = __dirname + '/resources/index.html';
+
 var currentWorkingDirectory = path.resolve('./');
 var bootstrapAppJs;
-var bootstrapAppHtml;
 var bootstrapAppCss;
 
 program.version('0.1.0').option('-a, --api [number]', 'Add API version ' + colorGreen + '-v 3' + colorReset + ' or ' + colorGreen + '-v 4' + colorReset + '. Default version of ESRI API is v4', 4).parse(process.argv);
@@ -27,11 +29,9 @@ var appName = program.args[0];
 
 if (program.api === '3') {
   bootstrapAppJs = bootstrapAppJs3;
-  bootstrapAppHtml = bootstrapAppHtml3;
   bootstrapAppCss = bootstrapAppCss3;
 } else {
   bootstrapAppJs = bootstrapAppJs4;
-  bootstrapAppHtml = bootstrapAppHtml4;
   bootstrapAppCss = bootstrapAppCss4;
 }
 
@@ -96,7 +96,7 @@ if (process.argv.length <= 2) {
   console.log('    - ESRI api v%s', program.api);
   var createEsriApp = 'create-react-app ' + appName;
   exec(createEsriApp, function (error, stdout, stderr) {
-    var addModule = 'cd ' + appName + ' && npm install esri-loader';
+    var addModule = 'cd ' + appName + ' && npm install esri-loader --save';
     exec(addModule, function (error, stdout, stderr) {
       console.log('');
       console.log('Success! ESRI React App ' + colorGreen + appName + colorReset + ' is created at ' + colorGreen + currentWorkingDirectory + colorReset + ' ');

diff --git a/build/resources/App3.js b/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;
diff --git a/build/resources/App4.js b/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;
diff --git a/build/resources/index-api-4.html b/build/resources/index-api-4.html
diff --git a/build/resources/index-api-3.html → build/resources/index.html b/build/resources/index-api-3.html → build/resources/index.html
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-esri-react-app",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "description": "Creating ESRI applications with React included",
   "main": "./src/index.js",
   "bin": {

diff --git a/src/index.js b/src/index.js
@@ -6,17 +6,19 @@ var fs = require('fs');
 var path = require('path');
 var program = require('commander');
 
+var colorGreen = '\x1b[32m';
+var colorReset = '\x1b[0m';
+
 var bootstrapAppJs3 = __dirname + '/resources/App3.js';
-var bootstrapAppJs4 = __dirname + '/resources/App4.js';
-var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html';
-var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html';
 var bootstrapAppCss3 = __dirname + '/resources/App3.css';
+
+var bootstrapAppJs4 = __dirname + '/resources/App4.js';
 var bootstrapAppCss4 = __dirname + '/resources/App4.css';
-var colorGreen = '\x1b[32m';
-var colorReset = '\x1b[0m';
+
+var bootstrapAppHtml = __dirname + '/resources/index.html';
+
 var currentWorkingDirectory = path.resolve('./');
 var bootstrapAppJs;
-var bootstrapAppHtml;
 var bootstrapAppCss;
 
 program
@@ -29,11 +31,9 @@ var appName = program.args[0];
 
 if (program.api === '3') {
   bootstrapAppJs = bootstrapAppJs3;
-  bootstrapAppHtml = bootstrapAppHtml3;
   bootstrapAppCss = bootstrapAppCss3;
 } else {
   bootstrapAppJs = bootstrapAppJs4;
-  bootstrapAppHtml = bootstrapAppHtml4;
   bootstrapAppCss = bootstrapAppCss4;
 }
 
@@ -98,7 +98,7 @@ if (process.argv.length <= 2) {
   console.log('    - ESRI api v%s', program.api);
   var createEsriApp = 'create-react-app ' + appName;
   exec(createEsriApp, function (error, stdout, stderr) {
-    var addModule = 'cd ' + appName + ' && npm install esri-loader';
+    var addModule = 'cd ' + appName + ' && npm install esri-loader --save';
     exec(addModule, function (error, stdout, stderr) {
       console.log('');
       console.log('Success! ESRI React App ' + colorGreen + appName + colorReset + ' is created at ' + colorGreen + currentWorkingDirectory + colorReset + ' ');