JSXのルール：式、属性、フラグメント
{ }を使ったJSX式、camelCaseの属性（className、onClick）、フラグメントによる複数要素の返却方法を学びます。
「JSXのルール：式、属性、フラグメント」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
JSX でできること
目標: JSX の基本を身につけます。式には { } を使い、camelCase の属性を適用し、フラグメントで兄弟要素をまとめます。
式と属性
式は { } の中に記述し、変数、関数呼び出し、単純な計算などを指定できます。属性には className、htmlFor、onClick のような camelCase を使います。
デモ: 式と属性
{ } を使って動的な値をレンダリングし、className／title／onClick を camelCase の属性として使います。
<div id="root"></div>
兄弟要素のフラグメント
フラグメントを使って複数の兄弟要素を返します。<>...</>または<React.Fragment>を使えます。フラグメントにより、余分なラッパー div を避けられます。
デモ：フラグメント
短い<>フラグメントを使って兄弟要素をまとめます。余分なDOMノードは生成されません。
<div id="root"></div>
ヒントと注意点
ヒント：
- { }内に記述できるのは式だけです（文は記述できません）。
- classではなくclassNameを使います。
- 不要なラッパー div よりもフラグメントを使うことを優先します。
JSXの式のルール
まとめ
まとめ：動的な値は{ }に入れ、属性にはcamelCaseを使い、フラグメントで兄弟要素をまとめてマークアップを整理します。
よくある質問
「JSXのルール：式、属性、フラグメント」レッスンは無料ですか？
はい。「JSXのルール：式、属性、フラグメント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「JSXのルール：式、属性、フラグメント」で何を学びますか？
{ }を使ったJSX式、camelCaseの属性（className、onClick）、フラグメントによる複数要素の返却方法を学びます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「JSXのルール：式、属性、フラグメント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- JSXのルール：式、属性、フラグメント
- リストとキー、条件付きレンダリング
- スタイリングの選択肢：CSS Modules、インラインスタイル、クラスヘルパー