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

Want the advantages of a modern React JS, but need a back-end that feels familiar? In this article, we’ll go through how to use React with Magento 2 framework.

Image for post
Image for post
Magento 2 React JS without PWA theme

Recently, I was working on a Magento 2 module warranty/up-sell and checkout for a client when they sprung this question on me: ‘Can we use modern front-end approach — React JS library?

Since late 2016, the answer to this question has been yes (React.Js 15 was released by FACEBOOK 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.

By default Magento 2 using a mix of KnockoutJS and JQuery Widgets as UI Components.

I built this Magento 2 module. It integrates React, and WebPack builds a library with Magento infrastructure:

This implementation is Hybrid React integration with Magento 2 (with Magento 1 also easy to use) it uses inline JSON directly from the page. The same approach used in Magento 2 backend and frontend checkout, color swatches by default. Also can use the Ajax HTTP call to fetch data (not the best solution Magento API is slow and will increase the load on your backend server). Or you can use my future project “Microservices Magento” to fetch data. Our simplest Magento 2 module uses WebPack for JSX React Components Compilation and automatic static content deployment into the Magento pub/static folder.

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 stand-alone babel script. It can slow down the script execution because of real-time JSX transformations. Than use Compilation. However, for development purposes, it is ok. The performance of the React JS is a different story.

Everything that you need to do is just 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 backwards 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 intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript. In our case 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 ;)

In 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!

Magento 2 as a Service react storefront Nuxt.js frontend.

Currently, we are working under the Magento SaaS backend implementation with the React PWA Open Source storefront. Coming soon…

Magneto Shop SaaS (http://www.magneto.shop) platform with a shared marketplace based on Magento/Adobe Open Source Fork which utilizes our proprietary serverless technology in order to significantly improve performance and reduced cost x20 times with clusterized and multi-region stateful cloud application.

Technologies used: Magento Terraform Cloud cluster provisioning in multiple regions. Node.JS API first microservices — billing, provisioning, account, serverless Lambda applications. React JS frontend, Material UI ECommerce React Components, Nuxt.js. PWA marketplace storefront with server-side rendering developed the fastest possible shopping experience by prefetching and caching linked pages before the user navigates to them, providing an “instant back” experience by saving page data in window.history.state so that it does not need to be prefetched when the user navigates back. Google page speed optimization.

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 / Apponintment / Contact

Written by

Magento/APP Cloud Architect. Melting metal server infrastructure into cloud solutions.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store