react

Browserify から Webpack に移行した

ES2015 + React の開発環境を Browserify で構築していたけど、 近いうち CSS もバンドルすることになりそうなので、 Webpack に移行することにした。 ブログに手順をメモしておく。 新規にプロジェクトを作成するときも同じ手順でいけるはず。 npm で必要な…

理性捨てて props 全部渡していたら react-router でハマった

react-router で遷移先のコンポーネントに props を渡すには React.cloneElement を使う。 tnakamura.hatenablog.com このとき、理性捨てて this.props.children && React.cloneElement(this.props.children, this.props) という風に props をまるごと渡して…

TypeScript でも React Meets Redux

React を使って TODO サンプルを TypeScript で書き直したので、 今度はさらに Redux も使ってみる。 まずは Redux の型定義ファイルをインストール。 tsd query redux --action install --resolve tsd query react-redux --action install --resolve 特にひ…

TypeScript で React

今まで書いたサンプル程度の規模でも、 実行時に踏むまでバグに気付かないことが結構あって、 実際踏むと萎える。 React で規模の大きい SPA 作っていたらと思うとゾッとする。 コンパイル時に分かれば良いのに。 そうだ。 TypeScript で書いてみよう。 Java…

React + Redux で Web API を呼び出す

React + Redux で SPA を作成するとき避けられないのが、 Web API の呼び出し。 というか、Web API を呼び出さないなんて、まず考えられない。 Web API の呼び出しでは、redux-thunk を使う。 github.com Redux のミドルウェアで、 Action Creator でオブジ…

React で使う HTTP クライアント候補として SuperAgent を試してみた

React と Redux には HTTP クライアントは含まれていない。 別途ライブラリを使う必要がある。 Web API を呼び出すためだけに jQuery を使うのはバカげているから、 専用のライブラリがいいね。 Browserify でビルドするから、npm にあるライブラリを使える…

React でも Bootstrap のコンポーネントを使う

React で SPA を実装する場合も、 デザインは Bootstrap のお世話になりたい。 クラスを指定するだけで使えるコンポーネントは普通に使えそうだけど、 Tooltip や Dropdown や Modal のような、 jQuery に依存したコンポーネントは React でそのまま使えない…

React + Redux でもルーティング

react-router でルーティングを試してみたけど、 実際のアプリは React + Redux で開発する予定。 その際、react-router のみではなく redux-router も一緒に使う。 redux-router は react-router の Redux バインディング。 ルーターの状態を Redux のスト…

react-router で遷移先のコンポーネントに props を渡す

ネストしたルートに遷移するとき、 遷移先のルートに対応するコンポーネントが、親コンポーネントの props.children にセットされている。 ここで props.children をそのまま表示せずに、 React.cloneElement で props.children を複製すると、 その際に pro…

react-router を使って React でルーティング

SPA を作る上で実装したいのがルーティング。React を使ったアプリでのルーティング実装には react-router を使う。 今回からインストールは npm で。 npm install --save react-router react-router を使って Master-Detail の簡単なサンプルを書いてみた。…

React 開発環境構築

React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。 モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。 react や react-dom などのライブラリは npm でインストール。 そう…

React コンポーネントは Redux に依存しないほうがいい

先日 Redux を試したとき 末端のコンポーネントからコンテナコンポーネントまでイベント(というかコールバック)を伝播して、 コンテナコンポーネントで dispatch を呼び出してみたけど、 これ末端のコンポーネントで dispatch 呼び出したらダメなんだろうか…

React Meets Redux

先日 React で作ったタスクリストのサンプルを、 React と Redux で書き直してみた。 <html> <head> <meta charset="utf-8" /> <title>Redux Sample</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></meta></head></html>

Hello React World

Single Page Application を Angular で実装しようと思っていたんだけど、 Angular2 でコンポーネント指向にガラリと変わるみたいなので、 Angular の採用は見送って React を選択。 同じコンポーネント指向なら React でいいかな、と。 React 入門ということ…