Curso ReactJS y Laravel Directorio de Empresas
Capitulo 3 ➜ Instalación de Laravel y React JS
Instalación de Laravel y React JS
Pasos para la Instalación de Laravel 10 y React JS 18, integración para un funcionamiento óptimo, además de vincular Bootstrap para aplicar diseño CSS
Instalación de Laravel y React JS
app.js
import './bootstrap';
import './App.jsx';
App.jsx
import React from 'react'
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css'
const App = () => {
return (
<div>
App codea
<button className='btn btn-primary'> BOTON</button>
</div>
)
}
export default App
if (document.getElementById('root')) {
const Index = ReactDOM.createRoot(document.getElementById("root"));
Index.render(
<React.StrictMode>
<App/>
</React.StrictMode>
)
}
welcome.blade.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIRECTORIO DE EMPRESAS LARAVEL - REACT</title>
@vite("resources/js/app.js")
</head>
<body>
<div id="root"></div>
</body>
</html>
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
//import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
//react(),
],
});
565 visitas
Sigue con el curso: Capítulo 4 – Modelos y relaciones
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Descargar ahora
