This application contains a Header component that reflects and resets the counter as if it were a shopping cart.
if you want to see this application running, please click on the following links
this application was build with:
NodeJs: v18.2.0please use the package manager yarn to install the host.
$ yarn installto run the app in a development environment
$ yarn startthis application was created with a host and nav
create an application with module federation run this command
$ npx create-mf-app ? Pick the name of your app: simple-nav
? Project Type: Application
? Port number: 3001
? Framework: react
? Language: javascript
? CSS: Tailwindadd this configuration in webpack.config.js file for ModuleFederationPlugin
exposes: {
'./Header': './src/Header',
},create a component Header.jsx
import React from 'react';
const Header = ({count = 0, onClear}) => {
return (
<header className="bg-black text-white flex font-bold p-5 text-3x1 items-center">
<div className="flex-grow">Header</div>
<i className="fa-solid fa-cart-shopping"></i>
<div className="py-2 px-4">{count}</div>
<button
onClick={onClear}
className="bg-indigo-800 font-bold text-white rounded py-2 px-4">
Clear Cart
</button>
</header>
);
};
export default Header;