smile / magento2-react
Module to add React to Magento 2 KO frontend
Installs: 60 451
Dependents: 0
Suggesters: 0
Security: 0
Stars: 4
Watchers: 2
Forks: 12
Language:JavaScript
Type:magento2-component
Requires
- magento/framework: ^100.1|^101.0|^102.0|^103.0
- magento/magento-composer-installer: *
Requires (Dev)
- composer/composer: *@dev
This package is auto-updated.
Last update: 2024-10-10 16:24:55 UTC
README
This module is a friendly fork of the POC made by Yireo which is available here : https://github.com/yireo-training/Yireo_React
Many thanks to Yireo and Jessie Reitsma for setting the first steps of this implementation.
React for Magento 2 Knockout-based 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.
Pre-requisites
This module requires :
- yarn v1.19.1
What does it contains
- A basic integration of React into Magento, allowing to build React components
- This also integrates all Peregrine components shipped by Magento PWA Studio for better reusability.
- A webpack configuration allowing to build the components.
Installation
Use the following commands to install this module into Magento 2:
composer require smile/magento2-react
bin/magento module:enable Smile_React
bin/magento setup:upgrade
The composer install should have copied the files package.json
and webpack.config.js
to your Magento root. If that's not the case, you can copy them manually.
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.