➜ 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(),
    ],
});

2006 visitas

Capítulo 4 – Modelos y relaciones »

{ Curso ReactJS y Laravel Directorio de Empresas }

Compartir link con tus amigos

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

➜ Instalación de Laravel y React JS

Descarga el código del proyecto

¡Qué aprenderás?