{{#isin:React}}
サクッと始めよう
ようこそ React の説明書へ！このページはあなたが React を使う時の日常的な考え方の８０％ほどを紹介します。
あなたが学ぶこと
- どうやって コンポーネント 達を作ったり、囲ったりするのか
- どうやって マークアップ やスタイルを適応させるのか
- どうやってデータを表示させるのか
- どうやって条件分岐させたりリストを作成するのか
- どうやってイベントに反応させたり表示内容を更新したりさせるのか
- どうやってコンポーネント達にデータを共有させるのか
コンポーネント達を作ったり、囲ったりする
Reactアプリは複数のコンポーネントによって形作られていきます。１つ１つのコンポーネントは UI (ユーザに表示させる面) の断片であり、独自の仕組みや見た目を持っています。ボタンみたいに小さいコンポーネントもあれば、ページ全体を成すコンポーネントもあります。
React のコンポーネント達は JavaScript の機能であり、彼らはマークアップを生成します。<syntaxhighlight lang="react" line="1"> function MyButton() {
return ( <button>I'm a button</button> );
}
</syntaxhighlight>今、あなたは MyButton を作ったので、これを別のコンポーネントの中に入れてみましょう。<syntaxhighlight lang="react" line="1">export default function MyApp() {
return (
Welcome to my app
<MyButton />
);
}</syntaxhighlight><MyButton /> が大文字で始まっていることに気付くでしょうか。これによって、あなたはこれが React のコンポーネントだと知ることができます。React のコンポーネントは必ず大文字で始めるべきです。HTMLタグは全て小文字ですが。
さて、結果を見てみましょう。
<iframe src="https://codesandbox.io/embed/vs9srv?view=split&hidenavigation=1"
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
title="react.dev"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
上記 export default によって、ファイルのメインとなるコンポーネントを決めることができます。もしあなたが JavaScript の書き方に慣れてないなら、MDN と javascript.info は最高の情報源になります。
JSX を使ってマークアップを書こう
上の例であなたが見たマークアップの書き方は「JSX」と呼ばれます。JSX はオプション的な機能ですが、便利なのでほとんどの Reactプロジェクトで利用されます。私たちがオススメする全ての開発ツールで JSX はサポートされています。
JSX は HTML より厳格です。あなたはきちんと <br /> のようにタグを閉じる必要があります。しかも、あなたが作るコンポーネントは複数の JSXタグを生成できません。複数の JSXタグがある場合は、それらを共通の親タグ、<div>...</div> や、空文字の <>...</> で包んであげる必要があります。