はじめに
今、Reactを使ってMapアプリを作ろうとしています。
どうやら、ReactにはUberが作っているReact-map-glというライブラリがあるとのことなので、それを使っています。
こちらがReact-map-glです
公式ドキュメント
この記事は、ライブラリを使ってMapのサンプルを開くところまでを備忘録的に書き込んだメモです。
基本的に、いろんな記事をそのままなぞっていったらできたので、新規性ゼロです。
流れ
今回の大まかな流れはこちらの記事通りに進めました。
[React.js]REACT-MAP-GL入門(リンク)
手順
「Reactてどんな物か」を掴む
まずは、Reactがどんな物かの感覚を掴んで行きます。
これは、公式ドキュメントがわかりやすかったです。
公式ドキュメント(リンク)
Webpackの環境を構築する
JSのモジュールハンドラであるWebpackを使っていくそうです。
環境構築はこちらを元に行いました。
Reactとwebpack2での環境構築
この時、「.babelrc」ってファイルの意味が分からなかったのでこちらで学びました。
Babelの基本的な使い方(リンク)
Mapboxのアカウントを作り、トークンを取得する
ゼンリンが作っているMapboxのトークンが必要なので、準備します。
Mapboxのサイト(リンク)
記事の手順をもとにクローンしていく。
最後にクローンしていきます。
↓の記事の後半の手順の通り進めたらできました!
[React.js]REACT-MAP-GL入門(リンク)
結果を確認
結果はこんな感じ
めちゃ綺麗!!!!