Thoughts on React JS

A month back, I was told that ReactJS is picking up well and becoming the hot technology in web UI development. As usual I got curious, and started reading the tutorial. It started off pretty well, so as a next step I wanted to build a full stack prototype application with ReactJS to see how I feel about it. I chose to build a basic trello board with MongoDB as the backend and NodeJS + Express as the web service.

What ReactJS is

It is a just another library for building web UI. If so, what makes it popular ? It all boils down to these three points:

1. State and data are encapsulated into the DOM elements
2. Automatically update the elements when state or data changes
3. Seamlessly propagate data bidirectionally in a hierarchical structure, just like DOM

Let’s talk about them in a little detail on use-case basis.

I just want to build a HTML button that remembers how many times it was clicked. With the traditional jQuery stuff, you bind the click event to a function which updates a … well… global counter. That’s quite easy. Now your friend asks you to build 10 such buttons on a single page. You can’t use a global counter, and things quickly get messy with 10 counter variables in your javascript file for 10 html buttons in the HTML. You are responsible for keeping them in sync. Why can’t each button hold a state by itself ? You can do that via setting a state property on the button element, but accessing and setting it every time is pain. So, ReactJS offers this:

That’s a little MemoryButton component, in ReactJS terms. On your application, just use <MemoryButton/>and the buttons now have their own memory. Some points to note here:

• This is JSX syntax — look at the mix of HTML and JS code in render(). You need a transpiler ( something that converts this to browser understandable JS ). Commonly used one is babel
• Each instance of MemoryButton has its own state, that’s not accessible by other elements
• The MemoryButton gets re-rendered every time the state changes.
• The {} syntax provides variable placeholders, so templating is free.
• This MemoryButton is all by itself, it can be re-used anywhere. Think about DRY.

Keeping the DOM and data in sync is a Herculean task. Back in the days while I was using jQuery, I had to keep track of all the static and dynamic elements by their id, attach, remove properties and event listeners on all of them every time something changes. Like sending a separate email to 100 different people, instead of sending one email to all of them. In the above code, the sync is done for free: The button text is always in sync with it’s state counter. That saves a lot of debugging headache down the line.

HTML is based on DOM. Not the Dom in Fast and Furious movie series. It’s much like composition of elements in a hierarchical tree structure. Elements can contain another elements.

Tree structure

The problem with HTML is that it’s static. It can’t carry a state with it — you need to maintain it separately. Wouldn’t it be good to maintain a state? Wouldn’t it be great if every element can have a state? Wouldn’t it be awesome if the children of an element can communicate with its parents? That’s what ReactJS does. The DOM tree is made up of ReactJS components ( HTML elements with Iron Man suit ) and they can communicate in a hierarchical way: a Button component can notify the ButtonGroup component:

Observe:

• ButtonGroup's notify is passed to all buttons. The bind is necessary to bind ButtonGroup instance to notify
• render() can only render one element — you can’t render a button and a text box — you need to put them in a div
• The data passed to children are accessible by this.props in them.
• Every time the state of ButtonGroup changes, it and it’s children are re-rendered.

In a nutshell, this image explains it all:

React JS Components

Thoughts

Isn’t the article about my thoughts ? Let me summarize them:

• Easy to learn when you know HTML and JS. Learning curve beats AngularJS when it comes to time
• You can’t just have a single HTML page with all ReactJS stuff. You need to create a project scaffold with npm to include babel and other bells and whistles
• I was up and running with a simple Trello board ( not complete, work in progress ) in under 4 hours, from ground zero. Reasoning about the code is easier. Debugging is okay — because babel translates JSX into JS. What you code isn’t the same as what you see in browser
• This is just meant for UI. You need a backend, preferably Node with Express. The simplest solution I found is to create a NodeJS app, creating a ReactJS app inside it and proxying the requests. Thanks Esau Silva
• Once I got a hold of it, the frequency at which you consult StackOverflow decreased, I was able to intuitively try something that somehow works
• Either configure your editor with JSX extension or use IDE like WebStorm. Improper configuring will leave squiggly lines all over your code — you won’t know which of them is an error.
• Naturally, you’d evolve into fitting a complete single page application’s state into the top level application state and sync it with backend.