What is React?
React is known as the "V - View" in MVC, however, it is more appropriate to say that it comprises of the "V" and "C" in MVC. "V" and "C" stands for controller view, a controller view controls other React components to work together.
React does not replace other frameworks such as, Angular or Knockout, that belongs to the view layer. React is just a Javascript library which allows us to create highly reusable UI components.
What React Tries To Solve?
"Building large applications which data that changes overtime". In otherwords, you can build small to large applications which can change and manipulate the UI to reflect the current state of the app.
Why Choose React?
- React is extremely fast so that it can detect changes in the app and manipulate the DOM , this is enabled by "Virtual DOM", we'll discuss which a bit later.
- You can create custom UI components, even nest components and pass data from parent to child components. For example, think of "Comment Box" as parent component and "Comment Form" as child component of comment box.
- React is easy to integrate with existing applications, the best part is that you can gradually change your existing application without having to change your application overnight.
- Isomorphic a term which is very hot in React community, Isomorphic means that you can render your components in client and server so that you can avoid repeating your code twice.
- React has a proven track record of use, as it has been used by Facebook, Instagram, Airbnb and many other large corporations.
Okay, it enough knowing the Why part of React, let's jump into it's core concepts.
React's Core Concepts
This is the second part of this post, this section would highlight and introduce you to React's core concepts.
Unidirectional Data Flow
Unidirectional data flow is a pattern where the applications data flow is handled as one-way data binding, unlike other popular frameworks such as Angular which follows two way data binding.
If you have experimented with Angular or any other frameworks with deals with two way data binding you will understand that two data binding is all about updating your UI as the model changes or update your model as the UI changes. However, along with the benefits it also introduced to certain risks related to data flow in your application as follows:
- This lead to unpredictability, it means that if the UI changes it will change the related model and if this model is connected to another model it would change that too. This was totally, unpredictable for the developer.
- Moreover, the above mentioned problem can make debugging much more harder and which makes it harder to find the root cause of the problem.
Flux is an architecture that follows unidirectional data flow pattern. Facebook has it's own implementation of flux and also there other flavors of flux such as Redux. If your are interested in Redux go and check out Egghead.io's coures on Redux
There are three main concepts that are must to be know to use Flux and they are:
- Action
- Dispatcher
- Store
This image from Flux's official website will help you to understand what are these three flux concepts.
 |
| Flux Architecture |
JSX
JSX is also called as "HTML in Javascript", it is important to note here that it is not the real HTML, it is identical to HTML syntax. For example, we have the class attribute in HTML, in JSX it is called as className. All this time we have been writing "Javascript in HTML", with JSX it's the vice versa.
Moreover, Javascript is more powerful than HTML, so that use can use all of Javascript features in HTML.
JSX complies to plain Javascript, JSX is mere an abstraction to plain Javascript. JSX is optional, you have a choice to make here, Javascript or JSX?
JSX has an awesome error location finder feature, it will show you the exact line the application error occurred which was not present in HTML.
Having used JSX, I personally recommend to use JSX over plain Javascript for two main reason, easier to write - just like HTML and less prone to typos and it is more readable.
Virtual DOM
Virtual DOM is one of the cool concept or feature of React that I love about. So what is it all about?
Virtual DOM is where the current state of the DOM is compared against with the desired or expected state of DOM and it is updated in a most efficient manner.
Updating the DOM involves a lot of processing and then re-drawing the UI elements. This the main reason why React had to introduce Virtual DOM.
Virtual DOM is not only performance booster but it also includes flexibility.
