README

React Magento 2 实现方案。本简单模块解释了如何将 ReactJS 或任何其他框架的微前端 UI 组件添加到 Magento 2 中，并无需迁移到新主题即可忘掉 Knockout/JQuery Magento 2 UI（与现有主题和设计兼容）。结账、管理后台、客户账户和商店的任何其他部分都可以使用传统的 Magento 2 JS 实现方案工作。

更新

新改进的 React 17 版本已作为 react-17 分支提供（https://github.com/Genaker/reactmagento2/tree/react-17）
此版本提供了独立于 RequireJS 的 React 17
默认分支更改为 react-17
创建 Composer 包 composer require genaker/magento-reactjs
VueJS 实现
启用 Magento 配置中的 React，VueJS
移除 Magento 的默认 JS 废物（Require，Knockout，jQuery）配置。您将需要实现所需的功能或使用 Magento Open Source ReactJS Luma 主题
新增 CSS 优化功能
发布 Magento ReactJS Luma 主题

Magento Blazing-Fast React Luma 主题实现

仓库地址：https://github.com/Genaker/Luma-React-PWA-Magento-Theme

关于 Magento 2 ReactJS 实现模块

它不是 PWA 或无头实现，无法与现有网站一起使用。此外，单页应用 (SPA) PWA Magento 2 实现有与 Magento 2 API 性能问题——太慢。此实现是高性能混合 React 集成，与 Magento 2（与 Magento 1 也易于使用）使用页面上的内联 JSON。同一方法用于 Magento 2 后端和前端结账、默认颜色选项卡。也可以使用 Ajax HTTP 请求获取数据（不是最佳解决方案，因为 Magento API 慢且会增加后端服务器负载）。或者，您可以使用我的未来项目“Microservices Magento”来获取数据。我们的最简单 Magento 2 模块使用 WebPack 对 React 组件进行编译，并自动将静态内容部署到 Magento pub/static 文件夹。

您甚至可以在没有任何 Magento 安装的情况下开发 React 组件。您只需将组件复制到 Magento 模块中，并在源中添加一些修复即可与 Require JS 一起使用，并将 React 组件用作 Magento UI 组件。

VueJS 支持

VueJS 是一个用于构建用户界面的渐进式框架。与 Magento 2 UI 单一组件不同，Vue 从一开始就是为了增量采用而设计的。核心库仅关注视图层，易于上手并与其他库或现有项目集成。

JS 库占用大小

ReactJS 17 - 11KB
ReactDOM - 120KB
Preact - 12KB
HTML for Preact - 1KB
RequireJS - 17KB
VueJS - 94KB
KnockoutJS - 67KB
jQuery - 89Kb
AlpineJS - 34KB

关于 Vue.js PWA 和 Magento 2 的想法

阅读此文章：https://blog.vuestorefront.io/yehor-shytikov-pwa-is-a-real-revolution-not-only-in-ecommerce/

从开发角度来看，Magento 2 拥有更好的框架优化。它允许开发者使用依赖注入、插件系统（被认为是有害的面向切面（AOP）软件开发原则，阅读：[https://yegorshytikov.medium.com/magento-2-plug-ins-aod-architecture-are-harmful-dc23c4edb534](https://yegorshytikov.medium.com/magento-2-plug-ins-aod-architecture-are-harmful-dc23c4edb534)），以及布局的 XML 标记。我个人喜欢这样的文件夹结构，即一个目录对应一个模块。Magento 1 比较杂乱，因为一个模块包含多个目录。

尽管 Magento 2 使用了现代的 Symphony 方法，但它仍然有很多遗留代码。尽管它引入了一种新的前端开发方式，但从现在的角度来看，这还不够（遗留）。难怪 Magento 2 在 Vue.js 和 React 取得全球流行之前就已经发布了。这些 JavaScript 框架为开发者增加了更多功能，并且总的来说提供了更多的可能性。

通过 composer 安装 Magento ReactJS/VueJS 扩展

composer require genaker/magento-reactjs

禁用前端默认的 Adobe 破损的 Magento 2 KnockoutJS UI 组件

使用 ReactJS 而不是遗留的默认 JS 构建 Magento 2 管理模块

([https://github.com/Genaker/Magento2OPcacheGUI](https://github.com/Genaker/Magento2OPcacheGUI))

如何为 Magento 2 使用 WebPack

从扩展根目录（React/React）文件夹运行安装 Node.JS ([https://github.com/nodesource/distributions/blob/master/README.md](https://github.com/nodesource/distributions/blob/master/README.md))

npm install
npm start

Web Puck 自动将所有内容编译到 React/React/view/base/web/js/index_bundle.js 中，并部署到 pub/static，无需运行 static:deploy ssh 命令。LiveReload 插件将自动重新加载 Magento 2 页面（这不是 React 社区推荐的解决方案，F5 更可靠）。您只需要在开发过程中禁用浏览器的缓存。此外，您还可以通过 Nginx 配置禁用单个 React 包文件的缓存。

简单部署

WebPack 对于 Magento 开发者来说有时可能过于复杂。我创建了一种使用 React 与 Magento 而无需任何编译/复杂性的方法。只需将这些文件添加到 Magento 安装中即可。

// React JS itself 
<script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script>
// Babel to avoid compilation 
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

//Add to the page to render React component
<div id = "magentoReactApp"> </div>

//Write you scripts using babel 
<script type="text/babel">

var App = React.createClass({
	render: function() {
		return(
			<div className="App">
	             {/*Your APP code there */}
			</div>
		);
	}
});
ReactDOM.render(
	<App />,
	document.getElementById('magentoReactApp')
);
</script>

Babel 对 Magento 是什么？

Babel 是一个 JavaScript 编译器，Babel 是一个主要用于将 ECMAScript 2015+ 代码转换为当前和旧浏览器或环境中向后兼容版本的 JavaScript 的工具链。以下是 Babel 可以为您做的事情

转换语法

为目标环境缺少的填充功能（通过 @babel/polyfill）
源代码转换（codemods）

JSX 和 React 与 Magento 1,2

JSX 是 ECMAScript 的类似 XML 的语法扩展，没有定义的语义。它不是旨在由引擎或浏览器实现。它不是将 JSX 纳入 ECMAScript 规范的建议。它旨在由各种预处理程序（转换器）使用，以将这些标记转换为标准 ECMAScript。在我们的情况下，转换器是 Babel。Babel 可以转换 JSX 语法！

通过 UNPKG 使用 Bable 对 Magento：[https://unpkg.com/@babel/standalone/babel.min.js](https://unpkg.com/@babel/standalone/babel.min.js)。这是一种简单的方法，可以在不进行任何其他设置的情况下将其嵌入到网页中。

当在浏览器中加载时，@babel/standalone 将自动编译并执行所有带有类型 'text/babel' 或 'text/jsx' 的 Magento 脚本标签

Magento 2 实时重新加载

该项目旨在解决您想由您的 Magento 应用程序服务器提供资源，但仍然想由 WebPack 构建管道触发重新加载的情况。

将指向 livereload 服务器的脚本标签添加到您的页面中

<script src="https://:35729/livereload.js"></script>

出于开发目的，最好禁用浏览器缓存 ([https://www.technipages.com/google-chrome-how-to-completely-disable-cache](https://www.technipages.com/google-chrome-how-to-completely-disable-cache))

出于开发目的，使用 Nginx 禁用 React 包缓存（尚未测试）

location ~ index_bundle\.js {
    add_header Cache-Control no-cache;
    expires 0;
  }

类似项目

使用 ReactJS 而不是遗留的默认 JS 构建 Magento 2 管理模块：([https://github.com/Genaker/Magento2OPcacheGUI](https://github.com/Genaker/Magento2OPcacheGUI))

来自一位好人的优秀的Magento 2 React方法：（https://github.com/yireo-training/Yireo_ReactMinicart）

来自integer_net GmbH的类似项目：（https://github.com/integer-net/magento2-reactapp）

许多大型电子商务公司已经使用这种React方法

BestBuy.mx
beautycounter.com
icuracao.com
bloomnation.com
plantt.com
gap.com
nuke.com
puma.com
walmart.com

genaker / magento-reactjs

维护者

详细信息