Module to add a React minicart to Magento 2 KO frontend
This module offers a React-based minicart to replace the existing minicart of Magento itself. Please note that this is an experiment to show how easy it is to build React components. It could be used on live sites, but comes without warranties.
Before you install this module, make sure to install the Yireo_React module first. An install via
composer should pick this up right away.
Use the following commands to install this module into Magento 2:
composer config repositories.yireo-react vcs firstname.lastname@example.org:yireo-training/Yireo_React.git composer config repositories.yireo-react-minicart vcs email@example.com:yireo-training/Yireo_ReactMinicart.git composer require yireo/magento2-react-minicart:dev-master bin/magento module:enable Yireo_React Yireo_ReactMinicart bin/magento setup:upgrade
Make sure to read the Usage section below as well.
This module adds an additional minicart to the Magento 2 frontend, based upon ReactJS, and it removes the old code. This requires the source to be compiled into generic AMD code that works with RequireJS. To compile the source, enter the
view/frontend/ folder from a shell. Next, install all packages listed in
After this, you should be able to modify the files
view/frontend/react_source and compile them to browser code using Gulp:
If you want to develop this code yourself, you can also run:
Gulp is instead of Webpack, because you need most of the cool stuff that Webpack runs with: The webserver is not going be to Node-based, but is the Magento webserver instead. Because of this, hot module reloading can not be used.
- Move Gulp to root of Magento so that it is able to compile React code in any Magento module (
- Create a generic React component with KO observables (like
customerData) so you can use this as a HOC wrapper for obtaining things like the
setState()is called within a React component (and thus that component re-renders), have a callback back to a KO observable, so UiComponents can respond to React rerenders.
- Connect multiple React root-components together with React Portals.
- Swap React with Preact for performance