コメントが送信できないので.
http://mae.chab.in/archives/2529
いくつか日本語を読んでて引っかかった部分を再訳してみました. つまらない訳やすごい意訳の部分があるので参考まで.
どのようにHTMLのタグと作ったコンポーネントをミックスしているか理解しましょう。HTMLコンポーネントは、ひとつ違いはありますが、あなたが定義するコンポーネントと同じような標準のReactコンポーネントです。JSXのコンパイラは自動的にHTMLタグをReact.createElement(tagName) のような形式で書き換え、他のすべてから放置します。これはグローバルの名前空間の汚染を防ぐためです。
Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to React.createElement(tagName) expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
見てください. ここでは普通の HTML タグと我々が作ったコンポーネントを混ぜて書いています. HTML コンポーネントは, ひとつだけ違いがありますが, 定義したものと同じように正規の React コンポーネントです. JSX コンパイラは HTML タグを見つけたら自動的に React.createElement(tagName) という形式に書き換えて, 他はそのままにしておきます. こうすることにより大域名前空間が汚染されません.
今Commentコンポーネントを定義してきたからには、ユーザー名とコメントのテキストをCommentコンポーネントに渡したくなります。コメントそれぞれに同じコードを再利用することを許可します。さあ、いくつかのコメントをCommentListの内部に追加しましょう:
Now that we have defined the Comment component, we will want to pass it the author name and comment text. This allows us to reuse the same code for each unique comment. Now let's add some comments within our CommentList:
さて, Comment コンポーネントを定義したのですから, 書いた人の名前とコメントのテキストを入れたくなりますよね? コンポーネントを定義するとそれをそれぞれのコメントに使い回すことができます. いくつかのコメントを CommentList に入れてみましょう:
このコンポーネントは以前のコンポーネントとは異なります。なぜならコンポーネント自身を再びレンダリングしなければいけなくなるからです。コンポーネントは新しいコメントをレンダリングする必要があるかもしれない時点では、コンポーネントはサーバーからのリクエストが戻ってくるまでどんなデータも持っていません。
This component is different from the prior components because it will have to re-render itself. The component won't have any data until the request from the server comes back, at which point the component may need to render some new comments.
このコンポーネントは適切なタイミングで re-render しなければならないという点で以前のものとは異なります. 最初は何もデータを持っていないので, サーバへのリクエストが返ってきたときが再描画すべきタイミングです.
render()メソッドはthis.porpsとthis.stateの関数として宣言的に書かれています。フレームワークはUIが常にインプットに対して一貫性を維持していることを保証します。
render() methods are written declaratively as functions of this.props and this.state. The framework guarantees the UI is always consistent with the inputs.
[これは英文自体わかりません. 推測ですが,
render() and other methods, which are passed to React.createClass, are written declaratively as functions of this.props and this.state. The framework guarantees the API (or UI components?) is always consistent with the inputs.
ということを言いたかったのではないでしょうか. にしても "declaratively" がよくわかりませんけど.]
コンポーネントが最初に作られた時、サーバーからのJSONをGETしたがり、最新のデータに反映するために状態をアップデートしたがります。
When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data.
CommentBox コンポーネントがひとたび作られると, 次になされるべきはサーバから JSON を GET して最新のデータを反映するために state をアップデートすることです.
注意: これはAJAXアプリケーションになっているから、ファイルシステムに置いているファイルを使うよりむしろWebサーバーを使ってあなたはアプリを開発しなければならないでしょう。
Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system.
注意: 我々はこのアプリケーションを AJAX なものにしようとしているので, ファイルシステムに置いているファイルを使うよりむしろWebサーバーを使うべきでしょう.