Teclear en la l\u00ednea de comandos:<\/p>\n\n\n\n
composer create-project --prefer-dist laravel\/laravel laravelvitereact<\/code><\/pre>\n\n\n\nUbicar el archivo app\/Providers\/AppServiceProvider.php y escribir al inicio:<\/p>\n\n\n\n
use Illuminate\\Support\\Facades\\Schema;<\/code><\/pre>\n\n\n\nLuego agregar en la funci\u00f3n Boot:<\/p>\n\n\n\n
Schema::defaultStringLength(191);<\/code><\/pre>\n\n\n\nAsignar permisos 777 a las siguientes carpetas:<\/p>\n\n\n\n
chmod -R 777 storage\/framework\/views
chmod -R 777 storage\/logs<\/code><\/pre>\n\n\n\nEn el archivo .env actualizar:<\/p>\n\n\n\n
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
<\/code><\/pre>\n\n\n\nPosicionarse en en la carpeta raiz del proyecto e instalar:<\/p>\n\n\n\n
npm install
npm i react
npm i react-dom
npm i @vitejs\/plugin-react
npm install @vitejs\/plugin-react-refresh@1.3.6<\/code><\/pre>\n\n\n\nActualizar el archivo vite.config.js en la carpeta ra\u00edz del proyecto<\/p>\n\n\n\n
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()
],
});
<\/code><\/pre>\n\n\n\nIniciar el servidor <\/p>\n\n\n\n
npm run dev<\/code><\/pre>\n\n\n\nPara probar si todo est\u00e1 funcionando correctamente hacer clic en en el enlace: <\/p>\n\n\n\n
http://localhost\/laravelvitereact\/public<\/code><\/pre>\n\n\n\nAgregar alg\u00fan c\u00f3digo de prueba al archivo resources\/js\/app.js, por ejemplo:<\/p>\n\n\n\n
console.log('Hola mundo');<\/code><\/pre>\n\n\n\nAbrir la herramienta de desarrollador en el navegador y verificar que se env\u00edo a la c\u00f3nsola el mensaje: Hola mundo !<\/p>\n\n\n\n
Para probar los estilos, primero sustituir el contenido el archivo resources\/views\/welcome.blade.php por el siguiente:<\/p>\n\n\n\n
<!DOCTYPE html>
<html lang=\u00bb{{ str_replace(‘_’, ‘-‘, app()->getLocale()) }}\u00bb>
<head>
<meta charset=\u00bbutf-8″>
<meta name=\u00bbviewport\u00bb content=\u00bbwidth=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=\u00bbusuario\u00bb>
<\/div>
<\/body>
<\/html>
A\u00f1adimos alg\u00fan c\u00f3digo a resources\/css\/app.css:<\/p>\n\n\n\n
body {
background: blue;
}<\/code><\/pre>\n\n\n\nPara visualizar los cambios refrescar: http:\/\/localhost\/laravelvitereact\/public<\/p>\n\n\n\n
Crear el componente resources\/js\/componentes\/Usuario.jsx con el siguiente contenido:<\/p>\n\n\n\n
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 \/>);<\/code><\/pre>\n\n\n\nImportar el componente Usuario.jsx en resources\/js\/app.js<\/p>\n\n\n\n
import '.\/bootstrap';
import Usuario from '.\/componentes\/Usuario.jsx';
console.log('Hola mundo !');
<\/code><\/pre>\n\n\n\nPara visualizar los cambios, recargar la p\u00e1gina https:\/\/localhost\/laravelvitereact\/public<\/p>\n\n\n\n
Para crear los archivos de producci\u00f3n, en la l\u00ednea de comando presionamos \u00abcontrol+c\u00bb y ejecutamos:<\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\nPara visualizar escribimos en la barra del navegador: http:\/\/localhost\/laravelvitereact\/public y listo !<\/p>\n","protected":false},"excerpt":{"rendered":"
Teclear en la l\u00ednea de comandos: Ubicar el archivo app\/Providers\/AppServiceProvider.php y escribir al inicio: Luego agregar en la funci\u00f3n Boot: Asignar permisos 777 a las siguientes carpetas: En el archivo .env actualizar: Posicionarse en en la carpeta raiz del proyecto e instalar: Actualizar el archivo vite.config.js en la carpeta ra\u00edz del proyecto Iniciar el servidor […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"material-hide-sections":[],"footnotes":""},"categories":[3,14,66],"tags":[2,61,67,87],"class_list":["post-2366","post","type-post","status-publish","format-standard","hentry","category-javascript","category-laravel","category-react-js","tag-javascript","tag-laravel","tag-reactjs","tag-vite"],"_links":{"self":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts\/2366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/comments?post=2366"}],"version-history":[{"count":11,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts\/2366\/revisions"}],"predecessor-version":[{"id":2397,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts\/2366\/revisions\/2397"}],"wp:attachment":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/media?parent=2366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/categories?post=2366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/tags?post=2366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}