Instalar React en Laravel

Debemos instalar primero Laravel y luego React, obviamente antes debemos preparar el entorno como un servidor local, NodeJS, etc para lograr integrarlos

Video Integrar Laravel y React
SUSCRÍBETE A NUESTRO CANAL SÍGUENOS EN FACEBOOK

¿Cómo instalar React JS en Laravel 8?

React JS es una de las librerías más usadas para el desarrollo de aplicaciones del lado del cliente o FrontEnd, en este tutorial veremos como integrar este librería de Javascript a el Framework Laravel, de una forma simple y sencilla. Veamos entonces:

¿Cómo instalar React JS en Laravel 8?

Para llevar a cabo una instalación correcta, debemos empezar primero con Laravel y luego React, obviamente antes debemos preparar el entorno como un servidor local, NodeJS, etc para lograr integrarlos.

Pasos para instalar e integrar Laravel con React

1.- Entorno

  • Windows 10
  • Visual Studio Code
  • Google Chrome
  • Tener instalado un servidor Local en este caso XAMPP
  • Tener instalado Node JS y funcionando correctamente NPM

2.- Instalar Laravel

Abrimos Visual Studio Code en la carpeta c:>xampp/htdocs, luego abrimos una terminal y digitamos el siguiente comando artisan para instalar Laravel.

composer create-project laravel/laravel --prefer-dist pyreact

3.- Instalar React JS

Accedemos al proyecto pyreact donde ejecutamos en la terminal los siguientes comandos artisan:

Prepara los archivos para procesar las interfaces

composer require laravel/ui

Instala los archivos necesarios para React JS

php artisan ui react

Verificamos la versión e instalación de Node JS

# for node
node -v

Verificamos el gestor de dependencias Javascript NPM

# for npm
npm -v

Todo ello para que finalmente ejecutemos el siguiente comando artisan y podamos instalar todo el entorno correspondiente para  compilar al resultante de React JS

npm install

 

4.- Testing 

Una pequeña prueba de React donde logramos visualizar en la vista el componente que por default nos trae la instalación de React. El cual está identificado con el ID example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="example"></div>
    <script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>

Podemos realizar un cambio en el content del componente. luego dedemos ejecutar el siguiente comando para actualizar los cambio y/o compilarlos.

npm run watch

Para poder ver, ejecutamos el comando artisan para levantar el proyecto Laravel 8.

php artisan serve

En adelante iremos publicando más tutoriales de React Js con Laravel para aprender a usar y aprovechar estas dos grandes tecnologías en el desarrollo FrontEnd y BackEnd respectivamente.

 

No tiene descargable

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 221 veces | Publicado hace 4 semanas

Curso Flutter y Laravel Tienda Delivery

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021