2018年02月06日
WikiLayersで使っているパッケージやライブラリ
WikiLayers で使っているパッケージやライブラリを自分のために覚書しておきます。
Create React App v1.4.3
Create React apps with no build configuration.
手っ取り早くReactを試してみるのに最適なボイラープレートです。
React v16.2.0
A JavaScript library for building user interfaces.
UIを構築するためのJavaScriptライブラリです。
Redux v3.7.2
Redux is a predictable state container for JavaScript apps.
JavaScriptアプリのState(状態)を管理するライブラリです。
React Redux v5.0.6
Official React bindings for Redux.
Performant and flexible.
ReduxをReactと組み合わせてくれるパッケージです。
Material-UI v0.20.0
React components that implement Google’s Material Design
Googleの マテリアルデザイン をReactのComponentとして使えるパッケージです。
OpenLayers v4.6.4
A high-performance, feature-packed library for all your mapping needs.
地図ライブラリです。最初はLeafletを使うつもりでしたが、LeafletはWebpack方面での使い勝手が良くないようなので使い慣れてるOpenLayersにしました。
prop-types v15.6.0
Runtime type checking for React props and similar objects.
Componentのpropsの入力値が正しい型なのかチェックしてくれるパッケージです。
不要説もあるようですが一応導入しました。
Redux Thunk v2.2.0
Thunk middleware for Redux.
非同期処理のミドルウェアらしいです。Reduxのチュートリアルに載っていたので、導入しているのですが、正直この辺は勉強不足でどう作用しているのか実感できていません。
Logger for Redux v3.0.6
Logger for Redux
ReduxのState(状態)のログを取ってくれるパッケージです。ミドルウェアとして使います。
react-router-dom v4.2.2
DOM bindings for React Router
Reactでルーティングを行うライブラリです。
react-router-redux v5.0.0-alpha.9
Integration with React Router and Redux
react-routerのv4に対応しているのはα版のv5なので、v5を入れています。
redux-persist v5.5.0
Persist and rehydrate a redux store.
ReduxのState(状態)をローカルストレージに保存するパッケージです。
これを使うことによって、ユーザーがページを離れてもReduxのStateを維持することができます。
SPA github pages
Host single page apps with GitHub Pages
https://github.com/rafrex/spa-github-pages
GithubPagesは通常シングル・ページ・アプリケーションに対応していないので、例えば https://cieloazul310.github.io/wikilayers/map のようなルートに何も設定せずに直接アクセスすると404を返してしまいます。
これを防ぐために/public
ディレクトリに404ページを作成し、index.html
にリダイレクトさせる方法をとります。
react-ga v2.4.1
This is a JavaScript module that can be used to include Google Analytics tracking code in a website or app that uses React for its front-end codebase.
ReactでGoogleアナリティクスを使用するのに有効なパッケージです。
gh-pages v1.1.0
Publish files to a gh-pages branch on GitHub (or any other branch anywhere else).
create-react-appで作ったアプリをGithubPagesにデプロイするパッケージです。 以下の記事を参考に導入しました。
react-redux-i18n v1.9.1
A binding library for redux to react-i18nify
React-Reduxで作成したアプリをi18n(internationalization=国際化)するライブラリです。
Every Single Child / Luminous Orange (2007)
WikiLayers
Wikipediaから座標を取得し、地図で表示するWebアプリケーション
https://cieloazul310.github.io/wikilayers/