yireo/magento2-react

Module to add React to Magento 2 KO frontend

Installs: 8 895

Dependents: 2

Suggesters: 0

Security: 0

Stars: 25

Watchers: 4

Forks: 12

Open Issues: 0

Language:JavaScript

Type:magento2-module

16.9.1 2021-04-05 05:25 UTC

This package is auto-updated.

Last update: 2024-10-09 11:33:14 UTC


README

The current Magento 2 frontend is based on Knockout, RequireJS and ES5 code. However, with an eye on the upcoming PWA moves, it is already possible to add React components to the Magento 2 frontend as it is. This Magento module serves as a base module, to offer a generic Webpack configuration for modules like Yireo_ReactMinicart and Yireo_ReactMenu.

Installation

Use the following commands to install this module into Magento 2:

composer require yireo/magento2-react:dev-master
bin/magento module:enable Yireo_React
bin/magento setup:upgrade

Next, copy the files package.json and webpack.config.js to the Magento root. Next, install all of the packages:

yarn install

Next, you can build React sources in various modules via Webpack:

yarn dev

Alternatively, you can also copy the 2 files to another folder and use the MAGENTO_ROOT variable:

MAGENTO_ROOT=/var/www/html yarn dev

Usage

This module has no real functionality. It is only offering configuration files for other React modules.

See the Yireo_ReactMenu module for a dummy component.

The goal is to either create a module with a view/frontend/react_source folder or a theme with a react_source folder and have this Webpack configuration pick up on those files to create a single bundle. Dynamic bundles (with an import() function call) are also supported.

The theme is identified with a global variable:

MAGENTO_THEME=Magento/luma yarn dev

Experimental

This module is experimental and only meant for developers that are happy to invest time into it. It doesn't mean that it is costing a lot of effort, it simply means that the project requires knowledge on React essentials.