A crash course on React - Part 1

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.




Pre-requisite


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)

  • JavaScript (with ES6 preferably)

Here We GO!


In the simplest terms React is plainly - as stated in the official docs,

"A JavaScript library for building user interfaces"

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.

Features


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

React at it's core is javascript. So anyone familiar with javascript can start picking up fast and easy. It supports object oriented as well as functional programming. Being javascript it's easy to integrate with other javascript technologies like node js as the backend. This reduces a major pain point for a lot of developers who use different programming languages for front and back ends.


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,

  1. React takes a copy of the initial DOM to create the virtual DOM

  2. When a change takes place the current virtual DOM gets replaced completely by the new one, no questions asked.

  3. React then uses The Diffing algorithm to efficiently change parts of the actual DOM.

Wrapping up


That's the end of a brief and quick look into react. If you're still having second thoughts about switching from your current front end technology to react here's an analysis to convince you. The below image shows the NPM trends (as of Feb 2020) among the three popular front end javascript technologies namely React, Vue and Angular


We can see a clear winner there right? If you're still hooked jump on to the next post where we'll dive into our first react code.



#React #Programming

140 views1 comment

©2020 by DevDecimal.