2-3. 地球儀の表示: Viewer

[sumakokima2]

全章に続き、create-react-appとcraco-cesiumをつかってViewerを表示させることを目標にします。

ちなみに、Cracoとは、以下です。

Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app.

Get all the benefits of create-react-app and customization without using 'eject' by adding a single craco.config.js file at the root of your application and customize your eslint, babel, postcss configurations and many more.

All you have to do is create your app using create-react-app and customize the configuration with a craco.config.js file.

1. react-hot-loader系をインストール

yarn add craco-plugin-react-hot-reload react-hot-loader @hot-loader/react-dom
⚠️ @hot-loader/react-dom's version should be the same as react's.

*react hot loader とはReact Hot Loaderはファイル変更を監視して、stateを保持したままReactコンポーネントの変更をブラウザリロード無しで即座に反映する強力なロードモジュールです。 参考

2. craco.config.jsにエイリアスを追加

module.exports = {
  webpack: {
    alias: {
      "react-dom": "@hot-loader/react-dom"
    }
  },
  plugins: [
    { plugin: require("craco-plugin-react-hot-reload") },
    { plugin: require("craco-cesium")() }
  ]
};

3. src->App.jsをreact-hot-roaderを使えるように変更

export default App; を

import { hot } from "react-hot-loader/root";

// ~~~~~~~~~~~~~~~~~~~~~~~~~

export default hot(App);

地図はまだ表示されませんが、$yarn start　からの　http://localhost:3000/で不具合なく動作していることがわかります。

4. いざ！地図を表示

地図を表示させるために、App.jsにViewerを配置します。 create-react-appで自動生成された余分なファイルは消してしまってokです。

おしまい！