Inicio » Cursos » ReactJS y Laravel Directorio de Empresas

Puesta en escena

API Rest | BackEnd

  • 4.Modelos y relaciones
  • 5.Rutas y Controladores
  • 6.Roles de Usuarios admin | client
  • 7.Registro de usuarios
  • 8.Login de usuarios
  • 9.Logout de usuarios
  • 10.CRUD User
  • 11.CRUD Categoría
  • 12.CRUD Empresa

Autenticación en React Js

  • 13.Rutas y Layouts
  • 14.AuthUser - Token
  • 15.Registro de usuarios
  • 16.Login de usuarios
  • 17.Logout de usuarios

Rol Admin | User

  • 18.PanelAdmin
  • 19.UserAll mostrar usuarios
  • 20.UserUpdate Aprobación del usuario

Rol Admin | Categoria

  • 21.CategoriaAll mostrar categorias
  • 22.CategoriaStore Agregar una categoría
  • 23.CategoriaUpdate Actualizar Categoría
  • 24.CategoriaDelete Borrar categoría

Rol Admin | Empresa

  • 25.EmpresaAll mostrar empresas
  • 26.EmpresaUpdate aprobar empresa

Rol Client | Empresa

  • 27.Panel Client
  • 28.EmpresaAll mostrar empresas
  • 29.EmpresaStore Agregar empresa
  • 30.EmpresaUpdate Actualizar Empresa

Páginas públicas

  • 31.Rutas y Mockups
  • 32.Página Home
  • 33.Componente Search
  • 34.Componente Modal
  • 35.Página Categorías
  • 36.Página Categoría

Extras

  • 38.Diseño con Bootstrap

Curso ReactJS y Laravel Directorio de Empresas

Lección: 3 ➜ 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

Lección 3: Instalación de Laravel y React JS

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

 


487 visitas

Descarga el código del proyecto

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

Descargar ahora

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