Cómo usar Reactjs con Laravel 5.4 >
Hola, sigo con mi obsesión de ReactJs lo sé. Sencillamente no puedo creer todas las ventajas, facilidades y capacidades que tiene esta librería. Esta semana decidí traerles una pequeña guía de uso para combinar el que considero el mejor framework para php que conozco, Laravel 5* (a criterio personal, si crees que hay otro mejor te invito a que me digas por qué en los comentarios).
No sé por qué razón, en uno de mis proyectos decidí implementar en Laravel ésta librería (ReactJs), lo cierto es que terminé combinandolas después de un tiempo de investigar y me encantó. Aunque no soy un experto en la materia con VueJs ya que lo he usado y conocido muy superficialmente, puede que existan más ventajas y facilidades de usar Vuejs pero me gustan los retos, así que no hubo nada mejor que comenzar a hacer un hack de estas dos tecnologías.
Comenzamos!
1. Descarga e Instala el paquete Yarn para la línea de comando.
Yarn es un instalador de paquetes JavaScript y gestor de dependencias similar a NPM lanzado por Facebook en colaboración con Google. Según sus creadores y aficionados viene acompañado con algunas mejoras de rendimiento. A mi parecer cumple la misma función que un comando de NPM, sólo que en este caso lo necesité Sí porque Sí.
2. Instala Node en tu ambiente
Si no lo tienes instalado ya, hazlo. Es una de esas herramientas que te ayudan a mejorar tu día a día sin tanto esfuerzo. Genera este comando en el root de tu proyecto.
npm install
ó
npm install --no-bin-links /* Si estas desarrollando en Windows */3. Ve al archivo webpack.mix.js
/* Reemplaza: */
mix.js(‘resources/assets/js/app.js’, ‘public/js’)/* por: */
mix.react(‘resources/assets/js/app.jsx’, ‘public/js’)
Tu archivo webpack debería quedar así:
4. Ve a la ruta del archivo resources/assets/js/app.js
Cambia el nombre de este por app.jsx y coloca tu primer código React, puede ser el común Hello World!.
5. Desde tu gestor de comandos de Node ejecuta lo siguiente:
- npm install --only react react-dom cross-env- npm install --save react react-dom- npm update- npm run dev // Para compilar en modo desarrollo los mix de laravel- npm run watch // Para ver en tiempo real los cambios que se vayan efectuando con React.
6. Sustituye en tu layout o sección HEAD de tu archivo Blade de preferencia el callback de los scripts a:
<head>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
</head>7. Dentro de tu etiqueta body, borra todo el contenido:
Haz que el contenido de tu archivo inicial (layout, welcome ó home) quede de la siguiente forma para que comience a renderizar:
Si sigues todos estos pasos todo estará bien y funcionando. Además, te dejo el link del repo en Github por si quieres chequear algo más a fondo en la estructura del proyecto.
PD: Si quieres ver de manera correcta la sintaxis en Sublime text (el que yo uso), tienes que instalar un paquete para Babel pulsando ctrl/cmd + shift + p y buscando Babel e instalar. Con esto ya SublimeText estará preparado para mostrarte la sintaxis de ES6.
Si tienes alguna sugerencia, error o comentario colócalo abajo y vere como puedo ayudarte. Cheers!
Contribuye con la comunidad Open Source siempre que puedas!
