公式ドキュメントの翻訳が劣化していたので、、僕が翻訳すると、こうなる。
サクッと始めよう
ようこそ React の説明書へ!このページはあなたに日常的に React を使う時の考え方の80%ほどを紹介します。
あなたが学ぶこと
- どうやってコンポーネント達を作ったり、囲ったりするのか
- どうやってマークアップやスタイルを適応させるのか
- どうやってデータを表示させるのか
- どうやって条件分岐させたりリストを作成するのか
- どうやってイベントに反応させたり表示内容を更新したりさせるのか
- どうやってコンポーネント達にデータを共有させるのか
state によって入力に反応 (React) する
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.
Here is a quiz form built using React. Note how it uses the status state variable to determine whether to enable or disable the submit button, and whether to show the success message instead.