Self-review and improve articles that have been commited w/o peer-review

content/docs/components-and-props.md

@@ -30,7 +30,7 @@ function Welcome(props) {
 }
 ```
 
-この関数は、データの入った "props"（「プロパティ」の意味）というオブジェクトを引数としてひとつ受け取り、React 要素を返すので、有効な React コンポーネントです。これは文字通り JavaScript の関数ですので、このようなコンポーネントのことを「関数コンポーネント」と呼びます。
+この関数は、データの入った "props"（「プロパティ」の意味）というオブジェクトを引数としてひとつ受け取り、React 要素を返すので、有効な React コンポーネントです。これは文字通り JavaScript の関数ですので、このようなコンポーネントのことを "関数コンポーネント (function component)" と呼びます。
 
 コンポーネントを定義するために [ES6 クラス](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)も使用できます：
 
@@ -171,7 +171,7 @@ function Avatar(props) {
 }
 ```
 
-`Avatar` は `Comment` の内側でレンダリングされているということを知っている必要はありません。なので prop の名前として、`author` ではなく `user` というもっと一般的な名前を付けました。
+`Avatar` は、自身が `Comment` の内側でレンダリングされているということを知っている必要はありません。なので props の名前として、`author` ではなく `user` というもっと一般的な名前を付けました。
 
 コンポーネントが使用されるコンテキストではなく、コンポーネント自身からの観点で props の名前を付けることをお勧めします。
 

content/docs/conditional-rendering.md

@@ -50,7 +50,7 @@ ReactDOM.render(
 
 要素を保持しておくために変数を使うことができます。これは、出力の他の部分を変えずにコンポーネントの一部を条件付きでレンダーしたい時に役立ちます。
 
-ログアウトとログインボタンを表す以下の2つの新しいコンポーネントを考えましょう：
+ログアウトとログインボタンを表す以下の 2 つの新しいコンポーネントを考えましょう：
 
 ```js
 function LoginButton(props) {

content/docs/forms.md

@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-自然なこととして、HTML のフォーム要素は内部に何らかの状態を持っていますので、フォーム要素は React において他の DOM 要素とちょっと異なる動作をします。例えば、このプレーン HTML によるフォームは 1 つの名前を受け付けます：
+自然な HTML のフォーム要素は内部に何らかの状態を持っていますので、フォーム要素は React において他の DOM 要素とちょっと異なる動作をします。例えば、このプレーン HTML によるフォームは 1 つの名前を受け付けます：
 
 ```html
 <form>
@@ -21,7 +21,7 @@ redirect_from:
 </form>
 ```
 
-このフォームは、ユーザーがフォームを送信した際に新しいページに移動する、という、HTML フォームとしてのデフォルトの動作をします。React でこの振る舞いが必要なら、そのまま動きます。しかし大抵のケースでは、フォームの送信に応答してユーザーがフォームに入力したデータにアクセスするような JavaScript 関数があった方が便利です。これを実現する標準的な方法は、「制御された (controlled) コンポーネント」と呼ばれるテクニックを使うことです。
+このフォームは、ユーザーがフォームを送信した際に新しいページに移動する、という、HTML フォームとしてのデフォルトの動作をします。React でこの振る舞いが必要なら、そのまま動きます。しかし大抵のケースでは、フォームの送信に応答してユーザーがフォームに入力したデータにアクセスするような JavaScript 関数があった方が便利です。これを実現する標準的な方法は、"制御された (controlled) コンポーネント" と呼ばれるテクニックを使うことです。
 
 ## 制御されたコンポーネント
 
@@ -291,9 +291,9 @@ setTimeout(function() {
 
 ```
 
-## 管理されたコンポーネントの代替手段
+## 制御されたコンポーネントの代替手段
 
-管理されたコンポーネントは、あらゆる種類のデータの変更に対してイベントハンドラを書き、あらゆる入力状態を React コンポーネントに通してやる必要があるため、時としてうんざりすることがあります。このことは既存のコードベースを React に変換する場合や、React アプリケーションを非 React のライブラリと統合する場合に、特に問題化します。これらの状況においては、 入力フォームを実装する代替手段である[非制御コンポーネント](/docs/uncontrolled-components.html)を検討してみてください。
+制御されたコンポーネントは、あらゆる種類のデータの変更に対してイベントハンドラを書き、あらゆる入力状態を React コンポーネントに通してやる必要があるため、時としてうんざりすることがあります。このことは既存のコードベースを React に変換する場合や、React アプリケーションを非 React のライブラリと統合する場合に、特に問題化します。これらの状況においては、 入力フォームを実装する代替手段である[非制御コンポーネント](/docs/uncontrolled-components.html)を検討してみてください。
 
 ## 本格的なソリューション
 

content/docs/introducing-jsx.md

@@ -20,7 +20,7 @@ JSX は React "要素" を生成します。[次の章](/docs/rendering-elements
 
 ### JSXを使う理由
 
-レンダリングロジックは、イベントへの応答や経時的な状態の変化、画面表示のためにデータを準備する方法といった、他の UI ロジックと本質的に結合したものであり、React ではその事実を受け入れます。
+表示のためのロジックは、イベントへの応答や経時的な状態の変化、画面表示のためのデータを準備する方法といった、他の UI ロジックと本質的に結合したものであり、React はその事実を受け入れます。
 
 マークアップとロジックを別々のファイルに書いて人為的に*技術*を分離するのではなく、React はマークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて[*関心*を分離](https://en.wikipedia.org/wiki/Separation_of_concerns)します。[後のセクション](/docs/components-and-props.html)でコンポーネントについては改めて詳しく紹介しますが、現時点で JavaScript にマークアップを書くことが気にくわない場合、[こちらの議論](https://www.youtube.com/watch?v=x7cQ3mrcKaY)で考えが改まるかもしれません。
 
@@ -43,7 +43,7 @@ ReactDOM.render(
 );
 ```
 
-あらゆる有効な[JavaScriptの式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)を JSX 内で中括弧に囲んで使用できます。例えば、`2 + 2` や `user.firstName` や `formatName(user)` はすべて有効な JavaScript の式です。
+あらゆる有効な [JavaScript の式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)を JSX 内で中括弧に囲んで使用できます。例えば、`2 + 2` や `user.firstName` や `formatName(user)` はすべて有効な JavaScript の式です。
 
 以下の例では、`formatName(user)` という JavaScript 関数の結果を `<h1>` 要素内に埋め込んでいます。
 
@@ -106,7 +106,7 @@ const element = <img src={user.avatarUrl}></img>;
 
 >**警告:**
 >
->JSX は HTML よりも JavaScript に近いものですので、React DOM は HTML の属性ではなく `camelCase` のプロパティ命名規則を使用します。
+>JSX は HTML よりも JavaScript に近いものですので、React DOM は HTML の属性ではなくキャメルケース (camelCase) のプロパティ命名規則を使用します。
 >
 >JSX では例えば、`class` は [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) となり、`tabindex` は  [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex) となります。
 
@@ -176,7 +176,7 @@ const element = {
 };
 ```
 
-これらのオブジェクトは "React 要素" と呼ばれます。これらは画面に表示したいものの説明書きとして考えることができます。React はこれらのオブジェクトを読み取り、DOM を構築して最新に保ちます。
+このようなオブジェクトは "React 要素" と呼ばれます。これらは画面に表示したいものの説明書きとして考えることができます。React はこれらのオブジェクトを読み取り、DOM を構築して最新に保ちます。
 
 次の章では React 要素を DOM に変換することについて見ていきましょう。
 

content/docs/lists-and-keys.md

@@ -70,8 +70,7 @@ ReactDOM.render(
 );
 ```
 
-このコードを実行すると、「リスト項目には key を与えるべきだ」という警告を受け取るでしょう。"key" とは特別な文字列の属性であり、要素のリストを作成する際に含めておく必要があるものます。
-なぜ key が重要なのか、次の節で説明します。
+このコードを実行すると、「リスト項目には key を与えるべきだ」という警告を受け取るでしょう。"key" とは特別な文字列の属性であり、要素のリストを作成する際に含めておく必要があるものです。なぜ key が重要なのか、次の節で説明します。
 
 `numbers.map()` 内のリスト項目に `key` を割り当てて、key が見つからないという問題を修正しましょう。
 

content/docs/rendering-elements.md

@@ -1,6 +1,6 @@
 ---
 id: rendering-elements
-title: 要素のレンダリング
+title: 要素のレンダー
 permalink: docs/rendering-elements.html
 redirect_from:
   - "docs/displaying-data.html"

content/docs/state-and-lifecycle.md

@@ -10,7 +10,7 @@ next: handling-events.html
 
 このページでは React コンポーネントにおける state とライフサイクルについての導入を行います。[詳細なコンポーネントの API リファレンスはこちら](/docs/react-component.html)にあります。
 
-[以前の章のひとつ](/docs/rendering-elements.html#updating-the-rendered-element)にあった秒刻みの時計の例を考えてみましょう。[要素のレンダリング](/docs/rendering-elements.html#rendering-an-element-into-the-dom)の章にて、UI を更新するための方法をひとつだけ学びました。それはレンダーされた出力を更新するために `ReactDOM.render()` を呼び出す、というものでした。
+[以前の章のひとつ](/docs/rendering-elements.html#updating-the-rendered-element)にあった秒刻みの時計の例を考えてみましょう。[要素のレンダー](/docs/rendering-elements.html#rendering-an-element-into-the-dom)の章にて、UI を更新するための方法をひとつだけ学びました。それはレンダーされた出力を更新するために `ReactDOM.render()` を呼び出す、というものでした。
 
 ```js{8-11}
 function tick() {
@@ -201,9 +201,9 @@ ReactDOM.render(
 
 多くのコンポーネントを有するアプリケーションでは、コンポーネントが破棄された場合にそのコンポーネントが占有していたリソースを開放することがとても重要です。
 
-最初に `Clock` が DOM としてレンダーされる際に、[タイマーを設定](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)したいでしょう。このことを React では "マウント (mounting)" と呼びます。
+[タイマーを設定](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)したいのは、最初に `Clock` が DOM として描画されるときです。このことを React では "マウント (mounting)" と呼びます。
 
-また `Clock` が生成した DOM が削除される際には[タイマーをクリア](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)したいです。このことを React では "アンマウント (unmounting)" と呼びます。
+また[タイマーをクリア](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)したいのは、`Clock` が生成した DOM が削除されるときです。このことを React では "アンマウント (unmounting)" と呼びます。
 
 コンポーネントクラスで特別なメソッドを宣言することで、コンポーネントがマウントしたりアンマウントしたりした際にコードを実行することができます：
 
@@ -415,7 +415,7 @@ this.setState(function(state, props) {
 
 親コンポーネントであれ子コンポーネントであれ、特定の他のコンポーネントがステートフルかステートレスかを知ることはできませんし、特定のコンポーネントの定義が関数型かクラス型かを気にするべきではありません。
 
-これが、state はローカルのものである、ないしはカプセル化されている、と言われる理由です。state を所有してセットするコンポーネント自身以外からはアクセスすることができません。
+これが、state はローカルのものである、ないしはカプセル化されている、と言われる理由です。state を所有してセットするコンポーネント自身以外からはその state にアクセスすることができません。
 
 コンポーネントはその子コンポーネントに props として自身の state を渡してもかまいません。
 
@@ -464,6 +464,6 @@ ReactDOM.render(
 
 [**Try it on CodePen**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
-各 `Clock` は独立してタイマーを設定して更新します。
+各 `Clock` は独立してタイマーをセットし、独立して更新します。
 
 React アプリケーションでは、コンポーネントがステートフルかステートレスかは、コンポーネントにおける内部実装の詳細 (implementation detail) とみなされ、それは時間と共に変化しうるものです。ステートレスなコンポーネントをステートフルなコンポーネントの中で使うことが可能であり、その逆も同様です。