First things first, it is important to remember that Angular is a framework and React is a library, which influences the way we compare those two. Obviously, the learning curve with React will be smaller and blending it will other libraries will be easier. Moreover, it allows the twelve-factor methodology to be applied. Using Angular forces you to do everything the ‘Angular way’ but let’s not get ahead of ourselves.
Why Migrate to React?
React is an innovative place
React consists of building blocks, giving you the flexibility to pick and choose the ones suitable for the particular problem you are experiencing. They are also easy to exchange if you ever feel the need to. This exchangeability of React allows experimenting with novel approaches and get them adopted by the community, making React innovative.
Redux and MobX can be used for state management while the React core can be exchanged for other building blocks like Inferno and Preact.
Such approaches are impossible with Angular, since it provides its own solutions.
On the other hand, we have Angular, which does not like to mix logic and view, even though there is a way to achieve the same things as in JSX.
React has a simple API
React components come with lifecycle methods. There are only 9 of them that you and use to control your component. Usually, you need only a couple of them even in the case of mature React applications.
Apart from that, you should know a React ES6 class component method
setState() which is used to update internal components state. Obviously, there are more concepts like props and state, but you can read all about them in the official React documentation.
With React you get no steep learning curve. It essentially is a view library that was made to solve one problem. And it does it well.
React has two different ways of defining components: functional stateless components and ES6 class components. Even though functional stateless components are only functions, they come with no boilerplate, which means you should use them when access to the component state or lifecycle methods is necessary. By doing that you are making sure that the components are lightweight and you are keeping them small while being reusable.
Unidirectional Data Flow
Contrary to Angular, React does not have two-way data binding. It follows the rule of unidirectional data flow, which means that the process of debugging is a lot easier. In React, child components are nested within higher-order parent components.
A component deals with updating the internal component state through
What is more, React gives you complete control over the native HTML elements. All that makes React state management predictable and maintainable.
The community is also an important factor you should consider when choosing a framework. The React people are constantly supporting and encouraging each other. No matter if your contribution was related to a blog article or the implementation of a new library. Where there are people there are answers. In a community, nothing goes unresolved. Somebody somewhere will have an answer to your problem or will help you come up with one. What is more, the people standing behind React crave innovation and are experimenting every day, that is why new solutions are welcomed.
Obviously, that that goes not only for React but Angular as well, and every other community. Every programming language has amazing people present behind the scenes, who day by day work on improvements and are ready to help you anytime. However, in my personal experience, there are more high-quality 3rd party libraries in React then in Angular, which goes to show how popular React really is.
There are a couple of different approaches to migration from Angular to React. You can decide to work bottom-up or top-down. In a bottom-up approach you will embed React components into Angular application, but have to bear in mind that this can the state management layer migration. On the other hand, in the top-down approach, you replace big chunks of code, usually URL based, with React ones. This means having two separate state management layers.
A very popular one is the so-called Strangler pattern which consists of modularizing a monolithic architecture and slowly converting it over time. This method includes the creation of a new, parallel view and allowing the two views to coexist to later remove it as users stop using it. To start applying this approach we first have to identify the bounded contexts in the application design. It is important to choose a bounded context that is the smallest and least expensive to refactor.
The goal of every library or framework is to provide tools and solutions that increase productivity and be adaptive to ongoing changes in the industry. React is an amazing library giving developers lots of possibilities. It introduces innovation thanks to its building blocks, offers lightweight components and promotes functional programming. However, if you are thinking about migration from Angular to React make sure to consider the business value and costs it will inevitably entail. Thankfully, with React you gain access to a much larger community and 3rd party libraries which should be able to cover for the migration costs.