Inicio » Blog » React JS

21 marzo, 2021

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

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 18448 veces

Compartir link del tutorial con tus amigos


ReactJS Básico ReactJS Básico

ReactJS Básico

Descarga del código fuente

USD 0.00

ReactJS y Laravel Directorio de Empresas ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel desarrollo fullstack directorio empresarial

Descarga del código fuente

USD 47.00

Aprende más sobre React JS

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023