una - Configurar Laravel 5.4 para usar React

react laravel crud

Question

No soy nuevo en Laravel, pero soy nuevo en los marcos de JavaScript.

Quiero usar React en una compilación de laravel, pero no puedo encontrar ninguna información sobre cómo hacer esto.

Tengo Laravel 5.4. Sé que esto viene pre-empacado con Vue y Laravel Mix en lugar de Gulp.

Estoy siguiendo el tutorial aquí: https://blog.tighten.co/adding-react-components-to-a-laravel-app pero esto no es para 5.4. Menciona la necesidad de actualizar el archivo gulp pero, dado que Laravel 5.4 no usa Gulp, ¡no hay uno!

¿Puede alguien ayudarme con un pequeño tutorial o un par de pasos que necesito replicar para que React funcione en 5.4?

He buscado en Google, pero solo puedo encontrar enlaces NPM, ¡que son menos útiles!

Answer 1

Gracias a Joe por señalar la parte de los documentos que necesitaba. Hubo un poco más de eso, así que describo mis pasos a continuación para ayudar a alguien más.

1. Eliminar la carpeta node_modules . Esto no es necesario para construcciones nuevas, pero si has seguido otros tutoriales e instalado cosas que no necesitas, esto te ahorrará algunos dolores de cabeza. Si no tiene una carpeta node_modules , ignore este paso.

   Tenga en cuenta que el paso anterior eliminará todo lo que haya instalado utilizando NPM.

2. Ejecute npm install desde la raíz de su proyecto. Esto instalará todos los componentes NPM utilizados por Laravel.

3. Abra webpack.mix.js y cambie:

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

   a

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

4. Ejecute npm run dev para compilar el Javascript de la lección contenida en la pregunta anterior. Tus salidas de React JS ahora deberían estar funcionando.

5. (Opcional) Use npm run watch para compilar sobre la marcha.

¡Realmente espero que esto ayude a alguien más tanto como a mí!

Answer 2

De acuerdo con los documentos , el soporte React está integrado en Mix:

Mix puede instalar automáticamente los complementos de Babel necesarios para el soporte React. Para comenzar, reemplace su llamada mix.js () con mix.react ():

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

Detrás de las escenas, Mix descargará e incluirá el complemento Babel-preset-react Babel apropiado.

No estoy 100% seguro de si esto incluirá automáticamente React o no en su paquete de salida, supongo que no (en cuyo caso tendrá que usar una llamada mix.js() normal para mix.js() ).