React.jsのComponent Lifecycle - Qiita
今回はComponentのlifecycleについて書きたいと思います。 React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが出来ます。 よく使うのはcomponentDidMountやcomponentWillUnmount辺りです。 イベントの登録をcomponentDidMountでやってcomponentWillUnmountで解除するというのがよく使うパターンだと思います。 componentWillMount() ComponentがDOMツリーに追加される前に一度だけ呼ばれます。 なので初期化処理を行うのに適しています。 この中でsetStateするとrender時にまとめて行われます。 server-side rendering時にも呼ばれるのでどちらでも動くコードである必要があります。 c
私のJavaScript情報の集め方 - Qiita
ちょっと趣向を変えてJavaScriptの情報をどうやって集めているかという話を書きたいと思います。 使っているもの Twitter RSS(feedly) Pocket はてブ TwitterはただフォローしてTL見ていたり検索してたまに見ているだけでリストを作ったりはしてなくて暇な時に見ている感じです。 RSSはこれから紹介するようなサイトとかこの人のブログ面白い！というものだけを登録しています。未読が100件増えると消化する気がどんどんなくなっていくので...。 PocketはTwitter、RSSで気になったものを後で読むためにとりあえず突っ込むのに使っています。 こうすることでRSSはすぐに終わるので、その後で時間があればPocketで読みます。 Pocketに溜まった記事はちょっとした合間に読んだりしていて、たまにまとめて読んだりして消化しています。 今見ると20件くらいあるの
React.js + CSS - Qiita
React.jsの開発者であるvjeuxが「React:CSS in JS」というタイトルでTalkをしていて、その内容がなかなか興味深いものでReact.jsにも関係するものなので紹介しておきたいと思います。 また、このアプローチについては同じくReact.jsの開発者であるzpaoによる「React Through the Ages」というTalkでも言及されています。 CSSをスケールさせる時に問題になる点 Global Namespace Dependencies Dead Code Elimination Minification Sharing Constantsn Non-deterministic Resolution Isolation ここでいうスケールさせるというのは、Facebookくらいの規模のことだと思います。 Global Namespace そのままですが、
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の方がシンプルなのでわ
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については問題ないと言えるかもしれませんが
React.jsのComponentについて - Qiita
// ダメ render() { return ( <div>title</div> <div>contents</div> ) } // OK render() { return ( <div> <div>title</div> <div>contents</div> </div> ) } また、renderメソッドはどのタイミングで何度呼ばれるかわからないので必ず冪等性がある実装にする必要があります。 Separation of concerns? ところで、React.jsではComponentとして、マークアップとViewのロジックをcreateClassの中に書いていくのですが、他のフレームワークのようにマークアップはHTMLやmustacheで書いてViewのロジックをJSで書くみたいに分かれてなくて気持ち悪い！という人もいるのではないでしょうか？ それに対して、React.j
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にする必要があ
Hello React.js - Qiita
というわけで、今回はHello World的なComponentを作ってみたいと思います。 基本的にはReact.createClassでComponentを作って、それらのComponentを組み合わせてページを作ってReact.renderでDOMと紐付けることで表示を行います。 JSXを使う JSXについては明日のAdvent Calendarで書きますが、こんな感じでJSの中にXML likeにマークアップを直接書くことが出来ます。 といってもこのままブラウザで実行すると当然エラーになるので、react-toolsを使って事前にcompileするか、http://fb.me/JSXTransformer-0.12.1.js にあるようなJSXTransformerを事前に読み込んでおく必要があります。 また、browserifyでreactifyを使うなどして変換する方法もあります
React.jsとは - Qiita
このAdvent Calendarについて 今年になって急に盛り上がってきたように感じるReact.jsですが、「ちょっと前まではAngular.jsって言ってたのに！」っていう人も多いと思うので、Advent Calendar形式で簡単に紹介していきたいと思います。 React.jsの重要な要素であるVirtualDOMについては別にAdevent Calendarがありますのでそちらも是非見てください。 ※既に↑のAdvent Calendarがあったため、これは1人で書くように作ったものなので書く人が誰もいなかったわけではないです。 React.jsについて なぜ盛り上がってきたのかは正直よくわかっていないのですが、個人的にはgithubのatomがパフォーマンス向上のためにReact.jsを使うことにしたという記事を見て興味を持つようになりました。 React.jsはFaceboo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
