コンポーネントとJSX
なぜ学ぶか： AIに「画面を作って」と頼むと、HTMLのようで少し違うコードが返ってきます。これがReactのコンポーネント。「画面は関数でできている」という発想がつかめると、何百行のUIコードも怖くなくなります。まずは例から。
まずはこの例を見てみましょう
// コンポーネント = 「画面の部品」を返す関数
function Greeting() {
const name = "Ada";
return (
<div>
<h1>こんにちは、{name}さん</h1>
<p>今日も学んでいきましょう</p>
</div>
);
}
// 画面には「こんにちは、Adaさん」と表示されるHTMLに見える部分がJSX。波カッコ{ }の中にはJavaScriptが書けます。
コンポーネント＝画面の部品を作る関数
例のGreetingは「あいさつ部分の見た目」を返す関数です。ボタンもヘッダーもページ全体も、ぜんぶこの形で作ります。
JSX＝JavaScriptの中に書くHTML風の書き方
returnの中の<div>...</div>がJSX。HTMLに見えますが、正体はJavaScriptの一部です。
{ }の中はJavaScript
例の{name}の場所には、変数nameの中身（Ada）が表示されます。これが「ただのHTML」との決定的な違いです。
大文字始まりは自作の部品
<Greeting />のように大文字で始まるタグは自作の部品、<div>のような小文字は元々のHTMLタグです。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。