React And React's Core Concepts

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:

1. 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.
2. 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:

1. Action
2. Dispatcher 
3. 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.

Further References and Tutorials

• Official React Documentation
• Building Applications with React and Flux by Cory House
• Getting Started with Redux 

How to overcome "FAILURE"?

I've been away from my blog for a prolonged period of 3 months and this will be my first post for 2016. Every time I think of writing a new post to my blog, I FAIL in that task very badly.

Failing to do a task has many number of reasons, here are some reasons:

• Laziness
• Lack of Persistence
• Negative Self Talks

Laziness has overcome many of us. For example, going for a morning walk can be a daunting task to some people, while others enjoy the benefits of relaxation and peace of mind gained through this routine walk.

Laziness is a root cause for us to NOT achieve our own goals. If we are able to beat and overcome laziness we can achieve more from the 24 hour day, hence becoming more efficient and effective. If you want to learn more about How to beat Laziness, there is a blog post written just for you.

How many of us have started a particular task and then left that task uncompleted? Task after task are uncompleted, the list of uncompleted tasks overweights the list of completed task.

This is mainly because Lack of Persistence in a given task. Take the earlier example of routine morning walk, how long do many of us continue walking every day in morning no matter what the outcomes are? Very few are continuously successful in this endeavor. 

Pushing yourself forward is the way to avoid lack of persistence. How hard it becomes, you just keep moving forward. Day after day, the task will be easier to do and even can become more enjoyable.

J.K. Rowling had to go twelve publishers to publish here first book, many of us can barely write a book to publish and if we write a book, we would have lacked motivation by going to three or four publishers but she kept moving forward and saw the results.

I want to include another example, Thomas Edison - Inventor of light bulb, failed 1000 times in the invention of the light bulb, if he would have stopped then he wouldn't have go the title of Inventor and someone else would have invented it. 

You learn by failing, fail but never give up until you've achieved your goal. 

Can I write a blog post? I don't have the skill of writing? My language is not good enough? Hmm, do you get this negative self talks when you're asked to write a blog post or an article? 

Well, this is just a mere imagination of your mind, this is NOT the reality. We are fearful by just imagining the outcome instead of just start to write the blog. Yes, sometimes you will suck at this point, but never loose confidence in yourself, just continue and look back what you have got once you've finished writing the blog or article. It will be a self accomplishment for you to do more of this in the future. 

Believe in yourself first, work hard toward achieving your goals then success will follow you.