There has been a lot of focus on user interfaces nowadays. They have to be snappy, media responsive, and beautiful at the same time. With projects like polymer and web components, Google introduced the idea to build reusable components.
Facebook took an upsurge and introduced reusable component as the core principle of React. React was open sourced in the year 2013 but was being used by Facebook since 2011 and is created by Jordan Walke, a Facebook engineer.
Now the question that arises is,
What exactly react is?
The answer is right here;
It is a library for building interactive user interfaces. It uses the concepts like Virtual Dom, Reusable Components, and One Way data binding to provide a seamless and efficient experience to both the users using the app and the developers writing the code
Okay, so is that all about React?
Yeah, pretty much!
So, first let me introduce you with some of its rivals before moving ahead discussing React.
So, here it begins;
The next version of beloved AngularJS and one of the super-heroic framework of the web, yeah it really is, I myself have developed my first ever web application in AngularJS (A social networking site for my school friends).
With the second version of AngularJS, developers improved it and introduced a brand new framework to work with. Using Typescript, at its core, making reusable components known as the directives; it easier to write Angular 2 and is really a bad-ass Framework.
Preact, rhymes with react, right?
Yeah! Actually, both the React and the Preact are pretty same. But Preact is quite faster and smaller in size. Its an alternative to React with many similar functionalities like the virtual dom and reusable components. It removed some of the features provided in the React, but its aim is to be compatible with React. Preact is pretty popular with around 7,000 stars on GitHub. I would like to insist you to go on and read more about Preact.
Now, as you are familiar with some of the rivals of the React; so let's move ahead to learn some benefits of using the React.
No one likes messing with dom. React fixed this with the introduction of the virtual dom. A virtual dom is an exact copy of the real HTML dom. Whenever your component state changes, React looks for the difference between the real and the virtual dom and then it updates the real dom accordingly. By not re-rendering your whole app whenever something changes react gives your application a performance boost.
As a developer we look for ways to be lazy
. We want to write less lines of code. And that is why we are the biggest fans of reusing things. React uses this concept as its core principle and has introduced Reusable components. Reusable component enables us to write the component once and use that component at multiple places that not only increases our productivity, but also reduces the size of the app by making it more efficient. We can also provide some custom options that are known as props to component and tailor them as per our need. Reusing same component over and over helps us in building apps with consistent UI which results in great User Experience.
Easier to debug
React uses one way data flow which means, React components can not change props (options or arguments) passed to them but they can take callback functions as their argument which can modify the values. This helps developers to write codes that are easy to debug because you know that where you have did modified the value and where not.
Weird name, I know!
As every perfect thing out there in the world; React too has some fallbacks, and these are:
Remember, React is just a view library build to manage your app’s state. You have to use external libraries for managing your app’s state else you would have to manage it on your own, and here the things get a little bit tricky. If you are from Angular world like me, believe me, you are going to have a hard time getting used to it; managing your app’s state. But there are many options for managing the state of your app like the flux, redux and they are really good once one get handy with them.
You can read more about redux
here and about flux
from the form or use ref to get the value of a input which is same as getElementById. This method works well when you have handful of elements, but what happens when you have 30 elements to get value from? No worries! There are solutions like redux-form which tries to solve this problem and even I am trying to solve this issue with a component that I am building which will be released on the github by me, very soon.
I like React, or you can say i just love it! The design choices of it, how it handles your UI, the reusable components I am having fun with all looks cool to me. And at tecHindustan
, we are using react in our day to day code commitments and also in the work we do.