Built by Facebook developers, and used by tech giants like Netflix, Airbnb, and Instagram amongst hundreds of others, ReactJS is seen as the new and trendy JavaScript framework.

Background on ReactJS

Before we delve into what we’ve been doing with it, for those of you unfamiliar with ReactJS, here’s a little background, described best by The New Stack.

‘ReactJS works by storing the state of your application internally, and only re-rendering your content into the browser (the DOM manipulation) when the state changes. You interact with ReactJS by telling it when the state has changed and ReactJS handles all the visual changes to your application for you. This abstraction is brilliant. The implementation is similar to AngularJS which handles DOM manipulation for you through two-way data binding, but ReactJS takes things a step further because it knows when things have changed and when they have not, which makes a difference in large applications. AngularJS relies on dirty checking and a digest loop, and my own experience is that the AngularJS interface does not have the ability to be as intelligent in determining when a change to the DOM is unnecessary and skip the DOM manipulation.’

‘In essence, the ReactJS interface is different than other JS libraries which are more imperative, meaning you tell them to change the DOM directly. Jquery is like this. ReactJS is more like: here is my state, and here is how you should interpret my state and how it will change. Now, I can sit back and let ReactJS handle the expensive and complicated task of making this visible to the user in the browser.’

ReactJS + Moltin = Flexible, Beautiful, Freedom

With flexible, reusable components to make development workflows efficient and giving freedom to your store’s UI, it’s simple to learn and use and fits in with our own philosophies at moltin perfectly. The framework allows you to easily create and integrate a beautiful eCommerce experience.

It was actually Tarik, a freelance frontend engineer who built an example store using ReactJS and moltin.

A bit of background on Tarik

Tarik first came across moltin two years ago and was instantly impressed with the clean API documentation. As he didn’t have an eCommerce project at the time, he recommended it to a friend who built an Angular implementation for one of his clients. This project became proof that moltin was a good fit for JavaScript framework projects.

Fast forward to 2017 and with AngularJS becoming depreciated and Angular 2 having an entirely different API, Tarik took advantage of switching and experimenting with ReactJS. This gave him the perfect opportunity to revisit moltin and create a sample project.

The store

Choosing to use no additional tools for this project, Tarik only had to rely on moltin, which was a great positive for him. The store took one week of total build time, spanning over a month or so and this time included following some very precise designs. He estimates that if you simply want a boilerplate site, you could probably build this within just an hour or two! Great news for people wanting to get a store off the ground quickly.

Tarik’s sample store can be seen at https://react-moltin.firebaseapp.com/ and demonstrates the power and freedom that ReactJS gives frontend developers, including the ability to build beautiful stores whilst still maintaining a simple, yet powerful customer journey.

ReactJS example store

Tarik's example store

To get started on building your own store, sign up for a moltin account if you haven’t already got one and check out our JS SDK.

You can also deploy the example frontend in minutes with Heroku here.

Or to reach out to Tarik about building a ReactJS storefront for you, learn more about him or Tweet directly.

Matt Foyle

Written by Matt Foyle

Partnerships @ moltin