はじめに
Reactで開発してきましたが、基礎の部分を一度見直そうと思いまとめました。
そもそもJSXとは、なんぞやというところにフォーカスしましたので皆さんの参考になれば幸いです
JSXとは
JSXとは、簡単にまとめるJavaScript内でHTML要素をHTMLっぽく書くための公文です。
JSXを使用するメリットは、ずばり__可読性があるからです__。
以下に、JSXを使用した場合と使用しなかった場合などの書き方をまとめてみました。
JSX使用しなかった場合
通常のJavaScriptでHTMLを書いてみる以下の様になります。
const fuga = "<h1>Holle</h1>"
const fuga2 = "<h2>World</h2>"
const fuga3 = "holle world"
document.getElementByID('hoge1').innerHTML = fuga
document.getElementByID('hoge2').innerHTML = fuga2
document.getElementByID('hoge3').innerText = fuga3
この程度の量でしたら、問題ないかもしれませんが、もっと記述量が増えるとちょっと読みずらそうですね。
JSXで記述するとどうなるか
先ほど記述をJSXを用いて書いてみると、以下の様になります。
return(
<React.fragmnet>
<div id="hoge">
<h1>Holle</h1>
</div>
<div id="hoge2">
<h2>World</h2>
</div>
<p id="hoge3"> holle world </p>
</React.fragmnet>
);
恐らく、JSXを使用した場合の方がHTMLっぽくて何を書いているのがパッとわかりやすいかと思います。
JSXはJavaScriptの拡張言語だが、JavaScriptではない
ここから、JSXを深堀って行きます。
まず、JSXの公文をブラウザは読み込めない。
なぜなら、 JSX ＝ JavaScriptではないからです。
本来であれば、JavaScriptをブラウザがファイルを読み込んで実行するが、JSXのファイルをそのまま読み込ませようとするとエラーが出ます。
ブラウザがJSXを読み込める様にするためにはトランスパイラします。
EX)イメージは
JSX➡︎JavaScript
有名な、トランスパイラがBabel、CoffeeScript,など、、、
もう少し深掘り
もし、ReactでJSXを使わずにHTMLを書こうとすると、React.createElementメソッドを使う必要がある。
React.createElement(
"h1",
null
"Hello,Wolrd"
);
//そもそもはこの書き方が、公文通り
この様に書いていれば、ブラウザはJavaScriptとして読み込んでくれます。
しかし、HTMLっぽくを書いていないので直感的にわかりにくいですね。
本来はこの様な書き方になっているのでトランスパイルで出力したJavaScriptのデータの中身をみてみると、上記の様に出力されている。
つまり、JSXを文法通りに書くと公文を上記の様に変換してくれて正しく読み込んでくれるわけです。
JSXの文法
まず、JSXを使用するにはReactのパッケージのインストールが必須です。
文法①
//.jsxファイル内に先頭で宣言
import React from "react"
文法②
//コンポーネント内にHTMLを書く
const App = () => {
return(
<div id="hoge" className="fuga">
<h1>Hello,Wolrd</h1>
</div>
);
};
文法③
//変数、関数を埋め込みたい場合
//{}に埋め込む事で表示できる
const fun = "<h1>Hello World</h1>"
const App = () => {
return(
<div id="hoge" className="fuga">
{fun}
</div>
);
};
{}内のものがJavaScriptになるイメージ。
文法④
ここら辺は、ちゃんと認識していなかった点。
変数名などは、基本キャメルケースで書く。
文法 ⑤
要素は、必ず閉じる。
普通のHTMLでは、あまり使わないから忘れがちになるやつですね。
<input type="text" id="huga" />
// />の様に書く事
#終わりに
Reactを書いてく中で、なんとなく理解している部分が多かったので調べてまとめてみました。
調べてみると、Reactって使いやすくて便利なんだな思いました！！
他にも記事を書いていこうと思いますので、参考になれば幸いです。
間違っている点がありましたら遠慮なくコメントください