React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
今日はこれまでに紹介したPropやStateを使ったComponent間でやりとりについて書きたいと思います。 親のStateを子のPropとして渡す Componentを設計する時はまずPropとしてI/Fを考えて、そのComponentが管理すべき値で変更されるものをStateとして定義します。 つまりComponent間での親子の関係を意識して、親がStateを持っていて子にPropとして渡すというのが基本になります。（子は使うだけで管理しているのは親） var User = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, id: React.PropTypes.number.isRequired }, render() { return ( <div>{this.props.id}:
React.jsのJSXを使ってみる - Qiita
var Hello = React.createClass({ render: function() { return ( <div>Hello {this.props.name}</div> ); } }) こんな感じで一見HTMLに見える部分<div>...</div>がJSXのSyntaxです。 詳しくは↓に書いてある通りなのですが、XML likeにタグを書いていく感じです。覚えることはほとんどないです。 注意点としてはHTMLではないということで、例えばdivにcontainerというクラスを指定したい場合は、<div class="container">...</div>ではなくて、<div className="container">...</div>となります。(classはJavaScriptの予約語のため) その他ではlabelのfor属性はhtmlforにする必要があ
React.jsのProp - Qiita
今回は前回にも少し登場したPropについて取り上げたいと思います。 基本的な使い方 Propは基本的にはCompnentのattributeとして定義してComponentの中ではthis.props.xxxとして参照する。それだけです。PropにはObjectでも関数でも何でも指定することが出来ます。 var Avatar = React.createClass({ render() { var avatarImg = `/img/avatar_${this.props.user.id}.png`; return( <div> <span>{this.props.user.name}</span> <img src={avatarImg} /> </div> ); } }); var user = { id: 10, name: "Hoge" }; // <Avatar user={us
React.js + Jest - Qiita
前回はTestUtilsの使い方を中心に説明したので、今回はfacebookが開発しているJestというフレームワークとの組み合わせてみたいと思います。 Painless JavaScript Unit Testing Jestのページには「Painless JavaScript Unit Testing」とある通り導入が簡単という特徴を持っています。 その特徴として「Mock By Default」があって、DefaultでCommonJS Styleのrequireを全てMockに置き換えます。ちょっと過激な感じですね。 なので、テスト対象の挙動だけに依存したテスト簡単に書くことが出来ます。逆に完全にテスト対象以外はMockになるのでI/FのテストにはならないですがまぁそれはUnit Testの範囲外ということで。 Jasmine JestはJasmineをベースとしてその上に作られて
React.jsとテスト - Qiita
React.jsのテストということはComponentに対してテストをすることになるので、DOMが絡んで来て辛そうだなと思うかと思いますがReact.jsはAddonとしてReact.addons.TestUtilsに便利な関数を提供してくれているのでそれを使うとテストが書きやすくなります。 DOMは必要？ React.jsのテストを書くとき、server-sideでも動くのでnodeの環境でテストを実行したくなりますが、実際にonClickイベントに反応して〜などのテストを書こうとするとやはりDOMが必要になってきます。 ちなみに、Prop渡してrenderToStaticMarkupを使ってその結果のHTMLを確認するようなテストであればnodeの環境で実行することは出来ます。 イベントのシュミレート系 「ボタン押したら〜」というテストを書こうとすると、DOMに対する参照を取得し値をセ
React.jsのEventについて - Qiita
今回はDOMのイベントの扱いについて書きたいと思います。 SyntheticEvent React.jsではDOMをVirtualDOMとしてwrapしているようにDOMのイベントについてもSyntheticEventとしてwrapしていて、クロスブラウザ対応されています。 I/Fはこんな感じです boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented Number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() void stopPropagation() DOMEventTarget target Date timeStamp String type この通り、preve
React.jsとFlux - Qiita
今回はReact.jsとも関わりがあるFluxについて紹介したいと思います。 Flux is Architecture ↑の図はfacebookのfluxのリポジトリにあるものですが、Fluxは上記のようなArchitectureの名称です。facebook/fluxのrepositoryに行ってもらうとわかるのですが、実装としてはDispatcherの部分があるだけです。 Unidirectional data flow 先ほどの図を見てもらうとわかる通り、Fluxではアプリケーションの複雑さをなくすため、データの流れを一方向にします。 そのため全体の処理の流れはわかりやすくなりますが、Angular.jsなどで書くときに比べて冗長に感じることもあるかと思います。 しかしながら単純なデータの流れを作ることで、ある程度の規模になってアプリケーションが複雑化してもデータやイベントの流れがスパ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
