CIF 核心组件 - 反应组件
React 组件项目是所有使用 CIF 核心组件构建的代码基础 反应。该库将显示以下组件:
减少捆绑大小
此软件包支持树摇动 —— 您的店面只捆绑您实际导入的组件 .
已命名的进口 (建议):
import { CommerceApp, Portal, ConfigContextProvider } from '@adobe/aem-core-cif-react-components';
直接导入 用于单个组件:
import GiftCartOptions from '@adobe/aem-core-cif-react-components/dist/esm/components/GiftCardOptions';
路径 dist/esm/ 镜像 src/ 文件夹结构 .
提示 :
- 使用已命名的进口——避免
import *或导入整个软件包 - 运行一个生产大楼(
webpack -p编号 :npm run prod)所以未使用的代码被删除 - 只导入您在每个页面中使用的组件
- 不需要更改网页包配置
折旧组件
以下推车、取出和账户组件被折旧.
| 类别 | 折旧 |
|---|---|
| 墨盒检出( C) | Cart, (中文(简体) ), CartTrigger, (中文(简体) ), CartProvider, (中文(简体) ), CartInitializer, (中文(简体) ), useCartState, (中文(简体) ), CheckoutProvider |
| 账户认证( A) | AuthBar, (中文(简体) ), AccountContainer, (中文(简体) ), AddressBook, (中文(简体) ), ResetPassword, (中文(简体) ), MyAccount, (中文(简体) ), AccountLink, (中文(简体) ), AccountDetails, (中文(简体) ), UserContextProvider, (中文(简体) ), useUserContext |
| 工具 | Trigger |
与购物车有关的部分
圆筒
实施"迷你卡"部分,完成取出经验.
盒提供器
提供国家管理推车业务的推车组件的背景
刻录器
一个提供"加到"和"从车中取出"等手推车业务的组件
检查
一个为报到业务提供国家管理的推车组件的背景提供者
与用户认证/账户管理有关的部分
奥特巴
账户管理组件 - 签名、 忘记密码、 更改密码和我的账户, 全部包在一个组件中
账户管理员
和AuthBar一样,但是在一个倒下而不是一个面板中实现的.
地址簿
一个允许经认证的购物者管理其地址簿的组件.
用户连接器
用户操作的上下文提供者 - 在 / 签出, 创建用户
一般用途构成部分
商务App
React 组件的便利包装, 封装所有运行应用程序所需的上下文
图表qlAuthLink
一个阿波罗林克实例,它处理某些图克l请求的授权(如:推车突变). 用于创建一个新的阿波罗克利特实例:
import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client';
import { graphqlAuthLink } from '@adobe/aem-core-cif-react-components';
const client = new ApolloClient({
link: from([graphqlAuthLink, new HttpLink({ uri: graphqlEndpoint, headers: { Store: storeView } })]),
cache: new InMemoryCache()
});
门户
允许在门户网站内渲染回声树的组件。 用途 ReactDOM.createPortal() 在引擎盖下.
建设项目
工程使用命令构建 npm run build。构建进程将所有代码捆绑到一个放在其中的客户端库中 ../ui.apps/src/main/content/jcr_root/apps/core/cif/clientlibs/react-components/dist。 。 。 .
测试组件
这个项目使用 欢乐 用于运行单元测试和 反应测试库 作为测试框架。 这个框架允许您测试组件的行为而不是执行.
单位测试使用 npm run test 命令。 要运行开发过程中的测试, 您可以使用 npm run test:watch 以监视模式启动 Jest.
发展
先决条件
为了发展,请 节点.js (v12+) 和 (v12+) 和 (v12+) 和 ) 无 (v6+)安装.
React 组件直接访问 Magento GraphQL 端点,所以所有调用必须要么从 AEM 相同的端点服务,要么通过添加 CORS 头的代理服务.
要启动本地代理服务器, 您可以使用以下命令 :
npx local-cors-proxy --proxyUrl https://my.magento.cloud --port 3002 --proxyPartial ''
然后在 http://localhost:3002/graphql。 。 。 .
如果您在 Prem 上为 AEM 安装开发, 将在我们的样本调度器配置中包含一个代理( 请参见 解析器配置 详细情况请查阅。 您必须通过调度器访问 AEM( 即使用 https://localhost 而不是 http://localhost:4502).
大楼
要构建您可以使用的组件
npm run build