前回はAngularJSをつかってVisualforceページを開発するときの流れを確認しました。今回はReactをつかったVisualforceページ開発について確認したいと思います。前回のPart2はこちら。はじめにAngularJSは必要なファイルを静的リソースにアップロードするだけで開発を進めることができました。Reactで開発する場合、ビルドの作業が必要になります。そのため、GulpやWebpackといった開発環境が必ず必要になります。・・ということで今回の話が一番メインの話です。NPMパッケージのインストール無くても大丈夫なものも含まれているかもしれませんが、以下のパッケージをインストールします。--save-devReactまわりのフォルダ構成フォルダ構成です。reactフォルダの中に必要なファイルをまとめます。modulesに各コンポーネントentryにビルド前のファイルbuildにビルド後のファイルビルドはWebpackをつかって行います。静的リソースにはビルド後のファイルのみアップロードします。modulesはこのようになります。webpack.config.jsはこんな感じです。静的リソースへのアップロード上記のフォルダ構成と設定ファイルを用意したら次のコマンドでビルドを実行できます。webpackビルド後のファイルは静的リソースにアップロードします。2のときと同じようにdevstaticresourcesフォルダにまとめてデプロイコマンド実行します。deployこれでReactのビルド後のファイルを静的リソースにアップロードできました。Visualforceページの作成ReactでつくったJSファイルを静的リソースにアップできたのでいよいよVisualforceページを用意します。今回用意するデモページは以下のとおりです。ReactBoard.pageReactCounter.pageReactDiscussion.pageReactHome.pageReactSlick.pageReactTodo.page例えばReactBoard.pageの場合はこんな感じになります。作成後、そのURLにアクセスしてみると無事に表示されました。いうことでReactコンポーネントをつかってVisualforceページをつくることができました。各コードの詳細は最後に記載するGitHubへのリンクを確認してください。リンクURLについて別のVisualforceページへのリンクを用意する場合、URLが『/apex/pagename』となるので注意してください。JS処理を静的リソースに用意する場合は『{!$Page.pagename}』という書き方は利用できません。静的リソースからの画像読み込みについてReactコンポーネントの開発で静的リソースにアップしてある画像を利用したりすると思います。そのときは次のような感じで指定する必要があります。xlinkHref="/resource/SLDS202/assets/icons/utility-sprite/svg/symbols.svg#home"></use></svg>bundle.jsの読み込みについてVisualforceでJSを読み込む際にはapex:inculdeScriptタグが用意されています。React開発で使おうとすると次のエラーが発生します。element.apexタグの開発向けに用意されているものだからだと思います。Reactで開発する際には普通のHTMLタグで対応するほうがいいみたいです。その他注意事項Salesforceの外でつくったページをVisualforceに載せるときにCSSのスタイルが崩れることがあります。標準スタイルシートをOFFにしていても発生すると思います。いうケースもあることを考慮しておくといいかもしれません。まとめ以上、ReactをつかったVisualforceページの開発についてまとめてみました。SalesforceでReactをつかった開発を行うときは以下の流れを行うことになります。するまで繰り返し今回、ビルドの実行からSalesforceへのデプロイまで毎回コマンドを実行して行いましたが、GulpやWebpackでうまく対応すればこのあたりはもっと自動化できたり、より改善したりできると思います。今回やったところを追加したサンプルコードはこちらです。