こんにちは。
アイレットデザイン事業部、フロントエンドエンジニアの辻と申します。
今記事では
(自分にもニーズがあるか不明ですが)React を部分的に導入してみます。
なぜ React を部分導入しようと思ったのか
以前 Vue を部分導入しループ処理を記述したところ、場面によっては部分導入もありだなと感じました。
そのことから、React でも部分導入できるのか?とふと思ったのがキッカケです。
もう 1 つは、筆者が React に疎く、気軽に使えるところから勉強してみよう。というのも理由です。
React の導入
まずは head
内で React(CDN)を読み込みます。
1 2 3 4 | < 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)も読み込みます。
1 2 3 4 | < head > (略) < script src = "https://unpkg.com/babel-standalone@6/babel.min.js" ></ script > </ head > |
上記は、CDN で React を部分導入する場合は必要ですが、Node.js で React 環境を用意する場合は必要ありません。
これで React を部分導入するための準備はできました。
HTML を書く
ヘッダー・フッターを共通化し、React で用意するという場面を想定します。
1 2 3 | < div id = "header" ></ div > < div id = "main" >HTMLで記述したindexコンテンツ</ div > < div id = "footer" ></ div > |
比較のため About ページも用意
1 2 3 | < div id = "header" ></ div > < div id = "main" >HTMLで記述したaboutコンテンツ</ div > < div id = "footer" ></ div > |
さらに、ヘッダー・フッター用の JS ファイルも読み込んでおきます。
1 2 3 4 | < head > (略) < script src = "components.js" type = "text/babel" ></ script > </ head > |
ここで type="text/babel"
を忘れずに記述して下さい。
これがないと React が正常に動きません。
JavaScript を書く
先ほど読み込んだ components.js
を書いていきます。
01 02 03 04 05 06 07 08 09 10 11 | // ヘッダー 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 である必要性やメリットを理解し、使っていきたいと思います。