Skip to content

Commit cba4ff1

Browse files
superyusukekoba04
authored andcommitted
Translate React top page (#55)
* 翻訳 * 原文の削除 * 改行位置の復元 * Update content/home/examples/a-component-using-external-plugins.md Co-Authored-By: superyusuke <nakanishiyusuke0000@gmail.com> * Update content/home/examples/a-simple-component.md Co-Authored-By: superyusuke <nakanishiyusuke0000@gmail.com> * 改行位置の修正 * Update content/home/marketing/declarative.md Co-Authored-By: superyusuke <nakanishiyusuke0000@gmail.com> * Update content/home/marketing/learn-once-write-anywhere.md Co-Authored-By: superyusuke <nakanishiyusuke0000@gmail.com> * - トル > 場合を取 - input => 入力 * and => と * Update content/home/marketing/component-based.md Co-Authored-By: superyusuke <nakanishiyusuke0000@gmail.com> * 日本語のみに修正 * 修正 * レビュアーの要求で修正 * レビュアーの要求で修正 * title: の追加 * 修正 * 訳語の統一
1 parent ed05a3b commit cba4ff1

File tree

7 files changed

+18
-18
lines changed

7 files changed

+18
-18
lines changed
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: A Component Using External Plugins
2+
title: 外部プラグインを使用するコンポーネント
33
order: 3
44
domid: markdown-example
55
---
66

7-
React allows 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.
7+
React は柔軟性が高いので、React 以外のライブラリやフレームワークとやり取りをするためのフックを提供しています。次の例では Markdown の外部ライブラリである **remarkable** を使用しています。`<textarea>` に入力された値をリアルタイムに HTML へと変換しています。
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: A Simple Component
2+
title: シンプルなコンポーネント
33
order: 0
44
domid: hello-example
55
---
66

7-
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`.
7+
React コンポーネントを作成するには `render()` メソッドを実装します。このメソッドは、受け取った入力データを元に、表示する内容を返す役割を担当します。次の例では JSX と呼ばれる XML に似た構文を使っています。コンポーネントに渡された入力データを `this.props` で参照し、`render()` の中で使用しています。
88

9-
**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.
9+
**React を使う際に JSX を必ず使わなくてはいけないわけではありません。** JSX のコンパイルによって生成される生の JavaScript コードを見るには、[Babel REPL](babel://es5-syntax-example) を参照してください。
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: A Stateful Component
2+
title: 状態を持つコンポーネント
33
order: 1
44
domid: timer-example
55
---
66

7-
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()`.
7+
コンポーネントは、入力されたデータを受け取るだけではなく(受け取ったデータは `this.props` で参照することができます)コンポーネント独自の内部状態を持つこともできます。(これは `this.state` で参照することができます)状態が変化した場合には、`render()` が再度実行され、描画されるマークアップが更新されます。
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: An Application
2+
title: アプリケーションの実例
33
order: 2
44
domid: todos-example
55
---
66

7-
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.
7+
`props` `state` を組み合わせることで、ちょっとした Todo アプリケーション を作ることができます。次の例では `state` を用いて、現在の Todo リストのアイテムの状態を追跡しています。それからユーザーが入力したテキストに関しても `state` で管理しています。イベントハンドラは、それが書かれた要素内部にレンダーされるように一見思われますが、実際にはこれらのハンドラは集められて、イベントデリゲーションを用いて実装されます。
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Component-Based
2+
title: コンポーネントベース
33
order: 1
44
---
55

6-
Build encapsulated components that manage their own state, then compose them to make complex UIs.
6+
自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザーインターフェイスを構築します。
77

8-
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.
8+
コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。

content/home/marketing/declarative.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Declarative
2+
title: 宣言的な View
33
order: 0
44
---
55

6-
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.
6+
React は、インタラクティブなユーザーインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。
77

8-
Declarative views make your code more predictable and easier to debug.
8+
宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Learn Once, Write Anywhere
2+
title: 一度学習すれば、どこでも使える
33
order: 2
44
---
55

6-
We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
6+
React と組み合わせて使用する技術に制限はありません。React を使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。
77

8-
React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
8+
React Node を使ったサーバー上でもレンダーできますし、[React Native](https://facebook.github.io/react-native/) を使うことでモバイルアプリケーションの中でも動きます。

0 commit comments

Comments
 (0)