diff --git a/README.md b/README.md index be081cd..6a94ad3 100644 --- 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 index 0d9cd56..7e540d6 100644 --- 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 index 6bd7756..2030ccf 100644 --- 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; \ No newline at end of file diff --git a/build/resources/App4.js b/build/resources/App4.js index 511b4e3..6754020 100644 --- a/build/resources/App4.js +++ b/build/resources/App4.js @@ -1,54 +1,41 @@ 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 ( @@ -56,10 +43,8 @@ class App extends Component {