In the ever-expanding world of client-side web interfaces, frameworks and libraries are evolving fast and free. Whilst the previous trend moved toward entire client-side requirements such as AngularJS, Ember and Meteor, React took a different approach.

What is React?

Created by Facebook in 2011 for use on Facebook.com which is one of the highest trafficked websites in the world. React focuses narrowly on the rendering and event handling of client-side user interface components leaving the programmer with the responsibility and opportunity to choose other specialized components to complete their application.  The approach taken can then alter depending on the style and requirements of the project. It is an Open Source, client-side web library for building composable user interfaces with many advantages over the current competition.

So why React?

Flexibility

React is remarkably flexible. React embeds fewer opinions than its competition and in doing so is more flexible than opinionated frameworks like Angular and Ember. This is due to React being a JavaScript library and not a framework. Since its inception React has been used to create not only Web Apps, but Static Sites, Mobile Applications, Server Rendering and even Virtual Reality Applications.

Developer Experience

React provides a rapid feedback development experience that allows the developer to work with single components in isolation. Speaking personally, this not only helps with general development but increases the ease at which someone new to web development can understand the use of components and visualise concisely and instantaneously the impact of newly understood syntax.

In addition, React is special as it offers a simple API that’s easy to learn. There are very few concepts to master giving easier comprehension in a shorter period. The API is so small and straightforward that you will find yourself rarely needing to check the documentation.

With React components, you import React using a standard JavaScript import statement, then you can declare a component using a standard JavaScript function or, as in the example below, using a standard JavaScript class. In this scenario, it would be better to write a functional component but for the purpose of our example, we shall initialise a class component.

Import React from ‘react’;

class Hello extends Component {
   render() {
      return <div>Hello {this.props.name}</div>
   }
}

You may be wondering what is occurring inside the render function. ‘It looks like HTML, but it’s sitting inside a JavaScript file. How does that work?’ This is called JSX. On the surface, it looks like HTML but it compiles down to JavaScript. It is possible to avoid JSX if you want to write pure JavaScript but JSX is recommended as it is easier to read and nest.

Traditional libraries like Angular, Vue and Ember seek to embrace the power of HTML by inventing their own syntax for simple operations like looping. For example, to loop through an array entitled “items”:

Angular:    <div *ngFor=“let item of items”>
Vue:        <div v-for=“item in items”>
Ember:  {{each item in items}}

React went the exact opposite route. Instead of trying to make HTML more powerful, React simply handles HTML with JavaScript. It’s unnecessary to learn new framework-specific keywords, rules and syntax for conditionals, looping, and so on. You just use JavaScript. JavaScript already has a built-in function for iterating over an array called map. Basically, traditional libraries put fake JavaScript in HTML. React takes the reverse approach by putting fake HTML in JavaScript.

React:      {users.map(createUser)}

React encourages you to get better at JavaScript and in doing so you also become better at React. For a young developer, the payoff is substantial.

Performance

The React team recognized that JavaScript is fast, however, it was the Document Object Model (DOM) that made it feel slow. Updating the DOM was expensive and so to update it in a more efficient manner would help performance.

For every DOM object, in React, there is a corresponding “virtual Dom object”. This is simply a representation of a DOM object. It exhibits the same properties of a real DOM object but lacks the power to directly alter what’s viewed on the screen. Changing the DOM is slow but changing the virtual DOM is much faster.

When a JSX element is rendered, every single virtual DOM object gets updated. The cost here is insignificant as nothing is drawn on the screen yet. Once the virtual DOM has updated it is compared to a snapshot of that was taken right before the update. Using this comparison, React determines exactly what has been altered and alters only these objects on the real DOM. This enhances greatly the efficiency of the rendering process giving React a notable performance advantage in many cases.

Testability

Typically testing a front-end is hard however React’s design is very friendly to automated testing. With React, the vast majority of your components can be plain, pure functions meaning they will always return the same output for a given input. It has no side effects. React’s functional component style makes it trivial to test your component. For example, in the function below if I set the message prop to “Shane” for this component it will always output a div that contains the text “Hello Shane”. This is reliable, deterministic and has no side effects.

Function Hello(props) {
   return (
      <div>
        Hello {props.message}
     <div>
   )
}

While this is a simple example, this design can scale to highly complex user interfaces.

Tips for beginning with React

Environment

For the developer who wants to dive straight into the action, I would advise against a completely manual approach to setting up your React environment. Time can be wasted figuring out the ins and outs of a React project structure when completely configured builds are readily available. The Facebook team have released an open source React app creator helpfully entitled ‘create-react-app’. All you must do is ensure NodeJS is installed on your machine and come up with a helpful title for your project.  This can be done using your command line.

npx create-react-app my-app
cd my-app
npm start

However, to get an instant, running start at playing with React many browser-based environments exist such as JSFiddle, JSComplete and a personal favourite CodeSandbox.

Use functional Components

If you don’t need internal states or lifecycle methods use a functional component instead. This will lead to less code which shall be easier to understand, it’s simpler to test and you’ll find it easier to extract smaller components.

class Hello extends Component {
   render() {
      return <h1>Hello, {this.props.name}</h1>
   }
}
function Hello(props) {
   return <h1>Hello, {props.name}</h1>
}

Both code snippets serve the same purpose, with the latter being more efficient.

Keep your Components small

Small components are easier to read, test, maintain and reuse. Particularly when delving into a major project, you will thank your former self when returning to develop and use your code.

Understand how to handle ‘this’

If you are using an ES6 class you will want to autobind ‘this’ manually as React will not automatically autobind the functions inside that component. There are multiple methods to achieve such as binding in render, in the constructor or in the arrow function of a class property. They all have their individual drawbacks, however, so it would be wise weigh them up before choosing your preferred method of application.

 

At this point, you should have a brief overview of the What and Why of React. It has only been a few weeks, but I would fully recommend to any wannabe beginner developers to familiarise themselves with the React world. I’ve found it immediately rewarding and if you can come to grips with the basics your first project is sure to, at the very least, create a Reaction.

 

To stay in the loop for further news, guides, resources and more, sign up to "insight" our flagship weekly NetSuite and Business Software Newsletter, click here.

 

Comment