pirosikickのブックマーク - はてなブックマーク

React.jsでserver-side renderingにも対応したRouting - Qiita
React.jsはComponentを作るライブラリなので、Routerは当然含まれていません。なのでBackbone.RouterだったりDirectorだったり好きなRouterライブラリと組み合わせて使うことが出来ます。でもPageの単位でComponentを作って切り替える場合にそれだと面倒だったり冗長になってしまいがちです。なのでここでは、react-routerというものを紹介したいと思います。 React Router 以前まではReact Routerではserver-side renderingがサポートされていなかったので、react-router-componentというのを使っていたのですが、今はサポートされているのでserver-side renderingしたい場合にも使うことが出来ます。 React Router Componentの方がシンプルなのでわ
pirosikick 2015/01/08
React

React.js

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