PHPackages                             elgentos/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. [API Development](/categories/api)
4. /
5. elgentos/magento2-react

ActiveMagento2-module[API Development](/categories/api)

elgentos/magento2-react
=======================

Module to add React to Magento 2 KO frontend

212.5k↓27.8%2JavaScript

Since Mar 15Pushed 4y ago12 watchersCompare

[ Source](https://github.com/elgentos/magento2-react)[ Packagist](https://packagist.org/packages/elgentos/magento2-react)[ RSS](/packages/elgentos-magento2-react/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

This module is based on [https://github.com/yireo-training/Yireo\_React](https://github.com/yireo-training/Yireo_React).

Install
=======

[](#install)

Execute these commands to install all required dependencies.

`npm install react react-dom``npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader glob path webpack webpack-cli`

Put this file in your root:

```
// webpack.config.js

const path = require('path');
const glob = require('glob');

const appRoot = path.resolve(__dirname, 'app', 'code');

const entries = {};

const appPaths = glob.sync("app/code/*/*/view/*/src/*.define.js", {});
appPaths.forEach(file => {
    const relativeFile = path.relative(appRoot, file);
    entries[path.dirname(path.dirname(relativeFile)) + '/web/js/' + path.basename(file.replace('.define.js', ''))] = "./" + file;
});

const vendorPaths = glob.sync("vendor/*/*/view/*/src/*.define.js", {});
vendorPaths.forEach(file => {
    const relativeFile = path.relative(appRoot, file);
    entries[path.dirname(path.dirname(relativeFile)) + '/web/js/' + path.basename(file.replace('.define.js', ''))] = "./" + file;
});
console.log(entries);
if (Object.keys(entries).length === 0) {
    console.error('ERROR: There are no valid files to compile!');
}

module.exports = (env, arg) => {
    return {
        entry: entries,
        externals: {
            react: {
                commonjs: 'React',
                amd: 'react'
            }
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                '@babel/react',
                                '@babel/preset-env'
                            ]
                        }
                    }
                },
            ]
        },
        output: {
            path: appRoot,
            libraryTarget: "amd",
            filename: '[name]' + (arg.mode === 'production' ? '.min' : '') + '.js'
        }
    }
};
```

Add these scripts to your package.json file:

```
{
  ...
  "scripts": {
    "dev": "webpack --config vendor/elgentos/magento2-react/webpack.config.js --mode development && webpack --mode development",
    "watch": "webpack --config vendor/elgentos/magento2-react/webpack.config.js --mode development && webpack --watch --mode development",
    "build": "webpack --config vendor/elgentos/magento2-react/webpack.config.js --mode production && webpack --mode production"
  },
  ...
}
```

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity29

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity32

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/88a6d8dc588e8f2a0948335563a754687f71304f0bd3b7f7049d4bcdc00a563c?d=identicon)[peterjaap](/maintainers/peterjaap)

![](https://www.gravatar.com/avatar/91631a876a2495358801220afbd8d869040f8917b913c21a99b9984ad26634df?d=identicon)[WouterSteen](/maintainers/WouterSteen)

---

Top Contributors

[![WouterSteen](https://avatars.githubusercontent.com/u/5089604?v=4)](https://github.com/WouterSteen "WouterSteen (3 commits)")

### Embed Badge

![Health badge](/badges/elgentos-magento2-react/health.svg)

```
[![Health](https://phpackages.com/badges/elgentos-magento2-react/health.svg)](https://phpackages.com/packages/elgentos-magento2-react)
```

###  Alternatives

[stripe/stripe-php

Stripe PHP Library

4.0k143.3M480](/packages/stripe-stripe-php)[twilio/sdk

A PHP wrapper for Twilio's API

1.6k92.9M272](/packages/twilio-sdk)[facebook/php-business-sdk

PHP SDK for Facebook Business

90821.9M34](/packages/facebook-php-business-sdk)[meilisearch/meilisearch-php

PHP wrapper for the Meilisearch API

74513.7M114](/packages/meilisearch-meilisearch-php)[google/gax

Google API Core for PHP

265103.1M454](/packages/google-gax)[google/common-protos

Google API Common Protos for PHP

173103.7M50](/packages/google-common-protos)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)