设置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/add-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?

我已经Google搜索过，但是只能找到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屋！