I want to use React in a laravel build but cannot find any information on how to do this.
I have Laravel 5.4. I know this comes pre-packed with Vue and Laravel Mix instead of 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!
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?
I have Googled but can only find NPM links, which are less than useful!
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.
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 a
node_modulesfolder, ignore this step.
Please note that the above step will remove anything you have installed using NPM.
npm installfrom your project root. This will install all NPM components used by Laravel.
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 watchto compile on the fly.
I really hope this helps someone else out as much as it helped me!
According to the docs, React support is built in to Mix:
Mix can automatically install the Babel plug-ins necessary for React support. To get started, replace your mix.js() call with mix.react():
Behind the scenes, Mix will download and include the appropriate babel-preset-react Babel plug-in.
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).