2026年7月5日 (日) 14:46時点における版

公式ドキュメントの翻訳が劣化していたので、、僕が翻訳すると、こうなる。

サクッと始めよう

ようこそ React の説明書へ！このページはあなたに日常的に React を使う時の考え方の８０％ほどを紹介します。

あなたが学ぶこと

どうやってコンポーネント達を作ったり、囲ったりするのか
どうやってマークアップやスタイルを適応させるのか
どうやってデータを表示させるのか
どうやって条件分岐させたりリストを作成するのか
どうやってイベントに反応させたり表示内容を更新したりさせるのか
どうやってコンポーネント達にデータを共有させるのか

コンポーネント達を作ったり、囲ったりする

Reactアプリは複数のコンポーネントによって形作られていきます。１つ１つのコンポーネントは UI (ユーザに表示させる面) の断片であり、独自の仕組みや見た目を持っています。ボタンみたいに小さいコンポーネントもあれば、ページ全体を成すコンポーネントもあります。

React のコンポーネント達は JavaScript の機能であり、彼らはマークアップを生成します。

@@ 12行目: / 12行目: @@
 * どうやってコンポーネント達にデータを共有させるのか
-== state によって入力に反応 (React) する ==
+== コンポーネント達を作ったり、囲ったりする ==
-React では、直接コードによって UI を変化させることはしません。例えば、あなたはコードで「ボタンを無効に」、「ボタンを有効に」「送信済みメッセージを表示」などと指示は出しません。代わりに、
+Reactアプリは複数の''コンポーネント''によって形作られていきます。１つ１つのコンポーネントは UI (ユーザに表示させる面) の断片であり、独自の仕組みや見た目を持っています。ボタンみたいに小さいコンポーネントもあれば、ページ全体を成すコンポーネントもあります。
-With React, you won’t modify the UI from code directly. For example, you won’t write commands like “disable the button”, “enable the button”, “show the success message”, etc. Instead, you will describe the UI you want to see for the different visual states of your component (“initial state”, “typing state”, “success state”), and then trigger the state changes in response to user input. This is similar to how designers think about UI.
+React のコンポーネント達は JavaScript の機能であり、彼らはマークアップを生成します。
-Here is a quiz form built using React. Note how it uses the <code>status</code> state variable to determine whether to enable or disable the submit button, and whether to show the success message instead.

「React」の版間の差分

2026年7月5日 (日) 14:46時点における版

サクッと始めよう

あなたが学ぶこと

コンポーネント達を作ったり、囲ったりする