今回は前回にも少し登場した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でのAnimationについて書きたいと思います。 React.jsではAddonとしてサポートされていて、CSS Animationを使ったCSSTransitionGroupとComponentのLifecycle MethodのようにMethodでフックして書く2パターンあります。 CSSTransitionGroup こちらではComponentの追加・削除時にCSSアニメーションさせることが出来ます。やりかたはAngular.jsやvue.jsのものに近くて追加・削除時にclassが追加されるのでcssにアニメーションを記述する感じです。 {transitionName}-{enter,leave}のclassName追加された後、次のイベントループで{transitionName}-{enter,leave}-activeのclassNameが追加されるの

server-side renderingとは文字どおりサーバーサイドでHTMLを生成してrendering出来るようにするものです。SinglePageApplicationのようなJavaScriptでDOMを組み立てるようなアプリケーションの場合、サーバーから返されるHTMLには空のdivだけがあってそこからJavaScriptを読み込んでtemplateを描画することになり、これには2点の問題点があります。 初期のロード時間 HTMLが返されてJavaScriptを評価してそこからtemplateの表示になるので、サーバーサイドからHTMLが返される場合と比べて当然時間が掛かります。なので別途ローディングを見せるなどの工夫が必要になります。 SEO 最近だとGoogleのクローラーがJavaScriptを解釈するようになったのでGoogleについては問題ないと言えるかもしれませんが

今日はこれまでに紹介した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のVirtual DOM実装の中でもユーザーが意識するべき点のkeyについて書きたいと思います。 React.jsではPropにkeyという値を指定することが出来て、Componentのリストを表示するような時につけていないとdevelopment環境だとconsole.warnで Each child in an array should have a unique "key" prop. Check the render method of KeyTrap. See http://fb.me/react-warning-keys for more information. と表示されます。 このkeyはVirtualDOMのdiffから実際のDOMに反映させるときに最小限の変更にするために使われます。 例えば var KeySample = React.creat