はじめに
PHPファイルにReactを組み込む方法についてご紹介します。CDNを利用することで、npmインストールする必要がなく、手軽にReactを導入できます。
ReactのCDNは本番用と開発用があります。本記事は開発用を使用しますが、本番環境では本番用のCDNを使用してください。
コード
PHPファイルにReactを組み込む方法
headタグ内で、ReactとReactDomとbabelをCDNで読み込みます。
<script type="text/babel">はブラウザ上でJSXを直接実行するために使用されるスクリプトタグです。
index.php
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App = () => {
return (
<div>
<h1>Hello World!!</h1>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
コンポーネントを別ファイルに分ける方法
scriptタグで、jsxファイルを読み込みます。
index.php
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
// コンポーネントを分けたファイルを読み込む
<script type="text/babel" crossorigin src="/components/App.jsx"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
components/App.jsx
const App = () => {
return (
<div>
<h1>Hello World!!</h1>
</div>
);
};
propsでデータを渡す方法
PHPで扱っている値をReactで使用する場合は、JSONデータをJavaScriptの変数に代入することで使えるようになります。
index.php
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" crossorigin src="/components/App.jsx"></script>
</head>
<body>
<div id="root"></div>
<?php
$data = [
"message" => "Good Night."
];
// JSONデータに変換
$jsonData = json_encode($data);
?>
<script type="text/babel">
// PHPのJSONデータをJavaScriptの変数に代入
const data = <?php echo $jsonData; ?>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App data={data} />);
</script>
</body>
components/App.jsx
const App = ({ data }) => {
return (
<div>
<h1>Hello World!!</h1>
<p>{data.message}</p>
</div>
);
};
まとめ
CDNを利用して、PHPファイルにReactを組み込む方法をご紹介しました。CDNは手軽で便利ですが、大規模なアプリケーションでは依存関係の管理やセキュリティの問題があるので、小規模なプロジェクトで使うことをおすすめします。
参考
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。