React を Symfony プロジェクトに統合するにはどうすればよいですか?

皆さんこんにちは。この記事をクリックしていただきありがとうございます。 🙂

開発者コミュニティでは、PHP 対 JavaScript という、長い間激化している議論があります。

そのような議論の関連性は無視しましょう（各テクノロジーには長所と短所があります）、今日私は完全な異端を認識することにしました。 😛

React (つまり Javascript Front ライブラリ) を Symfony プロジェクト (PHP に戻ったフレームワーク) 内に統合する方法を見ていきます。 😀

「それはちょっと直感に反していませんか？」

必ずしもそうとは限りませんが、その理由はすぐにわかります。

JS フロントと PHP バックを選択する理由は何ですか?

ここでも、最初の議論と同様に、すべては好み、選択、プロジェクトのニーズとの関連性の問題です。

私としては、新しい micro-SAAS を作成したいときに次のようなジレンマに直面しました。

• 一方で、私はトレーナーとして行ったコースに従って React をさらに深く掘り下げましたが、このライブラリが非常に実用的でよく書かれていると感じたことを思い出しました。さらに、インターフェイスには非常に応答性が高く、非常に流動的なものが必要だったので、それが最良の選択であるように思えました。

• はい、しかしその一方で、ルーティングやデータなどを管理するためのバックエンドが必要でした。最も推奨されている Next.js を使用することもできましたが、SAAS に必要な複雑な処理を行うのに多くの時間を無駄にすることに気づきました。バックエンドとして、私のお気に入りのフレームワークである Symfony を選択しました 😛

おそらくご存知のとおり、Symfony はいくつかのバージョンで、アプリケーションのフロントエンド部分を管理するために、npm または Yarn に加えて Webpack を使用してきました。したがって、React はプロジェクトの初期化と依存関係の管理に同じものを使用するため、これによりタスクが簡単になります。

したがって、通常どおり Symfony プロジェクトを初期化し、完了したら、同じプロジェクトに React の依存関係を直接インストールします。これについては、公式ドキュメントで説明されています React を既存のページの一部として追加する方法。

これらの手順を実行すると、問題はないと考えられます。React がインストールされ、プロジェクトに準備が整っています。

「はい、でも Symfony にはまだブランチが表示されているので、まだ終わっていません。」

まさに、Symfony と React の間の接続が失われています。 😛

これを行うには、まず tsconfig.json ファイルを編集して以下を追加する必要があります。

これにより、React が実行されるコンテキストに起因する一部のビルド エラーが回避されます。

また、webpack.config.js ファイルを編集し、次の行のコメントを解除する必要があります。

ほら！ 🎉

“何 ？それだけですか？そこで React は機能しますか?」

そして、はい！ 😀 これをテストするにはどうすればよいですか? main ブランチ ファイルを次のように編集します。

次に、Symfony プロジェクトのアセットに、以下を含む JS ファイルを通常どおり追加します。

これで、ホームで React コンポーネントをレンダリングできるようになり、ブランチにつながるページに表示されることがわかります。

すべてがどのように正確に組み合わされるかをまとめた図を作成しました。

• ルーティングは Symfony によって古典的な方法で管理されます。ルート/コントローラーに到達するとブランチファイルが与えられます

• Index.html.twig ビューには、先ほどと同様に ID が定義された div があります。

• この ID はアセット内に存在するindex.js ファイルによって検出され、div はコンポーネントをレンダリングするために React によってルートとして使用されます。

• ここで React に切り替えます。React は、index.html.twig で定義された場所にあるページに自然に表示される問題のコンポーネントを管理およびエクスポートします。

それだけです、とても簡単ですよね？ 😛

メリットとデメリット

前に述べたように、このスタックの組み合わせは個人的なニーズに合わせて作成しました。したがって、私の利点は誰にとっても同じではありませんが、ここでは次のような問題がありました。

• ほとんど知識のないバックエンドの構成に時間を費やすことを避ける

• React エコシステム全体 (次のようなコンポーネント ライブラリ) を活用する @mui/material 例えば。

• Symfony の堅牢性とスケーラビリティと、React の速度と応答性 (😀) を組み合わせた、両方の長所を維持します。

欠点は次のとおりです。

• 明らかに、初期設定は少し混乱し、いくつかのエラーに遭遇する可能性があります。

• Symfony と React の間のデータ転送 (ただし、Symfony を API として使用する場合、この部分は非常に古典的になる可能性があります)

この記事の結論として、たとえ非常に異なるテクノロジーや、通常は反対の世界から来たものであっても、開発では多くのことが常に可能であることがわかります。

Facebook や Google のような巨大なプラットフォームは、複数の言語と相互間の接続で動作していることを忘れないでください。場合によっては、左右に掘り下げることでより効果的なツールを利用できる場合でも、エコシステムに自分を閉じ込めるべきではありません。

これが何よりも私がここでの実験で示したかったことです。 🙂

これで、TypescriPHP の作業に戻るつもりです。またすぐにお会いしましょう。 😛