Post

react

2018-01-20 23:39:39

ReactとHistory APIを使ってrouterを自作する

概要準備まずはHistory APIを理解しておきます。GO TO MDN。 MDN - History MDN - ブラウザの履歴を操作する 忙しい人はpushStateとwindow.popstateだけ理解しておけばなんとかなるはず。 仕様このrouterでは、以下のようなURLに対応します。 /post /post/:id /post/:id/:title クエリパラメータには対応しません。 使用するパッケージReact周りは省略します。 React以外で使うパッケージは1つだけです。 pillarjs/path-to-regexp URL部分の正規表現を良しなにやってくれるパ...

プログラミング

ES6 JavaScript React history-api router

2017-12-25 23:24:08

Reactでマークダウンエディタをシャッとつくる

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 準備ビルド環境のセットアップが面倒なので、今回はFacebook公式のcreate-react-appというツールを使います。 npm install -g create-react-app md-editorというアプリ名で環境を用意することにします。 create-react-app md-editor 次に、今回使うライブラリのインストールをしておきます。 cd ./md-editor npm install --save marked npm install 最後にサーバ...

プログラミング

ES5 ES6 JavaScript React

2017-03-18 16:26:00

redux-formのサーバーサイドバリデーションでpromissをいじってたら「Unc...

概要redux-formでサーバーサイドのバリデーションを実装している時に、promissをいじってredux-formのSubmissionErrorを投げていたらUncaught (in promise) errorと怒られた話です。 解決策returnがなかっただけでした。 修正前 class Categories extends Component { onSubmit(props) { const {createCategory, fetchCategories, reset} = this.props; createCategory(props).then((...

プログラミング

React Redux redux-form

2017-02-25 16:25:24

ReactとReduxでSPAを構築するために参考にした記事

雑メモです。ReactとReduxでSPAで作ろうとした時に参考にしたリポジトリや記事です。 Reduxというアーキテクチャの概念を理解するには、日本語情報がそこそこ充実していました。実際につくりたいモノの参考になりそうなソースを探すには少し手間がかかりました。js仕様の違い、コンパイラやタスクランナーなどビルド環境の違い、Reactそのもののバージョンの違い、関連パッケージのバージョンの違いなどペチパー一筋だった自分には中々しんどかったです。。。 色々調べてみてようやく手を動かせるようになったので、その時参考になったリポジトリや記事をリストアップしておきます。 ※都度更新していきますー 参考...

プログラミング

React Redux SPA

2016-10-03 16:24:56

Reactで複数のinputを扱うフォームを実装する

Reactでフォームを実装するのはちょっと癖があります。 まずReactのフォームにはcontrolled formとuncontrolled formという2つのパターンがあることを先に理解しておくと良いかもしれません。参考:React ドキュメント 私はまだ理解が及んでいないところも多々ありますが、Reactの実装例が少ないので少しでも刺激になればという感じで記事を公開したいと思います。(もっと楽なやり方とかこうした方がいいといった指摘があると幸いです。) 今回の実装にあたり色々ググったのですが、inputが一つしかない実装例ばかりで結構しんどかったです。。。 やること 複数のinputを...

プログラミング

React

2016-10-03 16:24:29

Reactでフォローボタンをつくってみる

つくるものツ◯ッターのフォローボタンをパクったリスペクトしたものをつくります。仕様はだいたい同じだと思いますが、仕組みは異なります。クリックでフォロー/フォロー中とテキストが切り替わる、フォロー中の時にホバーした場合は解除というテキストを出す。これだけです。やや装飾にこだわって全体に無駄なCSSが設定されていますが、その辺は適宜スタイルシートを調整してください。 必要な知識 Reactの導入方法及び簡易的なコンポーネント作成方法 jsxとbabelについての多少の知識と理解 環境 React・・・v15.3.0 babel・・・コンパイラ(jsxもコンパイルしてくれるそうです) html...

プログラミング

React

2016-10-03 16:23:52

Reactでrequireしてたら、[BABEL] Note: The code generato...

ReactでComponentをrequireしてたら見慣れないエラーがでました。 環境 Laravel Elixir Babel Browserify ファイルでかいぞ![BABEL] Note:The code generator has deoptimised the styling of "D:/path/to/hoge.js" as it exceeds the max of "100KB" というエラーなわけですが、babelを使っていてファイルが大きすぎると発生するエラーのようです。 What does “The code generat...

プログラミング

React

2017-04-03 16:22:50

React+react-redux+react-router+ES6+webpackで作るSPAホ...

概要Reactで作るSPAの簡易的なボイラープレートをつくりました。最近のフロントエンドには何とかついていくだけで精一杯なため、ソースに自信はありませんが、一応形にはなっていると思いますと言い訳だけしておきます(_) 環境モジュール axios lodash react react-dom react-router react-redux redux redux-promise ビルド周り babel-core babel-loader babel-preset-es-2015 babel-preset-react babel-preset-stage-0 webpack webpack-d...

プログラミング

boilerplate ES6 React react-router Redux webpack

2016-11-23 16:19:22

React+Reduxのディレクトリ構成検討

React+Reduxをアプリケーションに導入しようとするときに、そのディレクトリ構成について悩んでいたのですが、良さ気な記事を見かけたのでまとめてみました。 A Better File Structure For React/Redux Applications Reduxの構成に従うパターンシンプルかつベタなパターンです。SPA開発ならこれが定番でしょうか。 actions/ CommandActions.js UserActions.js components/ Header.js Sidebar.js Command.js Command...

プログラミング

ES6 React Redux

2016-10-03 16:18:43

React+marked+highlight

wysiwygエディタではなく、マークダウンエディタをReactでつくってみました。 ソースコードの大部分はReact入門を参考にさせていただきました。 雑なgifサンプルはこちら(:3」∠) 環境 React marked(github)・・・マークダウンパーサー highlight.js(highlightjs.org)・・・シンタックスハイライト bower・・・上記全てのパッケージ管理に使用 準備markedとhighlight.jsをbowerでインストール bower install markedbower install highlightjs それぞれご自分の環境にインストー...

プログラミング

ES6 React highlightjs markdown marked