水戸地図(β)

2018年02月06日

WikiLayersで使っているパッケージやライブラリ

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

WikiLayers
cieloazul310.github.io

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ライブラリです。

React
react.dev

Redux v3.7.2

Redux is a predictable state container for JavaScript apps.

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

Redux
redux.js.org

React Redux v5.0.6

Official React bindings for Redux.
Performant and flexible.

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

React Redux
github.com

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にしました。

OpenLayers
openlayers.org

prop-types v15.6.0

Runtime type checking for React props and similar objects.

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

prop-types
github.com

Redux Thunk v2.2.0

Thunk middleware for Redux.

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

Redux Thunk
github.com

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
github.com

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を維持することができます。

Redux Persist
github.com

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アナリティクスを使用するのに有効なパッケージです。

react-ga
github.com

gh-pages v1.1.0

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

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

gh-pages
www.npmjs.com

react-redux-i18n v1.9.1

A binding library for redux to react-i18nify

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

WikiLayers
cieloazul310.github.io

Every Single Child / Luminous Orange (2007)

広告

2018年02月06日

WikiLayersで使っているパッケージやライブラリ

制作物

Top

水戸地図(β)