10月中旬に会社の健康診断がありました。
久しぶりの健康診断で恐る恐る体重計に乗ったのですが、新卒のときと比べて5,6キロ増加しておりました(涙)
デスクワークということもあるので本気で運動をしないとまずいなと感じた秋の始まりでした。
それでは今回は前回の続きということでSymphonyとReactの連携について備忘録を残していこうと思います。
バンドルのインストール
StimulusBundleのインストール
SymphonyとReactを使用するためにSymfony UX React Bundleが必要です。
そのためにStimulusBundleが必要なため、下記コマンドでインストールします。
composer require symfony/stimulus-bundleWebpack Encore bundleのインストール
Reactのファイルをコンパイルするための機能を追加する必要があります。
Symfony UX React Bundleではドキュメントを確認すると、「This package works best with WebpackEncore」
と記載があるのでWebpackEncoreのバンドルを使用します。
ただ初期ではAssetMapperという別のバンドルが搭載されているので切り替え作業をしていきます。
AssetMapperの削除
下記コマンドにてAssetMapperを削除します。
composer remove symfony/ux-turbo symfony/asset-mapperWebpackEncoreの追加
下記コマンドでWebpackEncoreを追加します。
composer require symfony/webpack-encore-bundle symfony/ux-turbo依存関係リフレッシュ
下記コマンドにて依存関係をリフレシュし、WebpackEncoreに合わせる。
// npmの場合
npm install --force
// yarnの場合
yarn install --forceSymfony UX React Bundleのインストール
下記コマンドでバンドルインストールします。
composer require symfony/ux-reactReact用のパッケージインストール
下記パッケージをインストールしていきます。
// npmの場合
npm install -D @babel/preset-react --force
// yarnの場合
yarn add @babel/preset-react --dev --forceこれで準備は整いました！
プロジェクトのassetsディレクトリにapp.jsがあるので、このファイルを元に
/assets/react/controllersの中身コンパイルしてSymphonyのテンプレートに組み込んでいきます。
Reactのファイルのコンパイル
下記スクリプトでファイルをコンパイルします。
// npmの場合
npm run watch
// yarnの場合
yarn encore dev --watchSymphonyのテンプレートに埋め込む
下記のようにテンプレートに埋め込み、Symphonyのコントローラーでテンプレートをrenderすると無事表示されました(涙)
{# レンダリングするテンプレートは別途用意する必要があります。#}
{# templates/home.html.twig #}
{% extends 'base.html.twig' %}
{% block body %}
<div {{ react_component('Hello(表示したいファイル名)', { fullName(プロパティ): 'Fabien' }) }}>
Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
</div>
{# Component living in a subdirectory: "assets/react/controllers/Admin/OtherComponent" #}
<div {{ react_component('Admin/OtherComponent') }}></div>
{% endblock %}終わりに
少し長くなりましたが、自分は上記で実装することができました。
Symphony自体触れることが少なく、実装までに時間がかかってしまいました。
ドキュメントも英語ばかりなので気力が必要そうです・・・
それではこのあたりで失礼いたします👋