Reactを学び始める。【JSXの記法について】 -

この記事は、YoutubeやTwitterで、プログラミング学習に関する発信をされている、「トラハック」さんのYoutubeチャンネルにある「新・日本一わかりやすいReact入門【基礎編】JSXの記法」という動画の自分なりのまとめになっています！

トラハックさんのYoutubeチャンネル↓

トラハックさんのTwitterアカウント↓

今回参考にさせて頂いた動画↓

・javascriptの拡張言語

・HTMLライクな記述　＋　javascriptの構文が使える。

・JSXは最終的にReact要素を生成する。

なぜJSXを使う？

・JSXを使うとHTMLライクにコードが書ける（簡単に書ける）から。

JSXを使わない場合は、React .createElementでReact要素を生成しなければならないが、JSXの場合この記述がいらない。

上記の二つの構文は等価　＝　同じ結果となる。

　1, JSX→React ,createElementの式に変換

　2, React要素を生成

（※コンパイルとは、ある言語で書かれたものを別の言語に置き換える、変換するという意味）

・React.createElementを使った構文は直感的でない

　→JSXを使うことで楽に記述できる。（強い）

1, Reactライブラリをimportする

2, return文の中がJSXの構文で、記法は基本的にはHTMLと同じ（classはclassNameと書く）

（※JSXを記述するファイルの拡張子は「.js」もしくは「.jsx」と表すことができるが、ファイルの中身をわかりやすくする為に「.jsx」とすると良い）

1, キャメルケースで記述する（image_pathのような書き方ではなく、imagePathのような書き方）

2, {}内で変数を扱える（{}の中はjavascriptの世界てこと！）

3, 閉じタグが必要（ないとエラー吐くで！）

1, JSXは必ず階層構造

　最上位の要素は並列にできない

2, React.Fragmentで囲む（<React.Fragment></React.Fragment>みたいな感じ！）

　→この記述はHTMLタグとして出力されない、ないものとして扱われる。

3, React.Fragmentは省略形で書ける（<></>でおけ！）

以上！トラハックさんのチャンネルにある「新・日本一わかりやすいReact入門【基礎編】ReactのJSXの記法」という動画の自分なりのまとめでした！

最高にわかりやすい動画でした！トラハックさんありがとうございます！

トラハックさんのYoutubeチャンネル↓

トラハックさんのTwitterアカウント↓