Divi Marginalia – React JS and why you should know it as Divi Developer

We announced it some weeks ago while writing our Divi 3.1 Series (that led us to the i-Divi Advanced Audio plugin creation). Now, here we are focusing on React Js and the importance it can assume in Divi Developing workflow.

So, let’s get started!

REACT JS, A BRIEF INTRODUCTION

First of all, what React.js is it? React simply is a Javascript library for building User Interfaces. It was developed by Jordan Walke, a Facebook engineer in 2011 and was released the first time in 2013, so it’s a very recent technology.

Someone is still skeptical about the almost epoch-making importance of this library, but for the most the road seems to be marked and the future in terms of user interfaces is called and will be called React. The number of web and mobile applications written in (or almost in part) React are growing day by day, so it is definitely a must-know for a web developer.

Basically – very very basically – React is made of Components that can be nested one inside the other and be so very reusable; inside these Components the most important method is ‘render()’ that takes input data and returns the html to display in real time with your changes. The real great advantage – to keep the things simple – is that React works on a virtual copy of the Dom (Virtual Dom), then it makes screenshots of it every time a change occurs, compare the previous Virtual Dom and the next one, find the differences(Diffing process) and update the real Dom only concerning those differences (Tree Reconciliation algorithm) without heaving all the process and in a very faster way.

A final note about React and React applications is that it make use (its usage is optional but in fact really recommended) of a Javascript syntax extension called Jsx (Javascript Xml) that takes care about the html rendering without losing the power of Javascript; we will talk about it below.

REACT JS AND DIVI

Here comes in Divi. The Elegant Theme Divi theme was originally developed as all WordPress themes just in Php, some Css and Js files. With Divi 3.0 (on September 2016 ) Nick and his team released the new Visual Builder to create and build from a front-end interface your pages and posts seeing the changes in real time before to publish it and without have to preview the post to see what would be the final result.

The Visual Builder was based on React! Every change you make, the settings you configure, the text and content you write, the colors you choose, all is taken by a React application and rendered to the screen immediately allowing you to see the final result before you publish it.

DEVELOPING IN REACT

So let’s give a look now at the React coding workflow in Divi.

THE BASICS

In Divi 3.1 when you create an extension (using the Divi Extension Tool) you can add new custom modules that properly work also in the Visual Builder. The code you find by default in your Divi Extension is pretty simple and looks like this (you’ll find it in ‘includes/modules’ path):

In short this is the React side of the Php code (in which we have created our custom settings and a render function that return our values when the page/post is published) and it simply render the html in a ‘render()’ function using the Jsx syntax we mentioned above. In this case it access the ‘heading’ and the ‘content’ setting value thanks to the {this.props.content()} syntax, wrapping the first in a <h1> and the second one in a <p>.

A LITTLE MORE ADVANCED CODE

However the things could be – let’s say always are! – more complicated. Here comes the real necessity for a Divi Developer to know more in depth how to work with React. We just mention here some important part of the React code you will not find in the default Divi Jsx example file.

NOT ONLY PROPS: THE STATES

First of all, in the default Divi module (Jsx file) we can see how to work with Props. We can, for example, access our setting value simply by typing a magic formula like ‘this.props.name’ (where ‘name’ is the setting name) and render it in the Visual Builder.

However React Components have also another method for getting data: the states. States are the counterpart of the Props but the first ones are private and while the props are read-only the states can change inside your component.

These element can be very useful for example for checking if an ajax call is loaded or not and eventually showing the Divi Loader in the meantime (we will see an example in the next weeks but for the moment you can get an idea about it giving a look at this post of JanThielemann on DiviSensei.com).

MOUNT AND UNMOUNT

Another interesting part of React Components are the Lifecycle hooks: ‘componentDidMount()’ and ‘componentWillUnmount()’.

In short what these two hooks do is running a function just after the component output has been rendered to the screen. So for example – this is the example of React official docs – you can run a ticking timer function in the ‘componentDidMount()’ and then clear it in the ‘componentWillUnmount’ (see the full example here).

FINAL THOUGHTS

As final thought we suggest you to deepen your knowledge of React. You can do it with premium online courses as those ones of TeamTreehouse for example or at Codecademy.com for free (it’s a very good starting point) and obviously looking constantly at the official and really well written React.org documentation.

About React in Divi, instead, stay tuned on Howidivit.com. In the next weeks we will see real code example about the advanced React code of which we just scraped the surface above.

See you next post!