2018-01-20 23:39:39
概要準備まずは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
※この記事は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をいじって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で作ろうとした時に参考にしたリポジトリや記事です。
Reduxというアーキテクチャの概念を理解するには、日本語情報がそこそこ充実していました。実際につくりたいモノの参考になりそうなソースを探すには少し手間がかかりました。js仕様の違い、コンパイラやタスクランナーなどビルド環境の違い、Reactそのもののバージョンの違い、関連パッケージのバージョンの違いなどペチパー一筋だった自分には中々しんどかったです。。。
色々調べてみてようやく手を動かせるようになったので、その時参考になったリポジトリや記事をリストアップしておきます。
※都度更新していきますー
参考...
アプリケーション
React
Redux
SPA
2016-10-03 16:24:56
Reactでフォームを実装するのはちょっと癖があります。
まずReactのフォームにはcontrolled formとuncontrolled formという２つのパターンがあることを先に理解しておくと良いかもしれません。参考：React ドキュメント
私はまだ理解が及んでいないところも多々ありますが、Reactの実装例が少ないので少しでも刺激になればという感じで記事を公開したいと思います。（もっと楽なやり方とかこうした方がいいといった指摘があると幸いです。）
今回の実装にあたり色々ググったのですが、inputが一つしかない実装例ばかりで結構しんどかったです。。。
やること
複数のinputを...
アプリケーション
React
2016-10-03 16:24:29
つくるものツ◯ッターのフォローボタンをパクったリスペクトしたものをつくります。仕様はだいたい同じだと思いますが、仕組みは異なります。クリックでフォロー／フォロー中とテキストが切り替わる、フォロー中の時にホバーした場合は解除というテキストを出す。これだけです。やや装飾にこだわって全体に無駄なCSSが設定されていますが、その辺は適宜スタイルシートを調整してください。
必要な知識
Reactの導入方法及び簡易的なコンポーネント作成方法
jsxとbabelについての多少の知識と理解
環境
React・・・v15.3.0
babel・・・コンパイラ（jsxもコンパイルしてくれるそうです）
html...
アプリケーション
React
2016-10-03 16:23:52
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で作る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をアプリケーションに導入しようとするときに、そのディレクトリ構成について悩んでいたのですが、良さ気な記事を見かけたのでまとめてみました。
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
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