If you haven’t used that yet, ReactJs is a javascript library, that helps you to build component based, fast, efficiently rendered view layer for your web applications. React views are usually written as components that can contain some logic, JSX code (similar to HTML) and other components as well.  ou 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.

reactjs logo react

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.

1. Simplicity

Yeah, ReactJs is just simpler to grasp right away. The component-based approach, well-defined lifecycle and use of just plain Javascript make React very simple to learn, build a professional web (and mobile applications) and support it. Since React is just a good and well-designed View you can decide on tools, which you understand to store, update and fetch data.

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:

reactjs debugger structure

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).

speed, performance, football

React solves this problem for us by using VirtualDOM. But what VirtualDOM is?
Virtual DOM just makes of blazing fast modern javascript engines and builds virtual DOM tree in memory. Upon desired DOM update, requested by one of the react components it will calculate the most necessary and most efficient update to the react DOM tree and perform the update.

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.

mobile photo, mac book handy office

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.

5. Testability

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.