Reactの基礎の基礎 #01Reactとは、JSXとは

Reactとは

Facebook社が開発したJavaScriptのライブラリです。
比較対象にされることが多いVue.jsはフレームワークとなります。
フレームワークのほうが大きい枠となるんですが、ライブラリのReactが比較対象になっているのがすごいっぽい。
既存のWEBページにReactの一部を組み込むことが可能です。
VirtualDOMでDOM操作を行うことができる。変更された差分だけを再描画するのでパフォーマンスがあがります。

JSX とは

こちらもFacebook社が開発したJavaScript内でHTMLを簡単に記述するための言語となります。
可読性の高い言語なのがうれしい。ただブラウザでは解釈できないので変換する必要があります。
それをトランスパイルと呼んでおり、有名なのがBabelやTypeScriptなどがある。

return(
 <>
  <h1 className="title">Reactの勉強中</h1>
 <>
)

トランスパイルを使わずにReactを記述すると下記のように非常に可読性の低い文章となる。
（JSXで記述したコードをトランスパイルを使って変換すると、下記のコードになっている）

React.creatElement(
 "h1",
 { className: 'title'},
 "Reactの勉強中です"
);

jsxの文法

①Reactパッケージのインストール

import React from "react"

②class, for, onclickの記述方法

//クラス
NG:class
OK: className
//for
NG:for
OK: htmlFor
//クリック
NG:<button onclick="activate()">アクティブ</button>
OK:<button onClick={activate}>アクティブ</button>

③{}内に変数や関数を埋め込むことができる

const foo = "<h1 className="title">Reactの勉強中</h1>"
const App = () => {
 return (
  <div id="hoge" className="fuga">
   {foo}
 </div>
);
};

④空要素は閉じタグをつける

const App = () => {
 return (
  <div id="hoge">
   <input type="text" />
   <img src="assets/foo.png" />
  </div>
);
};

まとめ

こちらの動画を見ながらまとめた記事となります。
Reactの学習をしていて、かなりつまづいているのですがひとつずつ理解を深めていくしかないですね。