ReactJS, the front-end JavaScript library developed by Facebook

This is far from the first time that we at BBVAOpen4U have discussed JavaScript as a programming language that is ushering in sweeping change. The last two years have seen a colossal boom in the use of this syntax, with countless front-end libraries emerging for digital projects, specifically for application development. One great example of this is provided by ReactJS, a JavaScript library used to design single page applications (SPAs).  

One advantage that ReactJS has over other libraries is that it is designed by one of the world’s most important firms. No introduction is required. ReactJS is a JS library developed by Facebook engineers to help developers design interfaces that meet top user experience standards. At the moment the library is in version 0.10.7 and has an open-source license. 

Some key features of ReactJS:

●      This is a JavaScript library, not a development framework in JavaScript. Therefore ReactJS does not compete in the same market as other solutions such as AngularJS, EmberJS or BackboneJS, which we have discussed here on more than one occasion. This is a tool for interfaces similar to Knockout.js.  

●      ReactJS controls only the application view using the model-view-controller concept. Facebook engineers recommend that ReactJS be used together with Flux, the architecture harnessed by the social network to create client-side web applications. This means a shift from a MVC model to a unidirectional data flow. The idea is quite simple: application data flows in a single direction.

●      ReactJS is usually combined with other library types or JavaScript development frameworks, such as those mentioned.

●      Partial updating of DOM with each view change. With each alteration a virtual DOM is modified, which allows the real DOM to change only the aspects where there have been alterations. This makes for better memory use and performance than provided by other frameworks.

●      We have already written how the use of components has emerged as an intriguing trend in application development. The main advantage is that these components can then be reused in subsequent developments. ReactJS is a perfect library for this new approach.

●      ReactJS offers an alternative called JSX, an extension of the JavaScript syntax that has a similar appearance to the XML markup language. This is a statically typed object-oriented language that is designed to be run in all modern browsers. The main advantage of this programming language is that it is concise and simple when defining tree structures via attributes. Furthermore, code compiling is fast both for iOS and Android devices.

●      ReactJS works with the new ECMAScript v6 standard for JavaScript.

●      The learning curve is short for developers in JavaScript.

More about Flux as an architecture for ReactJS

Applications developed with Flux have three components that are based on the actions produced in applications as a result of user browsing: item selection, interaction with buttons or menus… Each of these browser movements generates an event in JavaScript. What do each of the app elements do with Flux as a result of said events? 

●      Dispatcher. This manages all events generated by user browsing and action creation. These actions may trigger reactions, or the opposite.

●      Store. These store the necessary data and then change the view displayed to the user in the app. They connect the Dispatcher with the views.

●      View. This is the visual result of the events and data modifications. 

How to start working with ReactJS

To work with a library such as ReactJS you need three elements installed on your machine: Grunt, a JavaScript library for configuring automatic tasks that saves time and money in app development; Node.js, a server layer runtime environment; and NPM (Node Package Manager), the module installation system used with Node.js.

Grunt installation with NPM:

$ sudo npm install -g grunt
$ sudo npm install -g grunt-cli

ReactJS has two dependencies:

●      Browserify: a popular package in NPM. This tool allows developers to manage client-side dependencies. It supports module installation and configuration via a bundle.

●      Babel: a code-to-code compiler for JavaScript. This allows transformation of ECMAScript 6, the latest version of the ECMAScript language, into ECMAScript 5, which unlike ES6 is supported by browsers. This is the only way to harness the benefits of ES6 without running into problems. Babel is installed via NPM using this command:

[sudo] npm i -g babel

To define the dependencies, the package.json file must be similar to the following: 

{
  “name”: “hello-react”,
  “version”: “1.0.0”,
  “description”: “”,
  “main”: “index.js”,
  “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1″
  },
  “author”: “[TU NOMBRE AQUÍ]”,
  “license”: “ISC”,
  “devDependencies”: {
    “6to5ify”: “^4.1.1”,
    “grunt-browserify”: “^3.3.0”
  },
  “dependencies”: {
    “react”: “^0.12.2”
  }
}

A standard application page in ReactJS:

<!DOCTYPE html> 
<html lang=”en”> 
  <head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <title>Bootstrap 101 Template</title>

    <!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
    <!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
    <!–[if lt IE 9]>
      <script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js“></script>
      <script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js“></script>
    <![endif]–>
  </head>
  <body>
    <h1>Mi primer componente de React dice:</h1>

    <!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js“></script>
    <!– Include all compiled plugins (below), or include individual files as needed –>
    <script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js”></script>

  </body>
</html>

And so would the file main.js:

var React  = require(‘react’);

React.render( 
  <p> Hola, fanáticos de ReactJS!! </p>,
  document.getElementById( ‘root’ )
);

Follow us on @BBVAAPIMarket