こんにちは。
アイレットデザイン事業部、フロントエンドエンジニアの辻と申します。
今記事では
(自分にもニーズがあるか不明ですが)React を部分的に導入してみます。
なぜ React を部分導入しようと思ったのか
以前 Vue を部分導入しループ処理を記述したところ、場面によっては部分導入もありだなと感じました。
そのことから、React でも部分導入できるのか?とふと思ったのがキッカケです。
もう 1 つは、筆者が React に疎く、気軽に使えるところから勉強してみよう。というのも理由です。
React の導入
まずは head
内で React(CDN)を読み込みます。
<head> <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script> </head>
上記は本番用 CDN であり、開発用も用意されています。
開発用はデフォルトで警告チェックなどを行ってくれるため、開発時はそちらを利用する方が良いかもしれません。
今回はひとまず動かすことが目的で簡単なことしかしないので、パフォーマンスの良い本番用で進めます。
Babel の導入
React で使われる JSX に対応するため Babel(CDN)も読み込みます。
<head> (略) <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head>
上記は、CDN で React を部分導入する場合は必要ですが、Node.js で React 環境を用意する場合は必要ありません。
これで React を部分導入するための準備はできました。
HTML を書く
ヘッダー・フッターを共通化し、React で用意するという場面を想定します。
<div id="header"></div> <div id="main">HTMLで記述したindexコンテンツ</div> <div id="footer"></div>
比較のため About ページも用意
<div id="header"></div> <div id="main">HTMLで記述したaboutコンテンツ</div> <div id="footer"></div>
さらに、ヘッダー・フッター用の JS ファイルも読み込んでおきます。
<head> (略) <script src="components.js" type="text/babel"></script> </head>
ここで type="text/babel"
を忘れずに記述して下さい。
これがないと React が正常に動きません。
JavaScript を書く
先ほど読み込んだ components.js
を書いていきます。
// ヘッダー const Header = () => { return <div>Reactで記述したヘッダー</div>; }; ReactDOM.createRoot(document.getElementById("header")).render(<Header />); // フッター const Footer = () => { return <div>Reactで記述したフッター</div>; }; ReactDOM.createRoot(document.getElementById("footer")).render(<Footer />);
細かな JavaScript の記述方法の解説は省きますがreturn <div>●●</div>;
が JSX の記述です。
ReactDOM.createRoot()
に任意の DOM 要素を渡し
さらに .render()
に任意の React 要素を渡すことでレンダリングされます。
結果がこちら。
index.html
about.html
ヘッダーとフッターがレンダリングされていることがわかります。
まとめ
React を部分的に導入する方法を解説しました。
今回の内容程度のことは素の JavaScript でも実装可能ですし、正直これだけだと React を使うメリットは薄いですが
React である必要性やメリットを理解し、使っていきたいと思います。