ReactJS Explained: Why It Is Great for Development

What is ReactJS?

Sometimes mistakenly named a JS framework, React indeed resembles a framework due to a deep integration with Redux and Flux libraries, imposing their own architectural patterns. Often compared with AngularJS, a popular JS framework, React is a library, which brings both limitations and advantages.

React is very flexible and can be used for UI projects of any size and platform, including mobile, web and desktop developments. Developers frequently use React for small and medium size projects, where there’s no need to deal with the global models. At the same time, lots of world-known companies utilize React in their products, e.g., Netflix, Dropbox, Khan Academy, Reddit, Imgur and many others.

We at Infopulse found React to be very beneficial for our needs. One of our React-based solutions, developed for an external customer, is a large multi-module web application. Approximately six people are currently working on this project. The product release is planned for summer 2017 with support and maintenance following.

The system we’re working on digitalizes and automates a massive workflow, providing the highest levels of transparency and security. A legacy JQuery-based system was unstable, non-secure, showed bad performance and lacked many features. We could neither update nor migrate the outdated system and needed to re-develop everything afresh, using React for the frontend development and C# for the backend.

Benefits of React for Development

When compared to regular MVC and other JS frameworks, React offers many advantages. Let’s have a look at some of them.

1. Code Scalability and Flexibility.

Just like Angular, React utilizes a component method for development, allowing to build scalable and flexible apps. Material-UI framework provides an extensive base of components and modules, showing a perfect synergy with the ReactJS library.

If we go deeper to React API, we can review the state of the components in any moment of time. Top-level React API components are designed for the functional approach. Components are divided into classes, thus they can be easily inherited, extended and scaled. Moreover, Redux or Flux libraries vastly expand core features of React. E.g., it is possible to store the history of the whole application in a local storage with Redux library.

React Top-Level API allows creating encapsulated components. E.g., if we have a page with a menu and a grid, a standard MVC approach suggests creating separate models for each of the page elements. React describes them with one model while merging and processing data via Redux .

//MENU EXAMPLE

 import React from 'react';
import {connect} from 'react-redux';
import {MenuItem} from '../path-to-menu-item.jsx';

class Menu extends React.Component {

	render() {
		return (
			

				{
					this.props.menuItemList.map(item => )
				}
			

		)
	}
}


const mapStateProps = (state, props) => {
	return {
		menuItemList: state.menuItemList
	}
};

const mapDispatchToProps = (dispatch) => {
	return {}
};

export default connect(mapStateProps, mapDispatchToProps)(Menu); 

When developing mobile apps, it is recommended to use React Native, a separate framework for mobile app development coming with a large dedicated library of components, specifically designed for mobile development. Unlike PhoneGap and Cordova, React Native doesn’t require browser or WebView, utilizing JavaScript API on top of native components. This allows for a smoother processing and faster performance in comparison to both Cordova and PhoneGap.

All that results in a smooth scaling of each component, and better and easier project development. As we constantly add new features to the system, React allowed us to add new components and modules on the fly.

2. Reduced Development Complexity and Reusability.

Another huge benefit of React is JSX syntax extension, which offers an excellent reusability. The standard React mechanics suggests using standard inline styles, described with JavaScript objects. JSX merges HTML, CSS in a JavaScript code, removing the pain to insert links to other files via attributes. Any component can be freely declared anywhere in the project while obtaining a certain predefined unique state.

If some parts of the code have to be handled universally by any browser, we can use Sass or Less preprocessors for extra tuning. This allows to easily implement and import any parts of the code as regular JavaScript objects.

In the following example, a grid component was described by a template, while the table component was described with material UI. Although these templates differ from regular HTML templates, they all are based on an HTML template.

//EXAMPLE TABLE (MATERIAL UI)

import React from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

const TableExampleSimple = () => (    
   < Table> 
     < TableHeader> 
      < TableRow> 
         <TableHeaderColumn > ID  </TableHeaderColumn> 
        < TableHeaderColumn > Name  </TableHeaderColumn> 
         < TableHeaderColumn > Status  </TableHeaderColumn> 
       < /TableRow> 
     < /TableHeader> 
     < TableBody> 
       < TableRow> 
         <TableRowColumn > 1  </TableRowColumn> 
         < TableRowColumn > John Smith  </TableRowColumn> 
         < TableRowColumn > Employed  </TableRowColumn> 
       < /TableRow> 
       < TableRow> 
         < TableRowColumn > 2 < /TableRowColumn> 
         < TableRowColumn > Randal White </TableRowColumn> 
         < TableRowColumn > Unemployed </TableRowColumn> 
       < /TableRow> 
      < TableRow> 
         < TableRowColumn > 3  </TableRowColumn> 
         < TableRowColumn > Stephanie Sanders </TableRowColumn> 
         < TableRowColumn > Employed  </TableRowColumn> 
       < /TableRow> 
       < TableRow> 
        < TableRowColumn > 4  </TableRowColumn > 
         < TableRowColumn > Steve Brown </TableRowColumn > 
         <TableRowColumn > Employed </TableRowColumn > 
      < /TableRow > 
     </TableBody > 
   < /Table > 
);

export default TableExampleSimple;

3. Reusable Actions and Correctness of the Code.

Redux library helps to generate an infinite number of reusable actions that can record the state of the component in a global state model. Based on this model, we can distribute data to all components. This speeds up development, as we don’t need to consider possible faults, collisions of models, junctions or cases when a controller would result in errors by trying to handle models one by one. Instead, each action plays a role of a controller, removing the pain to rewrite the controller multiple times to get rid of errors .

//ACTIONS/REDUCERS/WORKFLOW

//COMPONENT

 import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {MenuItem} from '../path-to-menu-item.jsx';
import {increment} from '../path-to-action.js';

class CounterButton extends React.Component {
	render() {
		return  < button onClick={(pr) =>  this.props.increment(this.props.counter)}> Clicked: {this.props.counter} </button > 
	}
}

 const mapStateProps = (state, props) => {
	return { 
		counter: state.counter
	}
};

const mapDispatchToProps = (dispatch) = > {
	return {...bindActionCreators({increment}, dispatch)}

};

export default connect(mapStateProps, mapDispatchToProps)(CounterButton);

//ACTION

export const increment = (counter) => {
	return {
		type: 'INCREMENT',
		counter: counter + 1
	}
}

//REDUCER

 export default function reducers(state = {counter: 0}, action) {
	switch (action.type) {
		case 'INCREMENT':
			return {
				...state,
				counter: action.counter
			};
	}
}

4. Increased Performance.

Virtual DOM and speed of DOM processing are huge advantages of ReactJS. When compared to Angular 2, which emulates access to shadow DOM, React can show at least a 20% better performance in small and medium size projects. E.g., our system showed a stable and high performance during peak loads (10,000+ connections). Using Angular requires deep knowledge of HTML syntax, which is much more complex to React’s pure JavaScript-based model.

As both React and Angular continuously evolve, community constantly discusses their pros and cons, offering endless arguments for and against each of the JS technologies. We at Infopulse will continue utilizing both React and Angular for our future projects, depending on our customers’ needs. We recommend anyone working with such projects to review both options, as they offer various benefits.

Do you have any suggestions which technology is better? Do you plan any project with React? Get in touch and let’s have a talk!