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 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
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
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.