= Dónde empezar: Encabezado o pie de página compartidos utilizando Federación de Módulos En esta guía, aprendera cómo crear un componente compartido de cabecera y pie de página utilizando la Federación de Módulos, y cómo utilizarlos en dos aplicaciones diferentes. También aprenderá cómo manejar el enrutamiento, la autenticación y el estilo en los componentes compartidos. == Paso 1: Crear los componentes de cabecera y pie de página El primer paso es crear un proyecto separado que contendrá los componentes de cabecera y pie de página. Este proyecto actuará como anfitrión de los componentes compartidos y los expondrá utilizando la Federación de Módulos. - Cree una nueva carpeta llamada `shared-components` y navege hasta ella. - Ejecute `npm init -y` para inicializar un nuevo proyecto Node.js. - Ejecute `npm install webpack webpack-cli webpack-dev-server html-webpack-plugin @webpack-cli/serve` para instalar las dependencias necesarias. - Cree un nuevo archivo llamado `webpack.config.js` en la carpeta raíz y añada el siguiente código: + [source, javascript] ---- const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", devServer: { port: 3000, }, plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html", }), ], }; ---- + Esta es una configuración básica de Webpack que servirá un archivo HTML usando el webpack-dev-server. + - Crear una nueva carpeta llamada public y añadir un nuevo archivo llamado index.html con el siguiente contenido: + [source, html] ---- Componente compartido ---- + Este es el archivo HTML que será servido por `webpack-dev-server`. Tiene dos divs vacíos con los ids header y footer, donde se renderizarán los componentes compartidos. - Ejecute `npm install react react-dom` para instalar React como dependencia. - Cree una nueva carpeta llamada `src` y añada dos archivos: `Header.js` y `Footer.js`. Estos archivos contendrán los componentes de React para la cabecera y el pie de página. + En `Header.js`, añada el siguiente código: + [source, javascript] ---- import React from "react"; function Header() { return (

Shared Header

); } export default Header; ---- + Este es un componente de cabecera simple que tiene un título y un menú de navegación. + In Footer.js, agrege el siguiente código: + [,js ] ---- import React from "react"; function Footer() { return (

© 2023 Componentes compartidos. Todos los derechos reservados.

); } export default Footer; ---- + Este es un simple componente de pie de página que tiene un aviso de copyright. + - Cree un nuevo archivo llamado `index.js` en la carpeta `src` y añada el siguiente código: + [source, javascript] ---- import React from "react"; import ReactDOM from "react-dom"; import Header from "./Header"; import Footer from "./Footer"; ReactDOM.render(
, document.getElementById("header")); ReactDOM.render(