JSXって何だろう？
最近Reactを使い始めました。いや全然使えていないのですが、こまけーことは無視しながらフロントエンド全体の開発の流れを理解しようとしているところです。
ただ、下のようなコードを書いただけでなんでレンダリングされるのかは調べられずにはいられませんでした。return以降、JSXという仕組みで動いているそうなのですがJSXとはなんぞやということで調べてみました。
export default function Page() {
return <h1>Hello, World.</h1> // これだけでなんで表示されるのよって感じで違和感ありあり
}
JSXとは？
まずはドキュメントを確認
JavaScriptの拡張機能でありReactとは関係がない。そして書き方がHTMLより厳密と。
ReactはJSXが必須ではないけど、実質的にJSXを使った方が可読性も良いし便利なのかも？
JSX とは JavaScript の拡張であり、JavaScript ファイル内に HTML のようなマークアップを書けるようにするものです。コンポーネントを書く手段はほかにも存在しますが、ほとんどの React 開発者は JSX の簡潔さを好んでいるため、ほとんどのコードベースで JSX が使われています。
JSX は HTML ととてもよく似ていますが、より構文が厳密であり、動的な情報を表示することができます。
React コミュニティ
JSXをJavaScriptに変換
JXSをJSXコンパイラがJavaScriptに変換
return <h1>Hello, World.</h1> // JSX
↓
return React.createElement(
'h1',
null,
'Hello, World.'
)JavaScriptとして実行
ブラウザがJavaScript (ピンク色のコード) を実行してReact要素をレンダリング？
まとめ
む、むずい🙄
ただ、こういう何故こういう動きになるのかといったところは大事だと思うので面倒くさがらずに調べていきたいです。
わかったこと
- JSXを使えばHTMLぽく書けて、書きやすい読みやすいで開発が捗る、
- JSXコンパイラとやらが裏で仕事をしてくれるおかげでブラウザで表示できている