Cómo instalar React JS 18 en Laravel 10 con Vite JS

Al final de esta publicación, podrá crear una aplicación reactjs y Laravel 10 con tecnología de vite. También aprenderemos cómo crear un componente de reacción y conectarlo con el archivo blade de laravel 10.

Paso 1: Instalar Laravel 10

Al final de esta publicación, podrá crear una aplicación reactjs y Laravel 10 con tecnología de vite. También aprenderemos cómo crear un componente de reacción y conectarlo con el archivo blade de laravel 10.

composer create-project laravel/laravel py "10.*"

Paso 3: Instalar las dependencias NPM

Después de instalar el proyecto, navegue a la carpeta del proyecto para esa ejecución

cd py

Luego ejecutar

npm install

Paso 3 Instalar ReactJS 18 en Laravel 10

Ahora instale npm en su proyecto para eso necesita que node y npm estén instalados en su sistema. Puede descargar la última versión de nodejs haciendo clic en este enlace.

npm install react@latest react-dom@latest

Paso 4: Instalar el plugin de ViteJs para React

Ahora, después de instalar los módulos de nodo, necesitamos instalar reactjs en nuestra aplicación, para eso ejecute el siguiente comando en la terminal npm install react@latest react-dom@latest. Instalará la última versión de reactjs y react-dom también. lo usaremos en el archivo jsx.

npm i @vitejs/plugin-react

Paso 5: Actualizar la configuración de vite.config.js

En la versión más reciente de laravel 10, instale el complemento vitejs/plugin-react para instalar reactjs en laravel. Este complemento proporciona dependencias requeridas para ejecutar la aplicación reactjs en vite. Vite es un comando de compilación que agrupa su código con Rollup y se ejecuta en el puerto localhost: 3000 para brindar una función de actualización instantanea.

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [
        react(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Paso 6: Ejecutar el comando npm run dev

Ahora, después de instalar reactjs, debemos iniciar el servidor de desarrollo para vite para ejecutar el comando 'npm run dev' y observará su archivo resources/js/app.js y el archivo resources/css/app.css en su aplicación . También inicia un servidor vite en http://localhost:3000. No lo abrirá en el navegador, ya que es para vite hot reload y se ejecuta en segundo plano y observa los cambios que realizó en el archivo CSS y js de su aplicación.

npm run dev

Paso 7: Crear un componente ReactJS

En la carpeta resources/js, cree un nombre de archivo Codea.jsx y escriba contenido para este ejemplo. Escribamos simplemente "Reactjs con Laravel Vite". Puede cambiarlo de acuerdo con sus requisitos. presione ctrl + s para guardar el archivo.

// resources/js/Codea.jsx
import React from 'react';
import { createRoot } from 'react-dom/client'

export default function Codea(){
    return(
        <div>ESTAMOS EN CODEA.APP</div>
    );
}

if(document.getElementById('codeareact')){
    createRoot(document.getElementById('codeareact')).render(<Codea/>)
}

Paso 8: Actualizar el app.js

en resources/js/app.js Importar el componente Codea.jsx

// resources/js/app.js
import './bootstrap';

import './Codea.jsx'

Paso 9: Conectar el componente con la vista de Laravel

Ahora necesitamos crear un archivo blade donde se cargará la aplicación reactjs. En la carpeta de recursos/vistas, cree un nombre de archivo react.blade.php. Agregue @vite('resources/js/app.js') en la parte inferior del archivo en el archivo react.blade.php. Cargará todos los js que necesita para ejecutar el código Reactjs.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 10 - REACT 18</title>
        @viteReactRefresh      
        @vite('resources/js/app.js')
    </head>
    <body>
        <div id="codeareact"></div>
    </body>
</html>

Paso 10: Verificar la ruta en Laravel

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Paso 11: Ejecutar php artisan serve

Finalmente ejecutamos el comando ver el proyecto laravel en el navegador web

php artisan serve

y luego ingrese al siguiente enlace http://localhost:8000 donde estará el proyecto.

Leido 3283 veces

Compartir link del tutorial con tus amigos

Instalar React JS 18 en Laravel 10 con Vite JS