Updated: Mar 14
If you're a techie then you would have definitely heard about React one way or the other. As with any good technology there arises a trend that spreads like wildfire and before you know everyone is using it and it's natural to want to jump on the bandwagon. So this series of posts are a quick start into React to get you going right away.
There are few requirements that you should be familiar with before learning React. So make sure you know at least a little bit about these,
Basics of Web Development (HTML, CSS, DOM)
Here We GO!
In the simplest terms React is plainly - as stated in the official docs,
Created by Facebook in 2011 which was(is) aimed at taking front end development to the next level. Open sourced in 2013, the community is ever growing with new features and optimizations being added from time to time. React-Native, a framework based on react is now popularly used for creating cross-platform mobile apps.
Let's look at the Whys of react which will help you decide whether or not it's the right tech for you
1) Simply JS
2) It's Declarative
Declarative in programming terms means you write code in a way that you just tell the computer what to do and its up to the computer to figure out how to do it. In React world this means that you simply code what you need to and react will take care of how and when to render everything in the UI.
3) Component based
A component is the basic building block in react. A react UI is a combination of components. Think of a component as a piece of a puzzle and when you put all the pieces together you get the whole picture. The cool thing about components is that they can be independent and maintain their own set of data (state) and/or we can construct a DOM tree representation (with parent-child and sibling relationships).
4) Data binding
Data binding refers to how the data is connected between our code and the UI. In react this is handled by state variables. Whenever data changes in the UI(like input fields) the state variables are updated and the UI is re-rendered with the updated change. Data can be passed from parent components to children using a read only props(like parameters for a function) and using callbacks to change in the opposite direction(child to parent).
5) Virtual DOM
DOM (Document Object Model ) is an object oriented representation of your web page. It's your web page in a form such that it can be manipulated. Traditionally every time the DOM changes, the browser needs to recalculate the CSS, do layout, and repaint not only for the changed parts but the entire web page. This can be time consuming especially in big projects with lots of components.
Enter Virtual DOM - Virtual DOM is one of the core features of react. It is an in memory copy of the actual DOM. Whenever there is a change, instead of updating the actual DOM we update it's virtual counterpart. Then react figures out the most efficient way possible to find the difference between the new virtual DOM and the actual DOM tree that needs to be updated and only makes the required changes instead of re-painting completely. This process/algorithm is called Reconciliation or Diffing. You can read about it in detail here.
To summarize virtual DOM in steps,
React takes a copy of the initial DOM to create the virtual DOM
When a change takes place the current virtual DOM gets replaced completely by the new one, no questions asked.
React then uses The Diffing algorithm to efficiently change parts of the actual DOM.