What problem does
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.
React JS solve?
What makes React JS
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 learnA 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.
React core developers try to keep the syntax close to the core languageI 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 ReactSeparation 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 flowReact 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 architectureReact 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
- React Context API
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.