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
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.
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.
Tarik's example store
You can also deploy the example frontend in minutes with Heroku here.