web-dev-qa-db-ja.com

セットアップLaravel 5.4を使用してReact

Laravelが初めてではありませんが、JavaScriptフレームワークは初めてです。

Reactでlaravel=ビルドに使用したいが、これを行う方法に関する情報が見つからない。

Laravel 5.4。これには、Vue and Laravel Mixの代わりにMix。

私はここでチュートリアルに従っています： https://blog.tighten.co/adding-react-components-to-a-laravel-app しかし、これは5.4向けではありません。 gulpfileを更新する必要があると述べていますが、Laravel 5.4はGulpを使用していないため、ありません！

誰かがReact 5.4で動作するために複製する必要がある小さなチュートリアルやいくつかのステップを手伝ってくれますか？

Googledを使用しましたが、NPMリンクしか見つけることができません。

laravelreactjswebpackgulp
17
Wildcard27

必要なドキュメントの一部を指摘してくれたJoeに感謝します。それにはもう少しありましたので、他の誰かを助けるために以下の私のステップを説明します。

  1. node_modulesフォルダーを削除します。これは、新しいビルドには必要ありませんが、他のチュートリアルに従って不要なものをインストールした場合、いくつかの頭痛の種を節約できます。 node_modulesフォルダーがない場合は、この手順を無視してください。

    注意上記の手順により、NPMを使用してインストールしたものはすべて削除されます。

  2. プロジェクトルートからnpm installを実行します。これにより、Laravelが使用するすべてのNPMコンポーネントがインストールされます。

  3. webpack.mix.jsを開き、変更します。

    mix.js('resources/assets/js/app.js', 'public/js') 
    .sass('resources/assets/sass/app.scss', 'public/css');

    に

    mix.react('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

  4. npm run devを実行して、上記の質問に含まれるレッスンからJavascriptをコンパイルします。 React JS出力が動作するはずです。

  5. （オプション）npm run watchを使用して、オンザフライでコンパイルします。

これが私を助けてくれたのと同じくらい他の誰かの助けになることを本当に願っています！

24
Wildcard27

ドキュメントによると 、ReactサポートはMixに組み込まれています：

Mixは、Reactサポートに必要なBabelプラグインを自動的にインストールできます。開始するには、mix.js（）呼び出しをmix.react（）に置き換えます。

_mix.react('resources/assets/js/app.jsx', 'public/js');
_

舞台裏では、Mixは適切なbabel-preset-react Babelプラグインをダウンロードして組み込みます。

これが出力バンドルにReactを自動的に含めるかどうかは100％確信できません-私の推測はnoです（この場合、通常のmix.js()プルして呼び出す）。

5
Joe Clay