División de Código con Webpack y Micro Frontend en React

Curso de Webpack con Express.js, React.js y TypeScript

Contenido del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:37

División de Código con Webpack y Micro Frontend en React

Curso de Webpack con Express.js, React.js y TypeScript

Clase 17 de 22

Clase 17 / 22

Recursos

¿Cómo dividir una aplicación React en componentes separados usando Webpack?

La clave para mantener un proyecto React escalable es dividirlo en componentes modulares. Esto no solo mejora la organización, sino que también facilita trabajar de manera independiente en diversas partes del proyecto. Podemos aprovechar herramientas como Webpack para manejar múltiples aplicaciones de manera eficiente. A continuación, te mostraré cómo estructurar nuestras aplicaciones usando este enfoque.

¿Qué es necesario para empezar?

Antes de dar los pasos, es vital entender algunos conceptos básicos:

Micro Frontends: Esta metodología permite crear piezas de la interfaz de usuario divididas en aplicaciones menores que funcionan de manera independiente.
Webpack: Es una herramienta esencial para empaquetar módulos de JavaScript y nos ayuda a administrar diferentes configuraciones.

¿Cómo configurar un header como aplicación separada?

Crear una carpeta de aplicación independiente:
- En nuestro proyecto, dentro de la carpeta src, creamos una nueva llamada header.
Organizar los archivos dentro de la nueva carpeta:
- En header, añadimos un archivo index.js como punto de entrada de la aplicación.
- Creamos una subcarpeta components dentro de header y un archivo App.jsx para nuestro componente principal.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('header'));

// components/App.jsx
import React from 'react';

const App = () => <div>Hello React from Header</div>;

export default App;

Modificar el archivo HTML para incluir el nuevo div:
- Agregar un nuevo <div id="header"></div> en el public/index.html donde se montará nuestra aplicación de header.

¿Cómo configuramos Webpack para manejar múltiples entradas?

Actualizar configuración de entradas:
- En el archivo de configuración de Webpack, definimos múltiples puntos de entrada.

// webpack.config.js
module.exports = {
  entry: {
    home: './src/index.js',
    header: './src/header/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

Configuración para chunking y optimización:
- Asegúrate de que Webpack separe correctamente los recursos utilizando chunkFilename.

¿Cómo verificar si la configuración es correcta?

Para verificar que todo está correctamente configurado, seguiremos estos pasos:

Inicializar el entorno de desarrollo:
- Corre el comando npm run start en la terminal para activar el servidor de desarrollo.
Inspeccionar elementos en el navegador:
- Usando herramientas para desarrolladores en el navegador, verifica que los componentes se renderizan según lo esperado. Busca elementos como Hello React from Header y asegúrate de que sean cargados desde bundles separados.

Esta metodología no solo asegura una estructura de proyecto sólida, sino que también permite que diferentes equipos trabajen en paralelo sin conflictos. ¡Sigue explorando nuevas técnicas y métodos para mejorar tus flujos de trabajo con React y Webpack!

Paolo Joaquin Pinto Perez

Hace 5 años

++Code Splitting en desarrollo++

Existe una clase del curso de Optimización web que lo explica: clase. Podemos ver que el code splitting es dividir el código, es beneficioso el uso que se le quiera dar, ya que se puede implementar de diferentes formas. -------------- ¿Qué hicimos en esta clase? ------------ 1.- Creamos una carpeta Header dentro de src. 2.- Creamos dentro de Header: - Un Archivo llamado index.js - Una carpeta llamada components. - Dentro de esa carpeta components se crea el archivo App.jsx 3.- en src/Header/components/App.jsx:

import React from 'react';

const App = () => {
    return (
        <h2>Hello React From Header</h2>
    );
}

export default App;

4.- en src/Header/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';


ReactDOM.render(<App />, document.getElementById('header'));

5.- en public > index.html: Añadimos e div con id : header

  <body>
    <div id="header"></div>
    <div id="app"></div>
  </body>

En webpack.config.dev.js: Modificamos entry y output:

module.exports = {
  entry: {
    home: './src/index.js',
    header: './src/Header/index,js',
  },
 .....
},
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
  },

y npm run start

Introducción

Migración y Configuración Avanzada de Webpack 5 con TypeScript

Configuración y Optimización de Proyectos con Webpack y TypeScript

Webpack en el Backend

Configuración Básica de Express y Webpack para Proyectos Node.js

Configuración de Webpack para Proyectos con Express

Migración de Aplicaciones Node.js a TypeScript paso a paso

Configuración de API Rest con TypeScript y JSON para Platzi Store

Webpack en el Frontend

Migración y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción en React

Creación de Hooks para Consumo de APIs en React con Axios

"Implementación de Context en React para Gestión de Estado"

Configuración de Alias en Webpack para Proyectos JavaScript

Optimización de Imágenes y Uso de CDN en Proyectos Web

Optimización de Imágenes PNG con Image Minimiser Webpack Plugin

Configuración de TypeScript en React con Webpack

Configuración de Hot Reload en Webpack con React

División de Código con Lazy Loading en React

División de Código con Webpack y Micro Frontend en React

Configuración Avanzada de Webpack para Separar Código y Dependencias

Despliegue

Despliegue de Aplicaciones Web con Netlify y GitHub

Despliegue de API en Heroku con Express y TypeScript

Conexión de un Dominio Personalizado a Netlify y Cloudflare

Migración de Wetpack y Optimización para Producción

División de Código con Webpack y Micro Frontend en React

Progreso del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Recursos

Recursos