React Quickly summary and review #1

In this series of reviews, I’m going to read and review the book called "React quickly". I hope that my review will help you in your choice of picking up this book and to draw full potential from it.

The book has two main parts called respectively foundation and architecture. At the first glimpse, they seem to be equally divided in terms of the number of pages. The part 1 has 11 chapters

Chapter 1: Meeting React

This chapter explains the utility of this library. It highlights the fact that it is a UI library, that creates self-contained components, each component holds visual representation and dynamic logic. It also lists all the benefits of using React, like reusability, simplicity, and points to the fact that generating components in memory make React very fast.

One of the keys leading to React's simplicity comes from using declarative over imperative style. The author illustrates that by an example that compares both styles on an array of integers, that we want to double.

Code snippet Imperative

var arr = [1, 2, 3, 4, 5],
arr2 = [];
for (var i=0; i<arr.length; i++) {
  arr2[i] = arr[i]*2;
}
console.log('a', arr2);

Code style declarative

var arr = [1, 2, 3, 4, 5],
arr2 = arr.map(function(v, i){ return v*2 });
console.log('b', arr2);

The declarative style allows React to update the view according to changes in the internal state.

Then this chapter presents a brief comparison with Angular. The only point of that comparison that stood in the favor of React and that seemed relevant to me is that on the contrary of React, in angular you have to learn additional Domain-specific Language like Directives. For example, the author found that this example stays in favor of using react (I don’t):

Code snippet Angular

<a ng-if="user.session" href="/logout">Logout</a>
<a ng-if="!user.session" href="/login">Login</a>

Code snippet React

if (user.session) return React.createElement('a', {href: '/logout'}, 'Logout')
else return React.createElement('a', {href: '/login'}, 'Login')

React also furnishes a powerful abstraction giving synthesized methods, properties, and events. It also provides a set of synthetic events for handling touch events, which can be useful when dealing with mobile devices. React can also render its elements server-side which makes it SEO friendly.

React’s virtual DOM exists only in the memory and every time there’s data change, React compares it to the virtual DOM and applies only high necessary changes. For example, if the content of <p> tag changes, react will update only the "innerText" property of that element, without recreating a new one.

Due to the fact that React is only (it can be extended though) a UI library, it can be integrated with any backend and any front-end data library. However, React is mainly used as part of single page architecture.

From v0.14 and above React divided its library from into React Core and ReactDom. That allows sharing code between React Native and React from the Web.

React isn’t a full MVC framework, but it can become one and to achieve this goal, it needs to be paired with other libraries to handle rooting (ReactRooter) and to handle data (Redux). Due to the fact that React can create self-contained chunks of the Ui, those are often reusable, and so, many components are already available and one can use them without having to recreate the wheel.

Then follows the creation of the traditional hello world example. In this part it is strongly recommended to never deploy an element directly in the body; This could lead to conflicts with other libraries or with browser extensions.

Review

This chapter has tried to explain many concepts of single page application programming and MVC architecture. The author tried to bring everything together in the same chapter at the risk that certain concepts remain unclear, and poorly documented. The JSX part did not bring anything to the table because, despite the fact that JSX is  mentioned several times, not any example was given about it. There is also an attempt to compare React to other equivalent solutions like jQuery, Angular and other template libraries. The arguments against the use of some of them especially Angular were in my opinion unconvincing. The author claims that if you use React you will not have to learn a DSL (Domain-specific language), but what is JSX if not a DSL?