Laravel
[Laravel × React] PHPで作り込んだ共通ヘッダーをReactで使いたい！
はち
更新日:2021/08/04
前回に引き続きゴスケです。
Laravel×Reactで社内システムの開発をすることになったゴスケの頭に浮かんだ一つの疑問点。
「社内システムで共通化しているヘッダー部分はPHPで作り込んでいるけど、これそのままReactに使えるのだろうか。。。？」
ということで、今回はReactを使った開発で、PHPで作り込んだ共通ヘッダーとReactをどのように共存させるのかご紹介します！
（誰も疑問に思ってないかも。。。）
結論
話は簡単、Reactのコンポーネントを読み込むHTMLファイルをphpファイルにして、共通化しているphpモジュールを読み込めば終了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php require_once(__DIR__ . "/util/CommonHeader.cls"); ←共通ヘッダー $commonHeader = new CommonHeader(); ?> <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> </head> <body> <div id="header"> <?= $commonHeader->show(); ?> ← 共通ヘッダーをロードする場所 </div> <div id="app"></div> ← Reactをロードする場所 </body> </html> |
前回記事をもとにLaravel×React環境を構築していただいている方はそのまま「welcome.blade.php」に追記していただければ完了です！
Reactも最終的にはHTMLから読み込まれる
Reactは最終的にjavascriptファイルにビルドされ、それはHTMLファイルから読み込まれます。そのため、今回のようなヘッダーやフッターは既存のPHPやHTMLファイルを流用し、Body部分だけReactで記述するということが可能です。
もっといえば、ポップアップで表示されるwindowだけReactで書くとかも全然できます。
過去資産からReactに乗り換えるにしてもいきなり全部は難しいってときは、今回のように段階的に適用範囲を広げていってはどうでしょうか？
