Tired of choosing a proper framework to write your web application? This is
a common question that most developers get stuck when they are in need of
developing a new web application. This is a crucial decision one should
make, as what ever the libraries used, should be able to develop fast, easy
to learn and most importantly as the experience you gain would be an added advantage when you try to apply for
a new job.
React JS is an exciting JavaScript library you would enjoy working with for
building dynamic web applications. If you are in to web development then you’d probably know currently it has become a buzz word among the community.
After you read this post, you will find out why it could be more
entertaining than vanilla java script or any other framework.
If you browse the internet to find a JavaScript library to build a web app,
you would find tones of libraries. Among these many libraries, choosing one
could be a tedious task and due to my reasoning done previously, you need to
pay extra attention in choosing a proper framework. So here, let me
elaborate my thoughts on React and whether it is the best choice for you.
What is React Js?
Below is quoting from the React JS official page;
React is a java script library developed by Facebook, and it is open source.
Therefore, undoubtedly there is a massive community behind it. React JS
helps you to build web UIs by incorporating HTML template inside your React
JS code. This is mostly used for building Single-Page applications (SPA). So
you can consider React JS as a UI JavaScript library.
If you think of the Model-View-Controller architecture pattern for building
a web application, React JS resides in the View layer of the MVC pattern.
You need a separate technology for your backend services. So do not forget
this is not a complete solution.
Features in React JS
Declarative
React is a declarative language. The developer tells react what we want, not
how to do it. React will take down the what we have written in the language
that we have written and will manage “how to do” by interpreting “what we
want” and show in the browser.
Virtual DOM
The credit for React JS to be super fast goes to the Virtual DOM it
maintains. This is a JSON representation of the browser's DOM and it resides
in memory. This as a cache of a temporary view, waiting for the changes made
on the model which then compute changes using diff algorithm. The diff
algorithm analyzes the minimum required DOM operations and the real DOM is
updated with a minimum time. This guarantees fast rendering and better user
experience.
| Real DOM | Virtual DOM |
| Updates slow | Update faster |
| Directly update HTML | Can’t directly update HTML |
| Update creates new DOM elements | Updates JSX data structure |
| High DOM manipulation cost | Less DOM manipulation cost |
JSX(a.k.a Javascript XML)
In a regular library, you might either use purely JavaScript or purely HTML
for templating. The beauty of React JS comes with JSX. JSX is an extension
for vanilla JavaScript where you could embed HTML code inside JavaScript,
making JavaScript and HTML code co-exist. However, you still have the
flexibility to use pure JavaScript templating. My personal opinion is to
stick to JSX with a mix of JavaScript and HTML. Nevertheless, one can stick
to their own preference.
Why React?
So now we comes to the inevitable question. Why would you choose React JS
over another JS library or vanilla JavaScript. One thing worth mentioning
here is that this library is not just for web apps, but for native mobiles
apps too. You could use React Native if you are interested in building
mobiles apps.
If you are into Typescript or templating, I must tell you that React JS is
not for you. So this is a trade off one must make by considering many
aspects like;
- Market value for the knowledge (Very good demand for React in the industry)
- Time to develop a applications (React in the top list)
- Performance and responsiveness (React in the top list)
- Preference of the language (depends on user’s preference)
So from the libraries out there we need to pick one from many solutions.
Having said that, let me conclude this post by summarizing the benefits of
using React JS;
- High Performance
- Performance optimization due to Virtual DOM
- Reusable components
- Reduce number of code by making the components reusable
- JSX
- Matured JavaScript library
- Maintained by Facebook and backed by a strong community
- Light weight
Only the core modules are bundled in the distribution and require
installation of libraries based on the requirement - Since React and React
native syntax are pretty similar, it’s easy to build mobile apps once you
master react JS.