设置 Laravel 5.4 以使用 React [英] Setup Laravel 5.4 to use React

问题描述

我对 Laravel 并不陌生，但对 JavaScript 框架很陌生.

I am not new to Laravel but am new to JavaScript frameworks.

我想在 laravel 构建中使用 React，但找不到有关如何执行此操作的任何信息.

I want to use React in a laravel build but cannot find any information on how to do this.

我有 Laravel 5.4.我知道这是预装了 Vue 和 Laravel Mix 而不是 Gulp.

I have Laravel 5.4. I know this comes pre-packed with Vue and Laravel Mix instead of Gulp.

我在这里学习教程:https://blog.tighten.co/adding-react-components-to-a-laravel-app 但这不适用于 5.4.它提到需要更新 gulpfile，但是由于 Laravel 5.4 不使用 Gulp，所以没有！

I am following the tutorial here: https://blog.tighten.co/adding-react-components-to-a-laravel-app but this is not meant for 5.4. It mentions needing to update the gulpfile but, since Laravel 5.4 doesn't use Gulp, there isn't one!

有人可以帮忙提供一个小教程或我需要复制的几个步骤以使 React 在 5.4 中工作吗?

Can someone please help with a small tutorial or a couple of steps that I need to replicate in order to get React working in 5.4?

我用谷歌搜索过，但只能找到 NPM 链接，这没什么用！

I have Googled but can only find NPM links, which are less than useful!

推荐答案

感谢 Joe 指出我需要的文档部分.它还有更多内容，因此将在下面描述我的步骤以帮助其他人.

Thanks to Joe for pointing out the part of the docs that I needed. There was a little more to it so will describe my steps below to help anyone else out.

1. 删除 node_modules 文件夹.这对于全新的构建不是必需的，但如果您遵循任何其他教程并安装了您不需要的东西，这将省去一些麻烦.如果您没有 node_modules 文件夹，请忽略此步骤.

1. Delete the node_modules folder. This isn't necessary for brand new builds but if you have followed any other tutorials and installed things you don't need, this will save a few headaches. If you don't have a node_modules folder, ignore this step.

请注意，上述步骤将删除您使用 NPM 安装的所有内容.

Please note that the above step will remove anything you have installed using NPM.

从项目根目录运行 npm install.这将安装 Laravel 使用的所有 NPM 组件.

Run npm install from your project root. This will install all NPM components used by Laravel.

打开 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');

运行 npm run dev 以编译上述问题中包含的课程中的 Javascript.你的 React JS 输出现在应该可以工作了.

Run npm run dev to compile the Javascript from the lesson contained in the question above. Your React JS outputs should now be working.

(可选)使用 npm run watch 即时编译.

(optional) Use npm run watch to compile on the fly.

我真的希望这能像它帮助我一样帮助别人！

I really hope this helps someone else out as much as it helped me!

这篇关于设置 Laravel 5.4 以使用 React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！