Translate React top page

content/home/examples/a-component-using-external-plugins.md

@@ -1,7 +1,10 @@
 ---
-title: A Component Using External Plugins
+title: 外部プラグインを使用する Component
 order: 3
 domid: markdown-example
 ---
 
-React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React は柔軟性が高いので、
+React 以外のライブラリやフレームワークとやり取りをするためのフックを提供しています。
+次の例では Markdown の外部ライブラリである **remarkable** を使用しています。
+`<textarea>` に入力された値をリアルタイムに HTML へと変換しています。

content/home/examples/a-simple-component.md

@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: シンプルな Component
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+React コンポーネントを作成する場合には `render()` メソッドを実装します。このメソッドは、受け取った input データを元に、表示する内容を返す役割を担当します。次の例では JSX と呼ばれる XML に似た構文を使っています。コンポーネントに渡された input データを `this.props` で参照し、`render()` の中で使用しています。
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**React を使う際に JSX を必ず使わなくてはいけないわけではありません。** JSX のコンパイルによって生成される生の JavaScript コードを見るには、[Babel REPL](babel://es5-syntax-example) を参照してください。

content/home/examples/a-stateful-component.md

@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: 状態を持つことのできる Component
 order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+コンポーネントは、入力されたデータを受け取るだけではなく（受け取ったデータは `this.props` で参照することができます）コンポーネント独自の内部状態を持つこともできます。（これは `this.state` で参照することができます）状態が変化した場合には、`render()` が再度実行され、描画されるマークアップの内容が更新されます。

content/home/examples/an-application.md

@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: アプリケーションの実例
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+`props` and `state` を組み合わせることで、ちょっとした Todo アプリケーション を作ることができます。次の例では `state` を用いて、現在の Todo リストのアイテムの状態を追跡しています。それからユーザーが入力したテキストに関しても `state` で管理しています。イベントハンドラは、それが書かれた要素内部にレンダーされるように一見思われますが、実際にはこれらのハンドラは集められて、イベントデリゲーションを用いて実装されます。

content/home/marketing/component-based.md

@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: Component-Based / コンポーネントベース
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザーインターフェイスを構築します。
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々な形式のデータをアプリケーションに対して簡単に渡すことができ、それでいて DOM に状態を持たせないようにすることができます。

content/home/marketing/declarative.md

@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Declarative / 宣言的な View
 order: 0
 ---
 
-React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+React は、インタラクティブなユーザーインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React は状態用のデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。
 
-Declarative views make your code more predictable and easier to debug.
+宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。

content/home/marketing/learn-once-write-anywhere.md

@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Learn Once, Write Anywhere / 一度学習すれば、どこでも使える
 order: 2
 ---
 
-We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+React と組み合わせて使用する技術に関してはどんなものも選択できるので、React を使って新しい機能を追加する際にも、既存のソースコードを書き換える必要はありません。
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React は Node を使ったサーバー上でも Render できますし、[React Native](https://facebook.github.io/react-native/) を使うことでモバイルアプリケーションの中でも動きます。