JSXの基礎文法〜最低限知っておきたいルール〜

はじめに

初めてJSXファイル(TSX含む)を見て、何がなんやらわからない人に向けて、JSXの基礎中の基礎を書かせていただきます。

JSXの基礎文法

reactライブラリをimportする

JSXは必ずreactライブラリをimportする必要があります。実際のソースコードから下記の記述があることを確認してみてください。

import React from 'react';

return文の中がJSXの記法

基本的にはHTMLと同じ書き方となります。その認識をもった上でソースコードを読んでみてください。
ただし一部違うこともありますので注意してください。(例:HTMLのclassはJSXだとclassNameとなります。)

キャメルケースで記述する

JavaScriptは-(ハイフン)を読み取ることができないため、キャメルケースで記述する必要があります。
もしソースコードに手を加えるとなった際は間違えないよう注意してください。

｛｝内はJavaScriptの世界となる

｛｝内はJavaScriptの記述を使うことができます。
const ◯◯で定義した変数などを｛｝内で使うことができます。

JSXは必ず階層構造になっていなければならない

JSXはreturn文の直下に複数のタグを置くことはできません。(最上位コンポーネントは並列にできない。)
※ターミナルにエラー文が出力されます。
そのためreturn文直下が複数のタグになる場合は、< React.Fragment >< / React.Fragment >で囲むか、もしくはReact.Fragmentの省略形である<> < />(空タグ)で囲ってください。

return (
 <React.Fragment>
　　<p>サンプル文章</p>
　　<p>サンプル文章</p>
</React.Fragment>
)

これでもいけるし、、、、

return (
 <>
　　<p>サンプル文章</p>
　　<p>サンプル文章</p>
</>
)

こっちでもOK。(これよく見る。)

最後に

まだまだ分からないことが多いので、引き続き勉強していき、わかったことがあればまた追加で記事投稿していきます！