PHPファイルにReactを組み込む方法

## はじめに

PHPファイルにReactを組み込む方法についてご紹介します。CDNを利用することで、npmインストールする必要がなく、手軽にReactを導入できます。

:::note warn
ReactのCDNは本番用と開発用があります。本記事は開発用を使用しますが、本番環境では本番用のCDNを使用してください。
:::

## コード

### PHPファイルにReactを組み込む方法

`head`タグ内で、ReactとReactDomとbabelをCDNで読み込みます。

`<script type="text/babel">`はブラウザ上でJSXを直接実行するために使用されるスクリプトタグです。

```php: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>
```

![スクリーンショット 2025-03-30 21.14.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/ed82512a-03ec-41ec-b025-c529f4003896.png)

### コンポーネントを別ファイルに分ける方法

`script`タグで、jsxファイルを読み込みます。

```php: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>

  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
```

```jsx:components/App.jsx
const App = () => {
  return (
    <div>
      <h1>Hello World!!</h1>
    </div>
  );
};
```

### propsでデータを渡す方法

PHPで扱っている値をReactで使用する場合は、JSONデータをJavaScriptの変数に代入することで使えるようになります。

```php: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>
```

```jsx:components/App.jsx
const App = ({ data }) => {
  return (
    <div>
      <h1>Hello World!!</h1>
      <p>{data.message}</p>
    </div>
  );
};
```

![スクリーンショット 2025-03-30 21.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/2108746f-e49a-4724-964f-8570b951587e.png)

## まとめ

CDNを利用して、PHPファイルにReactを組み込む方法をご紹介しました。CDNは手軽で便利ですが、大規模なアプリケーションでは依存関係の管理やセキュリティの問題があるので、小規模なプロジェクトで使うことをおすすめします。

## 参考

https://ja.legacy.reactjs.org/docs/cdn-links.html

https://babeljs.io/docs/babel-standalone

## 最後に

### GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。

https://goqsystem.recruit.site?qiita=1be65206fe96f8f3c52c