As of late, I was working on a Magento 2 module warranty/up-sell and checkout for a client when they sprung this address on me: ‘Can we utilize advanced front-end approach — Respond JS library?’

Since late 2016, the reply to this question has been yes (React.Js 15 was released by FACEBOOK In April 2016). But the steps vital to make a working Magento module may not appear direct, particularly to those who aren’t commonplace 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:

https://github.com/Genaker/reactmagento2

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/[email protected]/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>

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