まとめ
JSXとは、JavaScriptの構文拡張であり、React.jsのコンポーネントを記述するために使用されます。HTMLのような構文を使用してUIを記述できるため、React.jsでの開発がより直感的になります。
目次
参考ソースコード
index.js
<!DOCTYPE html>
<html>
<head>
<script src="../../../../libs/react.development.js"></script>
<script src="../../../../libs/react-dom.development.js"></script>
<script src="../../../../libs/babel-standalone.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
// POINT ReactをHTMLにマウントする書き方
const appEl = document.querySelector("#app");
const root = ReactDOM.createRoot(appEl);
root.render(<h1>こんにちは</h1>);
// POINT React18以前の書き方
// ReactDOM.render(<h1>こんにちは</h1>, appEl)
</script>
</body>
</html>
【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript
JSXを使用するメリット
- UIコンポーネントの作成がより簡潔で読みやすくなります。
- JavaScriptとの統合が容易になり、動的なコンテンツのレンダリングや条件付きレンダリングが容易になります。
JSXの基本構文
- JSXはHTMLとJavaScriptを組み合わせたような構文を持っています。
- HTML要素や属性を記述する際は通常のHTMLと同様に記述します。
index.js
<div id="app"></div>
<script type="text/babel">
- JavaScriptの式を埋め込むこともできます。（React18以前と以降で記載方法が異なる）
index.js
// POINT ReactをHTMLにマウントする書き方
const appEl = document.querySelector("#app");
const root = ReactDOM.createRoot(appEl);
root.render(<h1>こんにちは</h1>);
index.js
// POINT React18以前の書き方
const appEl = document.querySelector("#app");
ReactDOM.render(<h1>こんにちは</h1>, appEl)
JSXのコンパイル
ブラウザはJSXを直接理解できないため、JSXをJavaScriptに変換する必要があります。Babelなどのツールを使用することで、JSXを通常のJavaScriptに変換することができます。
※以下はBabelのソフトを読み込む際に必要なコード例
index.js
<!DOCTYPE html>
<html>
<head>
<script src="../../../../libs/babel-standalone.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const appEl = document.querySelector("#app");
const root = ReactDOM.createRoot(appEl);
root.render(<h1>こんにちは</h1>);
</script>
</body>
</html>