Migrating to React

I’m working on turning the web app from a functional prototype into something that is much more user friendly at them moment. As part of this process I found out about “React”. This is a framework for creating user interfaces that update in real time, exactly what we want to do! It’s used in a lot of websites, Facebook being one of the most high profile ones.

I had already written code to update the DOM (document object model, the structure of the page that is usually defined in HTML) in real time, but even though it worked, my code was difficult to read, hard to edit and would not have scaled well. Its been difficult getting my head round how React works, as it’s quite different from what I am used to, but it makes it so much easier to change and add to the site once it is setup.

The official tutorial is pretty good, if you want to know the details. Here’s a brief summary of how it is different to plain old HTML + JS.

There are few prerequisites for setting it up. The recommended way to use it is with something called JSX (which I’ll get to soon). This is a language, but it must be compiled. Babel is a javascript addon that can do this. it also allows you to use the ES2015 standard for javascript which has more features (eg. classes). It’s also worth using an addon which can bundle together your JS files. I used browserify. This makes your code more efficient by putting it all into one file for the client, and also allows you to use node.js server functionality that you normally wouldn’t be able to use client-side.

Now, JSX is like Javascript but with more features. The salient one for React is XML-like syntax for describing the web page. This essentially means you can write HTML straight into the Javascript code. This means A. you don’t have to spread the code across different files, and B. you don’t have to write HTML within strings (which can get messy once you are doing lots of concatenation).

You define components as functions which return JSX code, or classes with a render function that returns JSX code. You then call these functions or classes in a special React render function that displays everything to the user. The clever bit is that React classes have a property called state. You can use the state to define what JSX code you output, and when ever its state changes, React automatically updates the display. So for us, we can send the device connections on the server to the client and set the state of the React class based on this information. We then create JSX code that displays the connections stored in state, and whenever it changes, it updates automatically! Here’s an example of the render function. What look like custom XML tags are components that have been defined elsewhere (in the interests of encapsulation):

render()
{
    return  <div className = "page">
                <div className = "row">
                    <div className = "col-md-2">
                        <MainMenu />
                    </div>
                    <div className ="col-md-10">
                        <div className = "panel-main">
                            <div className = "row">
                                <Tests />
                            </div>
                            <div className = "row">
                                <div className = "col-md-3">
                                    <DeviceList senders = {this.state.senders}
                                                receivers = {this.state.receivers}
                                                onSelectDevice = {this.handleSelectDevice}/>
                                </div>
                                <div className = "col-md-9">
                                    <Details selectedDevice = {this.state.selectedDevice}/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> ;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s