Magento 2 ReactJS UI components. How to use React with Magento in the right way 2025!

7 min readJan 13, 2022

The main idea of React is UI Component and not a single-page JS app like Magento PWA and many others.

This Magento UI React Component component approach was created with the Facebook React lead developer. He was very upset when he heard about require, jQuery, and KnockoutJS in Magento 2.

RactJS(or you can use any other JS library like VueJS, AlpineJS etc.) Magento Components let you split the UI into independent, reusable pieces and think about each piece in isolation. This page provides an introduction to the idea of UI components.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called props) and return React elements describing what should appear on the screen.

Magento React Function and Class Components

The simplest way to define a component is to write a JavaScript function:

function MagentoComponent(props) {
  return <h1>Hello, Magento! - {props.name}</h1>;
}

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

You can also use an ES6 class to define a component:

class MagentoComponent extends React.Component {
  render() {
    return <h1>Hello, Magento! - {this.props.name}</h1>;
  }
}

The above two components are equivalent from React’s point of view.

However, function and Class components both have some additional features.

Rendering a MAgento ReactComponent

Previously, we only encountered React elements that represent DOM tags:

const element = <div />;

However, elements can also represent user-defined components:

const element = <MagentoComponent name="React" />;

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.

For example, this code renders “Hello, Magento! — React” on the page:

function MagentoComponent(props) {  return <h1>Hello, Magento - {props.name}</h1>;
}const element = <MagentoComponent name="React" />;ReactDOM.render(
  element,
  document.getElementById('root')
);

How to Add a ReactJS UI Component to Magento an Adobe Commerce

Step 1: Create a new module

We will create a new module called React_Js:

cd <magento2_root>mkdir app/code/Reactmkdir -p app/code/React/Js

Now create two files:

app/code/React/Js/registration.php

Show source code

<?phpuse Magento\Framework\Component\ComponentRegistrar;ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'React_Js',
    __DIR__
);

Copy

app/code/React/Js/etc/module.xml

Show source code

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="React_Js" setup_version="0.0.1">
    </module>
</config>

Step 2: And ReactJS JavaScript and module files

Next, we’ll create a view folder:

cd <magento2_root>mkdir app/code/React/Js/viewmkdir app/code/React/Js/view/frontendmkdir app/code/React/Js/view/frontend/webmkdir app/code/React/Js/view/frontend/web/js

Then add the JavaScript files to the folders:

https://unpkg.com/react@17/umd/react.production.min.js
https://unpkg.com/react-dom@17/umd/react-dom.production.min.js

Step 3: Create a layout update to add a template that will enable the JavaScript module

First, we need to create the layout folder:

cd <magento2_root>mkdir app/code/React/Js/view/frontendmkdir app/code/React/Js/view/frontend/layout

Add JS files default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local CSS resources if needed-->
        <!--<css src="css/my-styles.css"/>--><!-- The following two ways to add local JavaScript files are equal -->
        <script src="React_Js::js/react.production.min.js"/>
        <script src="React_Js::js/react-dom.production.min.js"/><!-- You could also add as an external resources 
        <css src="https://cdn.tailwindcss.com/3.0.12" src_type="url" />
        <script src="https://unpkg.com/react@17/umd/react.production.min.js" src_type="url" />
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" src_type="url" /> -->
    </head>
</page>

The best solution will be reimplement entire page using modern and popular JS library or You can also use requireJS to load react JS:

app/code/React/JS/view/base/requirejs-config.js

var config = {map: {'*': {'react': 'React_React/js/react.production','react-dom': 'React_React/js/react-dom.production',
}},};

But it is the Best Practices to use as little Magento as possible. So it is not the preferable way. You just need to know it is possible.

Default Magento has a bad design. Magento 2 way is the wrong way.

The may idea is to extend Magento with The react components Server-side rendering but to have a fallback to the legacy Magento theme.

Note: Magento to work with the ReactJS without requireJS config we need to inject react before requireJS, or we will have error:

MISMATCHED ANONYMOUS DEFINE() MODULES

We need the Override method:

Magento\Framework\View\Page\Config\Renderer.php;

/*** Render HTML tags referencing corresponding URLs** @param \Magento\Framework\View\Asset\PropertyGroup $group* @return string*/protected function renderAssetHtml(\Magento\Framework\View\Asset\PropertyGroup $group){

And then add the template file default.xml:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" template="React_Js::component.phtml" />
        </referenceContainer>
    </body>
</page>

Step 4: Create a template file

Now, we’ll create the template that will enable JavaScript.

cd <magento2_root>mkdir app/code/React/Js/view/frontend/templates

In the templates directory, add the file app/code/React/Js/view/frontend/templates/component.phtml:

<div id="root">
    
</div><script>function MagentoComponent(props) {  return <h1>Hello, Magento! - {props.name}</h1>;
}const element = <MagentoComponent name="React" />;ReactDOM.render(
  element,
  document.getElementById('root')
);</script>

Let’s check what happens in this example:

We call ReactDOM.render() with the <MagentoComponent name="React" /> element.
React calls the MagentoComponent component with {name: 'React'} as the props.
Our MagentoComponent component returns a <h1>Hello, Magento! — React</h1> element as a result.
React DOM efficiently updates the DOM to match <h1>Hello,Magento! — React</h1>.

Note: Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <MagentoComponent /> represents a component and requires MagentoComponent to be in scope.

Also, you need to use Babel to convert JSX to a normal JS that works with the browser. The code will be:

function MagentoComponent(props) {
  return /*#__PURE__*/React.createElement("h1", null, "Hello, ", props.name);
}const element = /*#__PURE__*/React.createElement(MagentoComponent, {
  name: "Sara"
});
ReactDOM.render(element, document.getElementById('root'));

Use this tool.

Setup Module and Test it

Finally, let’s set up and run the Magento compilation

cd <magento2_root>
bin/magento setup:upgrade
bin/magento setup:static-content:deploy -f
bin/magento cache:clean

You will see this React Component :

You can see a detailed implementation example as a Magento Open Source module there:

GitHub - Genaker/reactmagento2: React Magento 2 implementation. Simple module example how to add…

React Magento 2 implementation. This Simple module explains how to add and use React Components with Magento 2 and…

github.com

Magento ReactJS Magento performance impact

According to Google Page Speed react doesn’t make our site slower

Magento default stuff has more issues than react. By adding an additional library, we are loading 130KB more uncompressed JS (40Kb Gzipped). However, Magento's default theme CSS and JS impacts performance more than the useful React library. It is better to remove Magento Page Builder bloated JS files than React. Also, deferring JS to the bottom will help avoid blocking rendering initial HTML. However, this issue exists only on a slow 3G connection. Facebook and ReactJS community are doing a great job packing React JS libraries for production use.

Working with Magento ReactJS Components, I concluded:

React JS (40Kb gzipped) added to the Magento theme as a stand-along library doesn’t impact performance. CPU utilization and performance impact of the poorly designed Magento UI with RequireJS and Knockout is more harmful than an additional well-designed modern library. If to add ReactJS to the default Magento Luma theme and use broken Magento core as little as possible, the performance and development experience would be much better. Purely written Magento 3-d party or Adobe Commerce extensions are usually more harmful. Magento 2 core stucks!

Magento 2 Default outdated XML+KnockoutJS+jQuery-based UI must die!

Magento 2 ReactJS example module

As an example of the Ready application, we released a sample application with the game designed on React JS:

Before, it was impossible to create a good UI using shameful Adobe Magento UI and KnockoutJS. With the architecture, you can reuse React community components and use the best UI development practices. This extension uses an Open Source non-Magento repo: https://github.com/Meghanath15/EmojiGame_Cpractice18_RJS

As you can see, it is really easy to reuse 3-d party ReactJS components with Magento. Now you can implement your Magento React UI by hiring React developers and not bad Magento Agencies. Nowadays, nobody wants to learn or use Magento 2 silly UI, so it is dead! ReactJS is the future of the Magento and eCommerce frontend!

You can Clone this Magento ReactJS UI Component module repository from there:

GitHub - Genaker/Magento_ReactJS_Example_Module_Game

Contribute to Genaker/Magento_ReactJS_Example_Module_Game development by creating an account on GitHub.

github.com

or install via composer:

composer require genaker/module-react-emojigame

Currently, we are working under a new Magento ReactJS UI Components. It will work as a standard Luma React (https://github.com/Genaker/Luma-React-PWA-Magento-Theme) theme with all PWA features and without defective Adobe Knockout UI.

Update: Luma React Theme released!

Read more about this Magento ReactJS architecture in our first article:

How to use React JS with Magento 2

Combine the power of a React JS front-end library with the internet’s most popular e-commerce CMS Magento 2 / 1

yegorshytikov.medium.com

Update: we made a Core Web Vital performance test of our Magento ReactJS UI theme. There is a result: