WikiLayersで使っているパッケージやライブラリを自分のために覚書しておきます。

create-react-app v1.4.3

Create React apps with no build configuration.

https://github.com/facebook/create-react-app

手っ取り早くReactを試してみるのに最適なボイラープレートです。

React v16.2.0

A JavaScript library for building user interfaces.

https://reactjs.org/

UIを構築するためのJavaScriptライブラリです。

Redux v3.7.2

Redux is a predictable state container for JavaScript apps.

https://redux.js.org/

JavaScriptアプリのState(状態)を管理するライブラリです。

React-Redux v5.0.6

Official React bindings for Redux.
Performant and flexible.

https://github.com/reactjs/react-redux

ReduxをReactと組み合わせてくれるパッケージです。

Material-UI v0.20.0

React components that implement Google’s Material Design

http://www.material-ui.com/

GoogleのマテリアルデザインをReactのComponentとして使えるパッケージです。

OpenLayers v4.6.4

A high-performance, feature-packed library for all your mapping needs.

http://openlayers.org/

地図ライブラリです。最初はLeafletを使うつもりでしたが、LeafletはWebpack方面での使い勝手が良くないようなので使い慣れてるOpenLayersにしました。

prop-types v15.6.0

Runtime type checking for React props and similar objects.

https://www.npmjs.com/package/prop-types

Componentのpropsの入力値が正しい型なのかチェックしてくれるパッケージです。
不要説もあるようですが一応導入しました。

redux-thunk v2.2.0

Thunk middleware for Redux.

非同期処理のミドルウェアらしいです。Reduxのチュートリアルに載っていたので、導入しているのですが、正直この辺は勉強不足でどう作用しているのか実感できていません。

https://github.com/gaearon/redux-thunk

redux-logger v3.0.6

Logger for Redux

https://github.com/evgenyrodionov/redux-logger

ReduxのState(状態)のログを取ってくれるパッケージです。ミドルウェアとして使います。

参考: redux-loggerをproduction環境だけ無効にする
https://medium.com/@rukurx/redux-logger%E3%82%92production%E7%92%B0%E5%A2%83%E3%81%A0%E3%81%91%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B-103579be834e

広告

react-router-dom v4.2.2

DOM bindings for React Router

https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom

Reactでルーティングを行うライブラリです。

react-router-redux v5.0.0-alpha.9

Integration with React Router and Redux

https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

react-routerのv4に対応しているのはα版のv5なので、v5を入れています。

redux-persist v5.5.0

Persist and rehydrate a redux store.

https://github.com/rt2zz/redux-persist

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.

https://github.com/react-ga/react-ga

ReactでGoogleアナリティクスを使用するのに有効なパッケージです。

gh-pages v1.1.0

Publish files to a gh-pages branch on GitHub (or any other branch anywhere else).

https://www.npmjs.com/package/gh-pages

create-react-appで作ったアプリをGithubPagesにデプロイするパッケージです。 以下の記事を参考に導入しました。

参考: create-react-appを使ってReactコンポーネントの素振り、GitHub Pagesへのデプロイまで
https://blog.wadackel.me/2016/create-react-app/

react-redux-i18n v1.9.1

A binding library for redux to react-i18nify

https://github.com/artisavotins/react-redux-i18n

React-Reduxで作成したアプリをi18n(internationalization=国際化)するライブラリです。

WikiLayers
https://cieloazul310.github.io/wikilayers

広告