More than 3 years have passed since last update.

React 入門道場　~特殊なJSXの構文~

Last updated at 2021-08-31Posted at 2021-08-30

はじめに

Reactを学習していてJSXについて理解が浅かったので今回簡単ににまとめてみました。
今回は特殊なJSXの構文についてまとめてみました。

自分自身、下記の３つのコードを説明するほど理解していなかったので要点をまとめることにします

①

return (
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
)

②

return (
  <React.Fragment>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </React.Fragment>
)

③

return (
  <>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </>
)

1.JSXは必ず階層構造でなければならない！
最上位のコンポーネント或いはタグを書く必要がある。

これを踏まえた上で、先程の①では最上位のコンポーネント或いはタグの記載がありません。

Error

return (
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
)

かと言って、別の方法としてdivタグで囲ってしまうのいけません！HTMLではdivタグはなんの意味もなく、必要ないものにはdivタグを使用しない方が良い
理由として、HTMLで出力した際にCSSの崩れが無くなるからである。

   return (
　　　　　　　 <div>
      <p>{caption}</p>
      <img src={samplePath} alt={'sample写真'} />
    </div>
  )
}

return (
  <React.Fragment>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </React.Fragment>
)

先程、divタグは使いたくない時の対処法としてReact.Fragmentを使います！
先程挙げた条件としての、JSXは必ず階層構造でなければならない！っていうのもクリアしてますね

最終的にHTMLに出力した際は、React.Fragmentがなかった事として出力される。

return (
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
)

並列で使用する際はReact.Fragmentを使いましょう

return (
  <React.Fragment>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </React.Fragment>
)

return (
  <>
   <p>サンプルコードです</p>
   <p>特殊なJSXの構文の学習</p>
  </>
)

return (
  <>
   <p>サンプルコードです</p>
  </>
)

よく間違った使い方として、タグが一つしかないのにReact.Fragmentをしてしているケースがある。これだと意味をなさない。pタグひとつで良い。React.Fragmenは二つ以上で並べる時、階層構造のルールあるので上位のタグを使用する際に使用する

日本一わかりやすいReact入門【基礎編】JSXの記法