1、React App：通过脚手架搭建项目；
2、在项目demo根目录下打开命令行窗口，然后安装@arcgis/core这个包：
npm install @arcgis/core
3、安装完成之后，我们打开项目根目录下的"package.json"文件，修改项目启动命令：
"scripts": {
"start": "npm run copy && react-scripts start",
"build": "npm run copy && react-scripts build",
"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
以上的启动命令中我们修改了默认的start和build命令，然后新增了一个copy命令，这条命令主要是将@arcgis/core这个包里面的静态资源拷贝到了项目的public目录下。
可以看到copy命令里面使用了ncp这个命令，所以我们要通过以下命令来全局安装一下这个工具：
npm install ncp -g
重新启动项目后，public目录新增arcgis静态资源
3、然后在React项目的"App.js"或者"index.js"文件中通过如下命令引入ArcGIS API for JavaScript所需的样式文件包，如下：
import ‘@arcgis/core/assets/esri/themes/light/main.css‘;
4、最后在组件代码文件顶部位置引入所需要的API模块，此处我们仅仅创建一张二维地图，所以代码直接写在了App.js文件里，如下所示：
import Map from ‘@arcgis/core/Map‘;
import MapView from ‘@arcgis/core/views/MapView‘;
5、写一个生命周期函数，然后在函数里面编写实例化二维地图的代码，
import { Component } from "react"
import logo from ‘./logo.svg‘;
import ‘./App.css‘;
import Map from ‘@arcgis/core/Map‘;
import MapView from ‘@arcgis/core/views/MapView‘;
class ArcGIS extends Component {
constructor(props) {
super(props)
}
// 生命周期函数，然后在函数里面编写实例化二维地图的代码
componentDidMount = () => {
this.initMap();
}
initMap = () => {
const map = new Map({
basemap: "osm",
});
const view = new MapView({
container: "mapView",
map,
zoom: 13,
center: [118.75069,31.94153]
})
}
render() {
return (
<div id="mapView"></div>
)
}
}
export default ArcGIS;
css 高度依次设置为100%即可
作者：X北辰北
https://www.bilibili.com/read/cv8965701
出处： bilibili