Integrating React.js into Magento 1

You’re probably wondering why I’m making a tutorial for Magento 1. Well, since my last few post I began working at a company who’s shopping cart is still based on M1. I do miss working on M2 but the fact is that people still use M1 because it’s still supported. Not only that but it’s a very proven platform with tons of easily accessible guides and community help. At the same time it’s not the most advanced platform on the frontend. The web is still advancing and companies still need to provide their customers with the best shopping experiences they can, this is where React.js comes in.

If you came across this post, you probably know what react is already but if you don’t here’s an (extremely brief) explanation:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

reactjs.org

Why React? It’s popular, It’s proven, and most importantly, it provides users with a smooth and efficient user experience. On the development side it allows for a lot less duplication using modular components and thanks to ES6 there are some pretty modern programming principles baked in. I’m not going to go into detail about how to use react or what it can do for you. If you’ve never used react before I recommend the hands on tutorial from react themselves here.

Now let’s get down to business.

First and foremost, this tutorial assumes you’re using a *nix based operating system and are familiar with the command line. You’ll also need to make sure you have NPM installed first. The instructions for how to do this varies depending on the development environment you’re currently using. I won’t be explaining that here but instructions for your environment are only a google search away!

Once you’ve installed and verified that NPM is installed, navigate to your magento directory and run the following commands:

npm init 
npm install react react-dom --save-dev
npm install babel-core babel-loader webpack --save-dev
npm install babel-preset-es2015 babel-preset-react --save-dev

Now all of the components required to create a react app are installed but magento still has no idea your react app exists. You’ll need to create a webpack.config.js, this tells react where to compile the js file that makes your react app. Here’s a basic example that will compile to the /js/ directory of your magento root (/var/www/ in my case):

var path = require('path');
var webpack = require('webpack');
var node_modules = path.resolve(__dirname, 'node_modules');

module.exports = {
    entry: {
        app: ['./frontend/index.js'],
        vendor: ['react']
    },
    output: {
        path: "./var/www/js",
        library: 'FooApp',
        filename: "bundle.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
    ],
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: node_modules, loader: "babel-loader" }
        ]
    },
    devServer: {
        contentBase: "./var/www"
    }
};

Next we need to tell Magento to load your react app’s js file so that you can call it in your templates or elsewhere in your theme. Local your theme’s local.xml and add the following code where applicable:

<?xml version="1.0"?>
<layout version="0.1.0">
  <default>
    <!-- Here's the react app reference -->
    <reference name="head">
        <action method="addJs">
            <script>js/bundle.min.js</script>
        </action>
    </reference>
    <!-- This is very broad but you can be more specific by adding it somewhere other than the default node -->
  </default>
</layout>

After all of that is successful you can verify installation by checking your Magento page’s source and looking for your compiled bundle.min.js file.

Congratulations! React.js is now successfully integrated into Magento. You’re now able to create rich user experiences that push past the limits of Magento’s frontend system.

Happy Coding!