Module to add React to Magento 2 KO frontend
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.
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
webpack.config.js to the Magento root. Next, install all of the packages:
Next, you can build React sources in various modules via Webpack:
Alternatively, you can also copy the 2 files to another folder and use the
MAGENTO_ROOT=/var/www/html yarn dev
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
call) are also supported.
The theme is identified with a global variable:
MAGENTO_THEME=Magento/luma yarn dev
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.