はじめに
初めて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。(これよく見る。)
最後に
まだまだ分からないことが多いので、引き続き勉強していき、わかったことがあればまた追加で記事投稿していきます!