¿Cómo instalar React JS en Laravel 8?

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

Suscríbete a nuestro canal en Youtube

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

En ocasiones podemos encontrar un error por la falta de recursos para levantar ejecutar el observador... para ello podemos ejecutar

npm run dev

Y esto puede corregir el error con la inclusión y el procesamiento

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.

Leido 18851 veces

Compartir link del tutorial con tus amigos