PHPackages smile/magento2-react - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. smile/magento2-react ActiveMagento2-component[Utility & Helpers](/categories/utility) smile/magento2-react ==================== Module to add React to Magento 2 KO frontend 16.12.5(7mo ago)4123.7k↓52.4%4[2 PRs](https://github.com/Smile-SA/magento2-react/pulls)OSL-3.0JavaScript Since Mar 22Pushed 7mo ago1 watchersCompare [ Source](https://github.com/Smile-SA/magento2-react)[ Packagist](https://packagist.org/packages/smile/magento2-react)[ RSS](/packages/smile-magento2-react/feed)WikiDiscussions master Synced 2d ago READMEChangelog (4)Dependencies (3)Versions (11)Used By (0) This module is a friendly fork of the POC made by Yireo which is available here : [https://github.com/yireo-training/Yireo\_React](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 =========================================== [](#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](https://github.com/yireo-training/Yireo_ReactMinicart) and [Yireo\_ReactMenu](https://github.com/yireo-training/Yireo_ReactMenu). ### Pre-requisites [](#pre-requisites) This module requires : - [yarn](https://legacy.yarnpkg.com/en/docs/install#debian-stable) v1.19.1 ### What does it contains [](#what-does-it-contains) - A basic integration of React into Magento, allowing to build React components - This also integrates all [Peregrine](https://magento.github.io/pwa-studio/peregrine/) components shipped by Magento PWA Studio for better reusability. - A webpack configuration allowing to build the components. ### Installation [](#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 [](#usage) This module has no real functionality. It is only offering configuration files for other React modules. See the [Yireo\_ReactMenu](https://github.com/yireo-training/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 [](#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. ### Health Score 49 — FairBetter than 94% of packages Maintenance62 Regular maintenance activity Popularity38 Limited adoption so far Community15 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~484 days Recently: every ~566 days Total 6 Last Release 239d ago Major Versions 0.0.1 → 16.9.02019-08-26 ### Community Maintainers ![](https://www.gravatar.com/avatar/3c4859b63b960878ef37185d533dbd629247859679dfcdf465259d6a4a488ee7?d=identicon)[romainruaud](/maintainers/romainruaud) ![](https://avatars.githubusercontent.com/u/2353374?v=4)[Richard Bayet](/maintainers/rbayet)[@rbayet](https://github.com/rbayet) --- Top Contributors [![jissereitsma](https://avatars.githubusercontent.com/u/7670482?v=4)](https://github.com/jissereitsma "jissereitsma (23 commits)")[![romainruaud](https://avatars.githubusercontent.com/u/15340849?v=4)](https://github.com/romainruaud "romainruaud (21 commits)")[![rbayet](https://avatars.githubusercontent.com/u/2353374?v=4)](https://github.com/rbayet "rbayet (9 commits)")[![PierreGauthier](https://avatars.githubusercontent.com/u/4659198?v=4)](https://github.com/PierreGauthier "PierreGauthier (2 commits)") --- Tags magentocomposer-installer ### Embed Badge ![Health badge](/badges/smile-magento2-react/health.svg) ``` [![Health](https://phpackages.com/badges/smile-magento2-react/health.svg)](https://phpackages.com/packages/smile-magento2-react) ``` ### Alternatives [smile/elasticsuite Magento 2 merchandising and search engine built on ElasticSearch 8064.7M49](/packages/smile-elasticsuite)[yireo/magento2-webp2 Magento 2 module to add WebP support to the Magento frontend 2111.3M7](/packages/yireo-magento2-webp2)[yireo/magento2-googletagmanager2 Add Google Tag Manager to Magento 1681.0M5](/packages/yireo-magento2-googletagmanager2)[yireo/magento2-extensionchecker Scan the code of a Magento module 96166.3k3](/packages/yireo-magento2-extensionchecker)[run-as-root/magento2-prometheus-exporter Magento2 Prometheus Exporter 68357.9k](/packages/run-as-root-magento2-prometheus-exporter)[yireo/magento2-disablelog2 Magento 2 module to disable customer logging 31370.7k](/packages/yireo-magento2-disablelog2) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)