Inicio » Cursos » ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel Directorio de Empresas

Capitulo 3 ➜ Instalación de Laravel y React JS

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

 


742 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

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023