Stateless な React Component の記法をまとめてみた - Qiita
はじめに React Component には様々な書き方があるので、自分の理解のため整理してみました。 var CommentBox = ... ReactDOM.render( <CommentBox hello="Hello, world" name="CommentBox" />, document.getElementById('content') ) 以下、CommentBox に hello と name という props を渡す stateless なコンポーネントを前提とします。 基本型 チュートリアルに出てくる書き方で、誰しもが真っ先に覚える書き方かと思います。 https://facebook.github.io/react/docs/tutorial.html var CommentBox = React.createClass({ render: functio
React15.2.0でRedux-FormV5ワーニング対策＆V6使用例 - Qiita
React 15.2.0を使い始めたら・・・！！！ React15.2.0がリリースされました。エラー周りが強くなっててこれはいいぞ!と使っていたところ、redux-formを実装したら、warningが吐き出されるようになっていた。 warningの内容は bundle.js:1309 Warning: Unknown props initialValue, autofill, onUpdate, valid, invalid, dirty, pristine, active, touched, visited, autofilled on <input> tag. Remove these props from the element. For details, see よくわかんないpropsを渡さないでくださいよ！ ということらしい。どうやらReact 15.2.0では予期しないp
自社サービス採用へ。本気で作るReact+Reduxのプロジェクト構成 - Qiita
サイバー・バズの@yuinchirnです。 弊社で最近リリースした「Cloud-F」というアパレルのクラウド展示会サービスは、フロントサイドはReact + Redux + Webpack、サーバサイドはScala + Akka HTTPで作られています。 今回は、フロント側のReact + Reduxを使ったプロジェクトの構成について紹介していきます。 React + Reduxプロジェクトを作る上で参考になればと思っております。 下記記事を読んで基本を押さえておくと読みやすいと思います。 React+Redux入門 全体のディレクトリ構成 今回はバイヤー向け管理画面、ブランド向け管理画面という二つの画面を作るため、 両方のプロジェクトで共通で利用する部分は/common バイヤー向け管理画面は/buyer ブランド向け管理画面は/brand という３つのReact ＋ Reduxプロジ
Redux 基礎：Action 編 - Qiita
概要 React + Redux の Action についてサンプルを使って、Action の作成と動作の確認をします。 準備 redux/examples/real-world からいろいろそぎ落としたこちらのソースの tag/init を使って説明します。 ※ 実装完了はtag/action Action とは Action はストアの state を変更するためのメッセージです。 Action によって state が変わると UI の表示などアプリの変化が起きるので、アプリに何か起こすための出発点となります。 Action 発行 Reducer が現在の state と action を元に新しい state を作成。 state の変更をUIなどに反映 Action は javascipt のオブジェクトでどのような形でも大丈夫ですが、慣習として type フィールドに文字列で
ReactMotionを使って簡単バブルチャート&アニメーション（Redux + d3.js） - Qiita
React+Reduxで開発していて、svg描画したコンポーネントを表示するときにアニメーションをつけたかったのですが、ReactMotionというモジュールで簡単に実装できたので作業ログしておきます。 インストール $ npm install react-motion --save $ npm install d3 --save など。 実装するもの [ { name: "機械", sum: 3 }, { name: "写真集", sum: 4 }, { name: "Web", sum: 5 }, { name: "ファンタジー", sum: 2 }, { name: "プログラミング", sum: 2 } ] こんな感じでデータが与えられているときに、円でその割合を視覚化するような画面を実装します。 このままぱっと表示すると何かすごそうじゃないので、アニメーションでちょっと小さめの円
React Routerで認証を制御する方法 - Qiita
React Routerで認証を制御する方法です。試行錯誤して良さそうな実装方法を発見したのでご紹介します。 アプリに認証があると、画面ごとに、 認証済みユーザのみアクセスを許可したいページ アカウント設定など 認証していないユーザのみアクセスを許可したいページ ログイン・新規登録など 認証に関係なくアクセスを許可したいページ Qiita投稿のようなパブリックなコンテンツなど の設定が必要になる場合があります。 React Routerのサンプルをいくつか見たところ幾つか認証を制御する方法が示されていました。 onEnterを使う方法 AuthenticatedComponent onEnterを使う方法 本家のサンプルで例示された実装です。現在βのreact-router 1.0.0が必要になります。 function requireAuth(nextState, transition)
React.jsのRefsをES2015で書いてみた - Qiita
初投稿です。 これから備忘録代わりにキータに記事書いて行こうと思います。 早速ですがReact.jsのrefsのサンプルをES2015で書き直しました。 React.jsのrefsについて とりあえずrefsについてはこのリンクを見て頂ければと思いますが http://js.studio-kingdom.com/react/guides/more_about_refs stateにデータを流してDOM操作してると、jQueryでいうところのremoveやappendは使わないにしてもサンプルのようにある動作をした後に直接DOMを操作したいということが稀にあります。 そんな時にrefs使うと良いよっていう話しです。 とりあえず、上記リンクのコードをES2015化して行きます。 var App = React.createClass({ getInitialState: function()
[翻訳] Airbnb React/JSX Style Guide - Qiita
この翻訳について Airbnb React/JSX Style Guideの和訳です。 間違っていたり分かりにくい箇所があれば、ご指摘いただけると幸いです。 Airbnb React/JSX スタイルガイド このスタイルガイドは現在一般的に使用されている標準に基いていますが、場合によってはいくつかの慣例（async/awaitやstatic class fields）が含まれていたり禁止されていたりします。現在、このガイドにはステージ3より前のものは含まれておらず非推奨です。 目次 基本的なルール クラス vs React.createClass vs ステートレス ミックスイン 命名規則 宣言 アラインメント 引用符 空白 引数 参照 括弧 タグ メソッド 順序 isMounted 基本的なルール Reactコンポーネントは1ファイルに1つだけにしてください。 ただし、1ファイルに複数の
![[翻訳] Airbnb React/JSX Style Guide - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1254e38358c5c90719500a1b80c8ffd78476fcf7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwQWlyYm5iJTIwUmVhY3QlMkZKU1glMjBTdHlsZSUyMEd1aWRlJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xYTY0ZTQwNmQ5MDEyYjBmY2JhNGE0OGVkNjMyMTVhMA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YW1hZGFzaHkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTI1Mzg0MjVmMjMxMDk3OTY3YzYxOTA2YmFmZDVlMTJl%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd9b5864c8ec3eb905404bd594cadec9c)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redux 基礎：Middleware 編 - Qiita