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;
Angular
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
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.
Vue.js
Vue.js is another Javascript Framework. It is a framework that lets you build progressive web apps. The framework syntax design is similar to that in AngularJS. But unlike Angular, vue.js is a framework for building UI only. Vue.js has the highest developer satisfaction rate, which explains its popularity pretty well. At its core, it also uses the concept of reusable component and double data binding.
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.
Virtual Dom
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.
Reusable Components
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.
JSX
Weird name, I know!
But believe me you will fall in love with JSX. It is similar to HTML or more precisely it is the React way of writing the HTML code. In react, we write HTML inside our javascript and it is made possible using JSX. It allows the developers to easily pass javascript expression as props to React components. We can even write javascript inside JSX; just have to wrap them inside {} braces. There are a lot of things that JSX can do, come have a look here.
As every perfect thing out there in the world; React too has some fallbacks, and these are:
Managing Data
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 here.
Managing Forms
I don’t know if it’s just me or everyone faces this issue; handling form data in React is pretty much a no win. As there is no way to use double data binding else you would have to use plain javascript to get values 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.