What is React?
Used by engineers for many of Facebook’s new web projects, React is a UI library for building interfaces. However, it is not as well-known as full front end frameworks like Angular and Ember.
React is basically an interface that’s used to display the data. Therefore, we consider it to be the “View” in MVC applications pattern.
In addition, React is focused on components, and is based on the CDD Component Driven Development idea. Right now, it is used in combination with other patterns and libraries such as Flux or Redux in the development of applications for a variety of companies such as Facebook, eBay, Instagram, PayPal, and Airbnb.
Key Points
The React Library has the following key features which are considered the most relevant for developers:
Simple & Declarative
React code can be written in a centralized, intuitive way, simple and declarative for our components.
Virtual DOM
This is an algorithm library that works with a DOM copy of the original page, making sure to check and update the DOM for high performance and effectiveness, updating just the changes as regards the initial version.
Unidirectional Data Flow
The data used in the component goes in just one way, allowing for better control.This is especially important for large and complex structures that have constant data changes.
JSX
Special syntax. Mixing HTML + javascript in the same place, providing for a more focused and centralized development process.
Properties and State
A component is formed by props (properties) and state. The props cannot be changed during the life cycle of the component. However, the state can be changed, and it’s recommended that these changes be made when necessary.
Client and Server Side
React allows the developer to work from both sides. It’s a good alternative to creating isomorphic applications. The advantages of this approach lies in the SEO improvements that become possible.
Life Cycle
A component has three phases during its life cycle. In each stage we can determine different tasks or operations such as requesting an endpoint, loading, visual effects, login, tracers, etc.
These stages are:
- Mounting: The component is being inserted in the DOM.
- Updating: The component is re-renderized and a check for updates is performed.
- Unmounting: The component is removed.
Integration with Browserify and Webpack
React allows for integration and adaptation to these two module bundlers.
Support for ECMAScript 6
This library allows us to write code directly from the latest Javascript version.
Dev Tools
There is a large amount of plugins and add-ons for the main browsers that ease and optimize the process of development and testing.
Use
React is focused on components, and among its advantages are its portability, modularity, reuse and easy integration. React can be a great alternative for apps that require a large capacity of re usage and low coupling. Also, React offers a great user experience because it has an excellent performance response on DOM page drawings.
Integration
React is able to adapt to different libraries and frameworks in order to achieve SPA (single page applications). For example, when developing a trading app or a larger app, one may include the Redux library. On the other hand, in the npm platform there are more than 10,000 components ready to be used in our apps.
Potential
At the moment, React enjoys a large presence in online apps and has a significant adoption share among development teams. In fact, it’s even more widely adopted than Angular 2, for example. The React Open Source community is huge and very active in blogs and Github repositories, where a lot of information and reference codes can be found.
Warning
Some of the points we need to consider when using React:
- Composition – Pay attention to the components hierarchy before thinking about a React app, especially the parent-child relationship and which will have the state to manage changes.
- Styles – One controversial area in the React ecosystem has to do with design, hierarchies and reusing of styles, plus integration with different coworkers (like designers, for example). There are no official guidelines defined for this, because from the component point of view, we apply inline styles. This is a less efficient method and not used by a distributed team. One alternative is to use CSS modules. This will provide integration with coworkers and allow for optimization of styles usage.
- Licensing. Another point to consider is the license. React has a BSD license and any company considering using React should take this into consideration, as there might be a conflict of interest situation.
Tips for developer
I believe there are several things to consider when initializing a React development project. The learning curve with this library is average, and it also it varies depending on the difficulty of the development. Some tips:
- Remember React is just a library.
- Keep the components as small and controlled as possible.
- Write functional components.
- Write stateless components.
- Use Redux and other components too.
- Include propTypes when developing components.
Use cases
At Making Sense we have worked on several React projects. Our main challenges have included managing the re usage and integration of styles using our UI framework. This required us to interact with designers to optimize the re usage of the different components on several applications.
Conclusion
Keeping in mind where we are and considering web trends even beyond what I’ve mentioned in the statements above, React is meant to be a library which can be helpful for a variety of web challenges. It is a trend that has arrived, and it will be with us for a while!