Laravel 11: Integrar con ViteJs para escribir código javascript puro y en React

Teclear en la línea de comandos:

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

Ubicar el archivo app/Providers/AppServiceProvider.php y escribir al inicio:

use Illuminate\Support\Facades\Schema;

Luego agregar en la función Boot:

Schema::defaultStringLength(191);

Asignar permisos 777 a las siguientes carpetas:

chmod -R 777 storage/framework/views
chmod -R 777 storage/logs

En el archivo .env actualizar:

APP_URL=http://localhost/laravelvitereact/public

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nombreDeLaBaseDeDatos
DB_USERNAME=usuarioBaseDeDatos
DB_PASSWORD=ClaveUsuarioBaseDeDatos

Posicionarse en en la carpeta raiz del proyecto e instalar:

npm install
npm i react
npm i react-dom
npm i @vitejs/plugin-react
npm install @vitejs/[email protected]

Actualizar el archivo vite.config.js en la carpeta raíz del proyecto

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import reactRefresh from '@vitejs/plugin-react-refresh';

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

Iniciar el servidor

npm run dev

Para probar si todo está funcionando correctamente hacer clic en en el enlace:

http://localhost/laravelvitereact/public

Agregar algún código de prueba al archivo resources/js/app.js, por ejemplo:

console.log('Hola mundo');

Abrir la herramienta de desarrollador en el navegador y verificar que se envío a la cónsola el mensaje: Hola mundo !

Para probar los estilos, primero sustituir el contenido el archivo resources/views/welcome.blade.php por el siguiente:

<!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</title>
@vite([‘resources/css/app.css’, ‘resources/js/app.js’])
</head>
<body>
<p>Hola mundo !</p>
<div id=»usuario»>
</div>
</body>
</html>

Añadimos algún código a resources/css/app.css:

body {
    background: blue;
  }

Para visualizar los cambios refrescar: http://localhost/laravelvitereact/public

Crear el componente resources/js/componentes/Usuario.jsx con el siguiente contenido:

import React from 'react';
import { createRoot } from 'react-dom/client';

function Usuario() {
 return (
    <p>Hola desde React !</p>
    );
}
export default Usuario;

const rootElement = document.getElementById('usuario')
const root = createRoot(rootElement);

root.render(<Usuario />);

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

import './bootstrap';
import Usuario from './componentes/Usuario.jsx';

console.log('Hola mundo !');

Para visualizar los cambios, recargar la página https://localhost/laravelvitereact/public

Para crear los archivos de producción, en la línea de comando presionamos «control+c» y ejecutamos:

npm run build

Para visualizar escribimos en la barra del navegador: http://localhost/laravelvitereact/public y listo !

Dejar un comentario Cancelar la respuesta