# smile/magento2-react

> Module to add React to Magento 2 KO frontend

`composer require smile/magento2-react`

Canonical URL: https://packagento.com/smile/magento2-react

## At a glance

- **Vendor**: smile (https://packagento.com/smile.md)
- **Latest version**: 16.12.5 — released 2025-11-06
- **Pricing**: Free
- **Package type**: Magento 2 component
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/smile/magento2-react and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require smile/magento2-react:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## What it does

Module to add React to Magento 2 KO frontend

## 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](https://github.com/yireo-training/Yireo_ReactMinicart) and [Yireo_ReactMenu](https://github.com/yireo-training/Yireo_ReactMenu).

#### Pre-requisites
This module requires : 
- [yarn](https://legacy.yarnpkg.com/en/docs/install#debian-stable) v1.19.1

#### 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
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](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
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.

## Recent Versions

| Version | Released |
|---|---|
| 16.12.5 | 2025-11-06 |
| 16.12.4 | 2025-11-06 |
| 16.12.3 | 2023-07-10 |
| 16.12.2 | 2023-06-06 |
| 16.12.1 | 2021-03-11 |
| 16.12.0 | 2020-10-22 |
| 16.9.0 | 2019-08-26 |
| 0.0.1 | 2019-03-22 |

## Dependencies

### Require

| Package | Constraint |
|---|---|
| magento/framework | ^100.1\|^101.0\|^102.0\|^103.0 |
| magento/magento-composer-installer | * |

### Require (dev)

| Package | Constraint |
|---|---|
| composer/composer | *@dev |

## Quality

Latest release (16.12.5) passes the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | Pass | Pass |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Warning | 2 | 2 warnings (ruleset: Magento2) — 2 auto-fixable with phpcbf |
| PHPMD | Pass | 0 |  |
| Cpd | Pass | 0 |  |
| Composer validate | Info | 1 | valid; 1 advisory note (composer validate --strict) |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | Pass | Pass |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | Pass | 0 |  |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["smile/magento2-react"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

smile is a Magento 2 vendor on Packagento. See https://packagento.com/smile.md for their full catalogue.