My Journey with React: The story thus far

Over the last 6 weeks I have had the opportunity to dive head first into the React ecosystem. During this time I have gained a substantial amount of new knowledge and expanded my understanding of the state of javascript frameworks in 2016.

During this post I will briefly cover some of the tools/setups I have used and my experiences with them, starting with:

ES6

Long story short, ES6 is amazing and if you're using React you should definitely be using ES6. Traditionally I have come from a Rails background and this has resulted in me using CoffeeScript as my preferred method of transpiling to javascript. Getting started with ES6 I was initially a little frustrated how is appeared that some of the CoffeeScript goodies seemed missing in ES6. This was quickly forgotten when I fully realised the power of ES6, and how/why certain features from CoffeeScript were omitted. Here are a few of my favourite CoffeeScript elements represented in ES6.

String Interpolation

Interpolation is supported in a similar way, and allows multiline strings in the same way as CoffeeScript.

"CoffeeScript follows the rails string interpolation 
style and allows multiline  
and represents interpolation with a hash ie. 1 + 2 = #{1 + 2}  
"
`es6 uses backticks (instead of double quotes)
supports multilines and uses ${} for interpolation`  
Classes

Both ES6 and CoffeeScript add the much needed concept of classes to javascript. The main difference here is that ES6 now allows us to define explicit getters and setters for these classes

class Company {  
  constructor(name, address, postcode) {
    this.name = name;
    this.address = address;
    this.postcode = postcode;
  }

  get fullAddress() {
    return `${this.address}, (${this.postcode})`;
  }

  set address(address) {
    this.address = address;
  }

  set postcode(postcode) {
    this.postcode = postcode;
  }
}

We notice here that:

  • No semicolon needed after the function name,
  • No function keyword needed
  • No trailing commas after function definition

There are many other things that are new/different to both CoffeeScript and vanilla javascript, maybe I'll get into those in a later post.

AirBnB Style guideline

One of the most useful tools for learning both ES6 and React simultaneously was the AirBnB styleguide. I would strongly recommend having a read over this (and the section on React). I have a flycheck running ESlint and jscs in the background that provides instant feedback when I am writing code that warns me when I am doing something that violates these styles (or simply doesn't compile)

React On Rails

Lastly I have been using the React on Rails gem developed by the guys over at ShakaCode. It provides a seamless pathway to getting React working inside of your Rails application, and a sample project that sets up both hot module replacement, server side rendering and extensive webpack configuration, plus much more.

We have been using this for our React work at GuavaPass and following the conventions set out in the sample application has been a breeze. Both projects are extensively documented, and the guys are very responsive on github. We have also been getting some React consultancy from ShakaCode, mainly through code reviews and high level integration discussions, and these guys are truly at the forefront of the React community.