You can build React applications from the components, as you would build houses using ready, well tested reusable modules. That’s why I’m a big fan of React. So I will share 5 top reasons why I’m in love with ReactJs.
Awesome docs and strong ReactJs community will give a good support if you are looking ready components or have a question about React API’s.
2. Component-based approach
ReactJs application is just a set of components you wrote yourself or imported from the community. Wait, but why components are so good? Answer is pretty simple, components:
– Composable. You can compose two simple components to some more advanced component.
– Reusable. The sample component can be reused 2 or more times.
– Testable. Since components are good isolated, so they can be well tested. For example, we can test component’s behavior based different input.
ReactJs applications usually look like a hierarchy tree. Root or parent components manage child components and pass state to them, and child components just render things based on that input to the state. Below on the figure, we have an example of the Real ReactJs application, and you can see the way we do organize components:
Quite simple, isn’t?
3. Components are just functions of state
For everyone, who had heard something about Functional programming superpowers but was too shy or lazy to start with, here is your time to start thinking in a functional way with ReactJs way. ReactJs components can be treated as functions of state that take some state via params and produce a small bit of Virtual DOM.
React defines the state as the single source of Truth and lets everything else actually to react (or not react) to the data changes. That’s why we have methods like shouldComponentUpdate or componentWillUpdate in a typical component. Good React component will be clear and simple, defining the simplest rule of rendering stuff based on the state it received.
So just note, that ReactJs components can and should behave like functions of the state.
4. Performance and VirtualDOM
If ReactJs views do should change the output on state change, it could be a problem if a state would change too frequently. Rendering to DOM is super slow and resource expensive, so we need to be careful with abusing DOM with meaningless updates (like in AngularJs).
React solves this problem for us by using VirtualDOM. But what VirtualDOM is?
This approach allows to optimize performance and achieve good results on the browser side.
VirtualDOM has even better ideas behind it that just rendering optimizations, but also we can unbind our application from some rendering engine and use our components everywhere we want. For example, we can build some VirtualDOM representation of the ReactJs app on the server using initial state then render it to initial HTML sent by the server.
Another prominent example is rendering to iOS or Android View components on React Native, where we build another kind of virtual DOM and change a state of Views on mobile devices.
That’s one more big thing about ReactJs.
ReactJs applications are super easy to test. Here I complained about testing problems with AngularJs, but React just astonished me by incredible simplicity.
As we mentioned above, React views can be treated as functions of the state, so we can manipulate with state we pass to the ReactJs view and take a look at the output and triggered actions, events, functions, etc. Also right out of the box, we do get very useful test utils https://facebook.github.io/react/docs/test-utils.html that allow to use shallow rendering or mock desired components.
That were top 5 reasons why do I love to use ReactJs for building front-end applications.