- Crear proyecto jetstream - livewire
- $ laravel new prueba --jet
- Crear base de datos del proyecto
- $ php artisan migrate
- En package.json eleminar dependencias:
- "laravel-vite-plugin": "^0.6.0",
- "vite": "^3.0.0",
- $ npm install vite laravel-vite-plugin --save-dev
- $ npm install @vitejs/plugin-react --force
- $ npm install react@latest react-dom@latest
- Nota: en caso de problemas:
- $ npm install react@latest react-dom@latest --force
- Nota: en caso de problemas:
- Modificar vite.config.js:
import { defineConfig } from 'vite'; import laravel, { refreshPaths } from 'laravel-vite-plugin'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [ react(), laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', ], refresh: [ ...refreshPaths, 'app/Http/Livewire/**', ], }), ], });
- Crear resources\js\components\App.jsx:
import React from 'react'; const App = () => { return ( <div> <h1>Laravel 9, vite y react</h1> </div> ) } export default App;
- Cambiar nombre de resources\js\app.js a resources\js\app.jsx.
- Modificar resources\js\app.jsx:
import './bootstrap'; import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start(); if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); }
- Modificar resources\views\welcome.blade.php:
<!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> <!-- Fonts --> <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet"> @viteReactRefresh @vite(['resources/css/app.css', 'resources/js/app.jsx']) </head> <body> <div id='app'></div> </body> </html>
- Crear proyecto en la página de GitHub con el nombre: react-laravel2022.
- Description: Ejemplo de una aplicación Laravel con React.js.
- Public.
- En la ubicación raíz del proyecto en la terminal de la máquina local:
- $ git init
- $ git add .
- $ git commit -m "Antes de iniciar"
- $ git branch -M main
- $ git remote add origin https://github.com/petrix12/react-laravel2022.git
- $ git push -u origin main
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent