设置 Laravel 5.4 以使用 React
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43228233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setup Laravel 5.4 to use React
提问by Wildcard27
I am not new to Laravel but am new to JavaScript frameworks.
我不是 Laravel 的新手，而是 JavaScript 框架的新手。
I want to use React in a laravel build but cannot find any information on how to do this.
我想在 laravel 构建中使用 React，但找不到有关如何执行此操作的任何信息。
I have Laravel 5.4. I know this comes pre-packed with Vue and Laravel Mix instead of Gulp.
我有 Laravel 5.4。我知道这预装了 Vue 和 Laravel Mix 而不是 Gulp。
I am following the tutorial here: https://blog.tighten.co/adding-react-components-to-a-laravel-appbut 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!
我正在关注这里的教程：https: //blog.tighten.co/adding-react-components-to-a-laravel-app但这不适用于 5.4。它提到需要更新 gulpfile 但是，由于 Laravel 5.4 不使用 Gulp，所以没有！
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?
有人可以帮忙提供一个小教程或我需要复制的几个步骤，以便让 React 在 5.4 中工作吗？
I have Googled but can only find NPM links, which are less than useful!
我在谷歌上搜索过，但只能找到 NPM 链接，这没什么用！
回答by Wildcard27
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.
感谢 Joe 指出我需要的文档部分。还有更多内容，因此将在下面描述我的步骤以帮助其他人。
Delete the
node_modulesfolder. 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 anode_modulesfolder, ignore this step.Please notethat the above step will remove anything you have installed using NPM.
Run
npm installfrom your project root. This will install all NPM components used by Laravel.Open
webpack.mix.jsand change:mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');to
mix.react('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');Run
npm run devto compile the Javascript from the lesson contained in the question above. Your React JS outputs should now be working.(optional) Use
npm run watchto compile on the fly.
删除
node_modules文件夹。这对于全新的构建来说不是必需的，但是如果您遵循了任何其他教程并安装了不需要的东西，这将省去一些麻烦。如果您没有node_modules文件夹，请忽略此步骤。请注意，上述步骤将删除您使用 NPM 安装的任何内容。
npm install从您的项目根目录运行。这将安装 Laravel 使用的所有 NPM 组件。打开
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 输出现在应该可以工作了。（可选）用于
npm run watch即时编译。
I really hope this helps someone else out as much as it helped me!
我真的希望这能帮助其他人，就像它对我的帮助一样！
回答by Joe Clay
According to the docs, React support is built in to Mix:
根据文档，React 支持内置于 Mix：
Mix can automatically install the Babel plug-ins necessary for React support. To get started, replace your mix.js() call with mix.react():
Mix 可以自动安装 React 支持所需的 Babel 插件。首先，用 mix.react() 替换你的 mix.js() 调用：
mix.react('resources/assets/js/app.jsx', 'public/js');
Behind the scenes, Mix will download and include the appropriate babel-preset-react Babel plug-in.
在幕后，Mix 将下载并包含适当的 babel-preset-react Babel 插件。
I'm not 100% sure whether or not this'll automatically include React in your output bundle - my guess would be no (in which case you'll have to use a normal mix.js()call to pull it in).
我不是 100% 确定这是否会自动将 React 包含在您的输出包中 - 我的猜测是否定的（在这种情况下，您必须使用普通mix.js()调用将其拉入）。
