React JS is a JavaScript library for building user interfaces. React is a DOM manipulation library. It does the same thing as jQuery does but, in a different way. React is a
What problem does React JS solve?
When I talk about React JS, there is some other name come into my mind like Angular and Vue. Those three are developed to solve the same problem which is DOM manipulation.
What makes React JS different ?
React JS, Angular JS, Angular, Vue, Ember all are solving the same problem, But they are doing it differently. Those 5 things have a different style of code, different definition regarding “Separation of concern” and different way to handle the data flow.
I have worked with React JS, Angular JS, Angular and also know Vue JS a little bit. In this post, my intention is not to compare and find the better one because this is a hard and controversial job, rather I would like to describe why I like or chose React Ecosystem. I am mentioning React Ecosystem because React JS is a simple and a small library and it’s not enough to build something big with this alone. The ecosystem
Super easy to learn
A lot of people say it’s very hard, I would say no! Actually, it is easy. I see it seems hard for those people who are used to with different framework and a new way is looking hard. React ecosystem is letting us thing differently I would suggest you reach the deep then decide. A complex application has complexity but a simple application doesn’t have.
This is a simple React component. You imported the library inside the file and created a function which will return some HTML. Although it’s not HTML, I will come later to this point.
I can use all the JS Features in markup
If you use Angular then you need to use ng-if for a condition in the markup. Similarly, you have a lot of HTML attributes (directive) to do things inside the template. Even for loops, you have an attribute. The framework is binding me inside its own syntax which is something I don’t really like. We all know how to run a For loop or a while loop, maybe you don’t want to run any of them but a recursion or a map.
In React you are using all the features given by JavaScript. Use conditional statement, For loop, while loop, map, you name it. It’s not forcing you to learn a lot of new syntaxes. Inside a component do your things how you want. It would be happy if you just return a markup (JSX) at the end. I feel like It gives me the opportunity to use more language features which is as cool as ice.
React core developers try to keep the syntax close to the core language
I have worked with Angular JS and they have a big list of HTML Attributes and (directive) which I needed to memorize. Now the new Angular has landed to the market which introduced a shiny new set of directives and Angular specific syntax. Angular JS development is stopped and it’s almost not possible to migrate the old code into the new version. If you have an application written with Angular JS then you might need to simply rewrite it. I am scared if I develop something today with Angular and then they come up with something completely new tomorrow.
Besides, have a look in React JS and the related libraries. React JS release on May 29, 2013, quite a long time ago and still they are maintaining their syntaxes although the version number reach to 16. Every new version is coming with new features but I don’t think you need any rewrite or someone needed before. This is indicating
Facebook uses React JS in their core products.
We all know facebook.com is quite a heavy application. This information might be interesting to you that Facebook uses React in their main product. Not only that Whatsapp, Instagram, Airbnb and a lot of important and big applications are also built using React JS. Facebook.com has over 20000 components. If they do something wrong then they will be in trouble too. Obviously, this is a matter of faith.
React Component is Great!
React component looks very good to me. In
Separation of concern defined by React
Separation of concern in Front-end is a controversial thing. Most of the people are keeping HTML, CSS and JS file separate. I am not out of them. Suddenly React come up with an idea to keep HTML like thing (JSX) inside the same file. It sounds bad, right? Yah its really bad until you don’t know why.
First of all, React doesn’t inspire you to write a lot of conditions inside a component file. A component should be very small. A component should contain logics only required for the view. If you have anything else then you should put them somewhere else. A component should take some input as props (which is HTML data attribute) and the component will generate a markup according to the props.
Some people (also me in the past) just blame React to allow writing HTML (actually it’s not) with JS. Mostly those people like Angular. Guys take a look Angular is also letting you write Template and Template URL both inside the component file. It’s not new and we are using it both of them. Someone might say writing template inside component is a bad idea. I would say no it’s not, there is a use case. When I have a few lines of markup I wouldn’t make a separate HTML file for it right? Now it sounds fair right? Exactly React recommends you to keep your component very small and keep the markup and view logic together in the same file. You can check the video to know how React defined “Separation of concern”.
Unidirectional data flow
React has single way data flow, there is no two-way data binding. Sounds wired to me in the days but when I got an opportunity to work in an old big web application which is not performing well then I started thinking differently. Two-way data binding is not good for performance, it’s easy to start but a huge problem to maintain. For debugging it’s become horrible! React is letting you share the data from component to component with a unidirectional data flow. If you need to change something you need to change it in the source and it will reach to its
It’s letting me choose other independent libraries
Data architecture
React doesn’t have any controller and as I said before you it is recommended to put logic inside component as less as possible. Then the question will arise where they will live? Here you got the freedom to choose the way you like. You have a few options.
- Flux JS
- Redux JS
- MobX
- React Context API
All those are quite awesome and can be chosen according to our need. This is quite flexible. Normally experts suggest using MobX or the Context API for smaller application and Flux and Redux for highly scalable one.
Redux is an awesome library to manage data structure. The architecture
Redux introdfuced is very clean and readable. If you are not used to with functional programming then in first look it could look complex but actually, it’s not. I prefer using Redux for a complex application. Redux developer tools will take you to an awesome level of debugging. No more ghost changing.
For your information Redux, MobX and Flux all are independent and can be usable with any framework but mainly it is popular in React community and their concept is more close to React. Therefore, I would say it’s a part of React Ecosystem.