基于上篇的介绍,虽然有比较esri-loader@arcgis/webpack-plugin,还是觉得有必要需要讲述一下“esri-loader”的开发模式,待大家体验后也会有更直观的感受。
本篇文章是配合react脚手架reate-react-app使用,无需自己配置复杂的Webpack的环境。废话不多说,直接上手。

项目搭建

  • 安装create-react-app

npm install -g create-react-app

  • 创建react应用

create-react-app是全局命令来创建react项目

  1. create-react-app xxx(你的项目名)
  2. 运行成功生成的文件目录
  3. npm start
  4. 运行成功则会打开
  • 安装esri-loader

npm i esri-loader --save

  • 代码开发

更多的详情见GIS之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

arcgis api 4.x for js 结合 react 入门开发系列"esri-loader"篇(附源码下载)的更多相关文章

  1. arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)

    你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...

  2. arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  3. arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图(附源码下载)

    基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...

  4. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. arcgis api 3.x for js 解决 textSymbol 文本换行显示(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. arcgis api 3.x for js 入门开发系列二十二地图模态层(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. leetcode_1. Two Sum

    leetcode_1. Two Sum 前言: 这段时间开始敲leetcode.我认为这并不仅仅只是为了应付笔试,面试.而是确实有着一定的意义. 尤其,你提交代码后,网站会多方面验证你的答案. 另外, ...

  2. java对象深复制、浅复制(深拷贝、浅拷贝)的理解

    先看一个例子 User user1 = new User(); user1.setId("111"); Map<String, User> map1 = new Has ...

  3. capwap学习笔记——初识capwap(一)(转)

    初识CAPWAP 2.1 CAPWAP简介 CAPWAP——Control And Provisioning of Wireless Access Points Protocol Specificat ...

  4. HTML学习之制作导航网页

    前言 今天用HTML写了一个网址导航,源代码如下: <html> <head> <title>网址导航</title> </head> &l ...

  5. Springboot2.0(Spring5.0)中个性化配置项目上的细节差异

    在一般的项目中,如果Spring Boot提供的Sping MVC不符合要求,则可以通过一个配置类(@Configuration)加上@EnableWebMvc注解来实现完全自己控制的MVC配置.但此 ...

  6. 安装mysql5.5.28的步骤 2017.6.27

    http://blog.sina.com.cn/s/blog_7cd69a6501014x7h.html

  7. Python中str()与repr()函数的区别

    在 Python 中要将某一类型的变量或者常量转换为字符串对象通常有两种方法,即str()或者 repr() . >>> a = 10 >>> type(str(a ...

  8. html总结01

    lesson01~lesson02基础 <!DOCTYPE html> <html lang="en"> <!-- ################# ...

  9. Python中的r+和a+

    问题描述 我打算更改文件user_list2中的内容, 本来的想法是加一个temp 文件. 先把user_list2的内容读取并修改后写入temp, 之后再写回来. 但是在读取内容并修改后写入temp ...

  10. Axure使用——创建折叠菜单

    1.先添加动态面板 2.往动态面板中添加矩形 3.接着先隐藏下面的矩形(也就是你要折叠起来的内容) 4.一定要注意: 5.添加动态面板的状态 6.把之前做的那个矩形全部复制到state1中 7.把之前 ...