Why I love ReactJS library?
I’ve been in web development since mid-2016 and do the majority in front-end side. Back on that day, I encountered ReactJS library and never attempted since then to use another UI library. So what’s the reason and what things which I like in the library? Hear me out!
Easy to use and learn
Many people say that React is complicated. It is not easy to learn and to grasp. When I can hear this frustration in other developers, in my mind I don’t get it why they said it is complicated and hard to learn. Is it because the codes written in React are hard to read? That is misleading. React is a JavaScript library. The majority of the codes are written in JS. If you find yourself having a problem in reading React codes, then you need to review and enhance your JS skills and be consistent. Don’t blame the library! There’s a lot of resources out there, but I can suggest this book series by Kyle Simpson. Maybe the API’s are complicated? Nyah… Reactjs library is one of the libraries out there where it maintains minimal API’s to handle UI. Minimal API’s lead to more easier to use and maintain the codes. Maybe the use of JSX? I’ll always choose JSX than the other tech out there. Why because it is easy to reason about when talking about defining elements (HTML-like) and easy to integrate some logic. Note that JSX is a syntax extension for JavaScript and it is an expression too so you can easily embed it to your codes!
Indeed, React is easy to learn. There are challenges when using some things or new things, but it doesn’t mean it is now difficult when using it.
Provides tools to separate concerns
Traditionally, if you will create a UI feature, the HTML, CSS, and scripts are separated together. This pattern is good but if the UI feature becomes fat, this will create an issue like adding another feature or bug fixing because you need to jump around across the project codebase just to check if no codes will break, etc.
Is there anything better than to this? Yes! developers created solutions to solve this kind of problem and one of these is React Component. What we want is to separate the concerns not the technologies! With React, you will create a Component if you want to re-use a UI feature. Then, the display logic along with the markup, sometimes having inline styles, are collocated and defined on the scope of the Component. This collocation is great because if you think deeply, the display logic like the `onClick` handler and the button element is very related and you will use it together. This is highly cohesive!
A React Component is also loosely coupled. The dependent Component is not aware of the implementation details of the dependency Component. Through this, you can easily refactor the details of the dependency without breaking another Component and reuse it to another Component.
The question is “Where is the Separation of Concerns”? Just like I said, creating a UI feature in React is achieved via Component. This unit separates its concern through encapsulating information and grouping related elements together (high cohesion) without affecting the dependent Component (loosely coupled). Watch this video about why loosely coupled unit with higher cohesion would create better separation of concerns.
Declarative UI and simply performant
I remembered when doing some UI features with DOM. You will need to handle the DOM updates in every state changes manually. Because you need to handle it with yourself, you need to make sure to do some painting in the browser in a more efficient way like batching updates. It can also lead to more layout trashing.
With React, mostly you don’t need to think about this performance optimisation on how to handle it and also how to make your UI sync to the state update. React internally will do some optimisation in your codes like batching updates coming from Components to avoid frequent browser painting via Virtual DOM. In default, React app is very fast!
When making the UI consistent, React will assure it will yield the same elements whatever the props or state of the Component is.
React Developer Tools is great
This developer tool is simply amazing. It shows the React tree of your application including the name of your components, the data it currently uses like props and state. You can also simulate those data and see the changes in realtime and many more. Cool huh? It also ships a Profiler tool. Just like the almighty Chrome Performance Tool, you can utilise this tool to profile your app for performance reasons. It also integrates some familiar stuff which you can see in the performance tab like Flame graph, Components chart, and more.
This site walks you on how you can use this developer tool.
The library for the developers and the customers
People behind this amazing React always care about who uses the library. Just like the introduction of the React hooks. This makes the life of the developers easier in handling state, reusing codes, etc. Although, it introduces challenges like Closure but just like I said this is part of the Javascript language. You just need to learn and have the experience to deal with it. Before without hooks, we enjoy some patterns like HOC and render props to solve some problems. And it is good. But with these hooks, more better on experience!
In the future version of the React, it will introduce some tools which we can use to make our app more responsive, solve some UI issues, more declarative codes, and handle the IO more excellently. This is called Concurrent Mode. Right now, it is experimental but this will be included in sometime in the future. On this mode, customers can benefit and also us developers. I’m very excited!
Conclusion
There’s a lot of things I love in React. Though, it’s hard to write all of those things. Like you can use it to develop mobile app and native app. You can also search for great 3rd party libraries which are built for React. And blah blah blah… Hopefully, you enjoy and learn new things on this blog. If you like it, spread the good news folks!
