[
](easy-web.medium.com/?source=pos…)
6月14日
-
5分钟阅读
[
拯救
使用NX在2分钟内构建带有状态管理的React微前端Monorepo😅。
即使是你的奶奶也能用NX构建反应式微前端。
内容
介绍
前段时间，我发布了一篇文章《5分钟内用NX构建⚛️ React Micro Frontends Monorepo》。
[
用NX构建⚛️React Micro Frontends Monorepo
在本教程中，你将构建React Micro Frontend，而不需要急于求成。
levelup.gitconnected.com
](levelup.gitconnected.com/building-️-…)
曾经有一段时间，NX不支持React的微前端预设生成器，只支持Angular。许多人抱怨这个自定义的实现有bug和问题。现在，我想分享一些很棒的消息，这个支持变成了现实，我很高兴向你介绍这篇文章的更新版本。我们正在构建带有状态管理的React微前端，等着吧......不是在5分钟 内**，.** .....等着吧......，而是在2分钟😜
让我们不要浪费我们的时间，直接进入教程。
在我们开始之前，请加入我，以获得更多内容。
[
使用我的推荐链接加入Medium - Vitalii Shevchuk
作为Medium会员，你的会员费的一部分会给你阅读的作家，而且你可以完全访问每个故事...
easy-web.medium.com
](easy-web.medium.com/membership)
概念证明
通常，当我们构建微型前端应用程序时，我们会创建一个外壳应用程序（或主机、容器）和多个远程微型前端应用程序。在我们的例子中，我们将有2个应用程序：外壳和远程。此外，我们将有一个共享库--一个共享数据上下文。shell和远程都将从共享数据上下文中消耗状态。共享数据上下文将保存状态--计数器，shell将有一个按钮来增加状态，而remote则是减少计数器状态的按钮。最后的结果将是这样的。
构建微前端应用程序
我们将从生成monorepo开始。
npx create-nx-workspace mf-react-state --preset=empty
然后，让我们添加React的依赖项
yarn add --dev @nrwl/react
现在，我们可以生成我们的shell和远程React应用程序了
nx g @nrwl/react:host shell --remotes=remote
如果我们想生成多个远程，我们将用逗号分隔符指定应用程序的名称，比如。
--remotes=remote1, remote2
💡注意：如果你在运行命令时遇到了错误，请确保你使用的是最新版本的nx cli，你也可以尝试用下面的命令更新monorepo。
yarn add -D @nrwl/cli,nx migrate latest和nx migrate --run-migrations
这就差不多了，现在你可以运行这个应用程序了。
nx serve shell --open --devRemotes=remote
实现可共享状态
下一步是添加可共享库，我们需要运行以下命令
nx g @nrwl/react:library shared/data-context
让我们去mf-react-state/libs/shared/data-context/src/lib/shared-data-context.tsx ，添加计数器状态。
import { createContext, useState } from 'react';
确保你导出了DataContext和DataProvider ，来自于mf-react-state/libs/shared/data-context/src/index.ts
export { DataProvider, DataContext } from './lib/shared-data-context';
我们需要将我们的库作为一个单子来共享。为了做到这一点，我们需要在shell和远程都修改module-federation.config.js文件。
在mf-react-state/apps/shell/module-federation.config.js
// Core libraries such as react, angular, redux, ngrx, etc. must be// singletons. Otherwise the applications will not work together.
而在mf-react-state/apps/remote/module-federation.config.js ，也是如此。
const coreLibraries = new Set(['react','react-dom','react-router-dom','@mf-react-state/shared/data-context']);
然后，我们需要将提供者添加到我们的shell应用程序中。mf-react-state/apps/shell/src/app/app.tsx
酷，最后一步是我们需要在shell和远程应用中消耗上下文状态。
在mf-react-state/apps/shell/src/app/nx-welcome.tsx
和中mf-react-state/apps/remote/src/app/app.tsx
恭喜🎉，如果你打字够快的话，你可以在2分钟内完成这个应用，如果你从repo上下载的话，可以在30秒内完成😅。
Github链接
[
GitHub - Vitashev/mf-react-state
你现在不能执行这个动作。你在另一个标签页或窗口登录。您在另一个标签或窗口中签出。
github.com
结论
好吧，我很高兴NX的人继续改进他们的产品，让我们这些前端开发者的生活更轻松。我想象着当我们从写代码中解脱出来，只需从命令行中生成我们想要的东西的时候😁。无论如何，在Elon Mask发布他的机器人之前，我们仍然需要做一些编码工作，很遗憾。亲爱的朋友们，如果你喜欢这篇文章，请让其他人看到它，拍拍手👏，它就会多显示10个人。关注，与我保持联系。
[
每当Vitalii Shevchuk发表文章时，都会收到一封邮件。
每当Vitalii Shevchuk发表文章时都会收到电子邮件。通过注册，你将创建一个Medium账户，如果你还没有...
easy-web.medium.com
](easy-web.medium.com/subscribe)
了解更多
[
🔥 三大React技巧 专家😎喜欢用它来减少组件的大小
不要让你的React组件成为一个科学怪人
淘宝网
](levelup.gitconnected.com/top-3-react…)
[
如何免费使用Firebase部署和托管Angular🅰️微前端 🔥
一个关于如何在零压力的情况下免费部署和托管一个微型前端应用程序的教程。
itnext.io
[
🥺 用React和Thirdweb构建NFT Instagram应用
准备好迎接网络的未来，或者抓住你的那份NFT炒作😜
itnext.io
