How to use React JS with Magento 2 and build your own Hyva Theme
Combine the power of a React JS front-end library with the internet’s most popular e-commerce CMS, Magento 2
Want the advantages of modern React JS but need an M2 back-end? This article will explore how to use React or other JS frameworks or Vanilla JS (No JS Framework with Magento 2 PHP framework) and build themes like Hyva.
The team was working on a Magento 2 module warranty/up-sell and checkout for a client when they asked me, ‘Can we use a modern front-end approach – React JS library?’
Since late 2016, the answer to this question has been yes (React.Js 15 was released In April 2016). But the steps necessary to create a working Magento module may not seem straightforward, especially to those who aren’t familiar with both Magento 2 templates and React. In 2022 we released the Magento React Luma Theme implementation.
By default, Magento 2 uses a mixin of the XML, KnockoutJS and JQuery Widgets as UI Components.
We have a new article that describes real examples of the Magento 2 module with ReactJS Component. Read it there:
We built this Magento 2 module. It integrates React, and WebPack builds a library with Magento infrastructure:
Magento ReactJS fee theme
In 2022 we finally released Magento RectJS Luma theme. You can find Open Source Repository There:
Example of the Magento 2 ReactJS Module — Emoji Game :
This implementation is a Hybrid React integration with Magento 2 (with Magento 1 also easy to use). It uses inline JSON directly from the page. The same approach is used in Magento 2 backend and frontend checkout, color swatches by default. Also, the Ajax HTTP call can fetch data (not the best solution; Magento API is slow and will increase the load on your back-end server). You can also use my future project, “Microservices Magento,” to fetch data. Our most straightforward Magento 2 module uses WebPack for JSX React Components Compilation and automatic static content deployment into the Magento pub/static folder.
To fetch Magento Data directly from the database using modern ORM (Laravel/Eloquent), you can use this Magento-less microservice PHP library:
You can also use NodeJS to fetch data from Magento instead of PHP.
NodeGento(NodeJento) is a Magento-less microservice framework. It works with Magento 2 data directly without relying on legacy M2 slowcore code:
Magento components as a Microfrontend
The other approach uses a stand-along react library and embed functionality to the admin/front-end page via Iframe.
The other most straightforward approach to composing applications together in the browser is Iframe. Iframes make it easy to build a page out of independent sub-pages/components. They also offer a reasonable degree of isolation of styling and JS. Magento and ReactJS code not interfering with each other.
As an example, you can see this Magento OPcahe GUI ReactJS UI embedded as iframe implementation :
Update 2020:
After several discussions with the Magento and San Diego React community, we have realized a new version of the Magento 2 React.Js integration without the PWA Studio redundancy and compilation(complication) step using a stand-alone babel script. It can slow down the script execution because of real-time JSX transformations. Then use Compilation. However, for development purposes, it is ok. The performance of React JS is a different story.
Everything that you need to do is to add this code:
// Include React JS itself
<script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script>
// Include Babel to avoid compilation
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
//Add to the page to render React component
<div id = "magentoReactApp"> </div>
//Write your scripts using babel
<script type="text/babel">
var App = React.createClass({
render: function() {
return(
<div className="App">
{/*Your React Magento UI Component code there */}
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('magentoReactApp')
);
</script>What is Babel for Magento?
Babel is a JavaScript compiler Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
Transform React JSX syntax:
- Polyfill features that are missing in your target environment (through @babel/polyfill)
- Source code transformations (codemods)
JSX and React with Magento 1,2
JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself. It’s designed to be used by various preprocessors (transpilers) to transform this syntax into standard ECMAScript. In our case, the transpiler is Babel. Babel can convert JSX syntax!
Use Bable for Magento via UNPKG: https://unpkg.com/@babel/standalone/babel.min.js. This is a simple way to embed it on a webpage without having to do any other setup.
When loaded in a browser, @babel/standalone will automatically compile and execute all Magento's script tags with type ‘text/babel’ or ‘text/jsx’. React Equivalent to the Magento's ‘text/x-magento-init’
Example:
<script type="text/babel" src="components.js"></script><script type="text/jsx">
var magento => () {
return <div className="App"><h1>Magento React JSX Component</h1></div>;
}
});
</script>
Video how to use Stand Alone Babel:
Sorry, guys, it is on Franch ;)
This video, describes Babel Standalone! A package that allows you to embed Babel in any application (including Magento 1/2) without a web pack and compilation!
This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production.
That’s right, your code is not optimized, and loading Babel can be too heavy.
Remember, it’s just for fun. There is another (and probably better) way with HTM (Hyperscript Tagged Markup), a JSX alternative using standard tagged templates made by @_developit , creator of Preact.
The download weight difference is enormous if we don’t need Babel.
LibVersionLoading SizeBabel6.26 < 195KB
HTM2.2.1 > 1KB
<script src="https://unpkg.com/htm@2.2.1" crossorigin></script>
<script type="module">
// Bind htm with createElement
const html = htm.bind(createElement);
</script>It’s like JSX but also lit
The syntax you write when using HTM is as close as possible to JSX:
- Spread props:
<div ...${props}> - Self-closing tags:
<div /> - Components:
<${Foo}>(whereFoois a component reference) - Boolean attributes:
<div draggable />
Improvements over JSX
htm takes the JSX-style syntax a couple of steps further!
Here are some ergonomic features you get for free that aren’t present in JSX:
- No transpiler necessary
- HTML’s optional quotes:
<div class=foo> - Component end-tags:
<${Footer}>footer content<//> - Syntax highlighting and language support via the [lit-html VSCode extension] and [vim-jsx-pretty plugin].
- Multiple root elements (fragments):
<div /><div /> - Support for HTML-style comments:
<div><!-- comment --></div>
Syntax differences
There are few syntax differences by using the tag function html
// JSX syntax
function Header({title}) { return <h1>${title}</h1>} function App() {
const name="World"
return (
<div>
<Header title="Hello, ${name}!"/>
</div>
);
}// HTM syntax
function Header({title}) { return html`<h1>${title}</h1>`} function App() {
const name="World"
return html`
<div>
<${Header} title="Hello, ${name}!"/>
</div>
`;
}
Typical Ecommerce React Components
- Main Menu
- Responsive grids with pagination, filtering, and sorting
- Media carousel with zoom
- Color Selector
- Size Selector
- Quantity Selector
- Search
- Expandable Sections and Accordion for displaying product information
- Add to Cart Button
- Store Locator
- Forms / Appointment / Contact
You can also use any other framework or nonfreamwork with Magento. Hyva uses the same approach using Alpine Js and Tilewind CSS.
