いっきのblog

技術とか色々

React

React + GoogleAnayticsでページトラッキングする

React+ GoogleAanayticsでトラッキングをするにはライブラリがあるのでそれを使う。 github.com スター数も1000超えてるし、React + GAでなら一番人気かと思う。 インストールする際のバージョンに注意 react-gaには2.3.4において、初回のイベント以外は送信…

Reactでテーブルをソートするやり方

どうも、くずきです。 Reactでテーブルをソートしようとした際に、View自体のソートはあるんですが サーバーと連動したやつがなかったので実装してみました。 やりたいこと 上記の画像はすでに完成品だけど、 ∧と∨の部分のようなソートボタンを作る ソート中…

HighCharts(React)でグラフをHoverした際に画像を表示する

どうも、くずきです。 以前HighChartsと呼ばれる、JSでのグラフ系ライブラリでかなり人気っぽさそうなやつを使った。 綺麗だし、簡単だしと良いところ盛りだくさんなライブラリだけど、商用利用の場合は有料のため注意。 Reactで利用するために以下のライブ…

Laravel + Reactで画像をs3にアップロードする

どうも、くずきです。 今回使用するバージョン ライブラリ バージョン react 15.6.1 Laravel 5.5.19 league/flysystem-aws-s3-v3 1.0.18 React周りはcreate-react-appのバージョン1.4.0を使って作成している。 kzkohashi.hatenablog.com Laravelでs3にアップ…

react-jsonschema-formで外部バリデーションを使用する方法

どうも、くずきです。 こないだReactでフォームを作る際にreact-jsonschema-formと呼ばれる便利なライブラリを使ったんですが、外部からのバリデーション入れるのに詰まったのでその解決法を書きたいとお見ます。 react-jsonschema-formとは github.com Reac…

Reactでクエリパラメーターが変更された場合のリソースの更新する方法

どうも、くずきです。 Reactでクエリパラメーターが変更された際にどうやってリソースの更新をするかについて書きたいと思います。 当たり前だがreact-routerではhogehoge.comとhogehoge.com?sort=abcは同じコンポーネントと認識されるため、画面の再描画な…

ReactのEventEmitterで登録したリスナが削除できない問題の解決法

どうも、くずきです。 EventEmitterで登録したリスナが削除できない問題について解決した方法をメモしときたいと思います。 構成 EventEmitter ErrorStore(EventEmitterを継承したクラスをStoreとして利用) サーバーサイドから取得したエラーを登録したリス…

react-routerを使ったルーティング処理

どうも、くずきです。 こないだ、create-react-appを本番環境で使ってみた(導入編)について紹介しました。 kzkohashi.hatenablog.com 今回はreact-routerを使ったルーティング処理をやてみます。 バージョンは4.2.2を利用。 バージョン3の時とガラッと変わ…

create-react-appを本番環境で使ってみた(導入編)

どうも、くずきです。くずさんって呼ばれるの目指してます。 React経験0の僕が、会社の新規WebアプリでReactを使った例をご紹介します。 Reactについての説明はまた後日にするとして、手を動かしながら理解していきましょう。 create-react-appとは? github…