#博客# AEM 和 React 是怎么在一起愉快地玩耍的？

微前端在 AEM（CMS）项目的应用

我们在「三靠谱」（~~已和谐客户名称~~）的 Marketplace 项目当中也曾经探索过 AEM + React 混合开发的解决方案，其中就涉及到如何在 AEM 当中嵌入 React 组件，甚至将 AEM 组件又强行转化为 React 组件进行嵌套。现在回过头来其实也算是微前端的一种实践：

AEM 仅仅包含网页内容，不包含 domain 相关的结构化数据。
React 组件被托管在 AEM 组件当中，再经由 AEM 传递给组件所需要的属性，比如 IDs 或 APIs 的 URL 等等
后端微服务则包含 domain 结构化数据，由对应的 React 组件通过 Ajax 进行数据查询。

<div id="cms-container-1">
    <div id="react-input-container"></div>
    <script>
      ReactDOM.render(React.createElement(Input, { ...injectProps }), document.getElementById('react-input-container'));
    </script>
  </div>
  <div id="cms-container-2">
    <div id="react-button-container"></div>
    <script>
      ReactDOM.render(React.createElement(Button, {}), document.getElementById('react-button-container'));
    </script>
  </div>

摘自：技术雷达之「微前端」- 将微服务理念扩展到前端开发（下：实战篇） | 吕立青的博客

JimmyLv / jimmylv.github.io

#博客# AEM 和 React 是怎么在一起愉快地玩耍的？ #129

Description

TODOs

References

微前端在 AEM（CMS）项目的应用