To this point, I hope you are now familiar with the basics of front-end development. We also went through the most widely used JS frameworks and libraries including some design frameworks like Bootstrap. Now it’s time to go deeper into the world of JavaScript awesomeness. In this part, we will step into a new and powerful JavaScript library called “React”.

What is React

React, or ReactJS is a JavaScript library for building powerful user interfaces or components of user interfaces. It was released in 2013 and is developed by Facebook. It’s purely based on JavaScript in such a way that it powers developers to create web applications which can change a large amount of data at run-time.  This means that it does not require the user to reload the page.

How does it work?

React is component-based JavaScript framework. This means that everything we write in React is a component. It is also pretty fast thanks to the Virtual DOM. In React, we don’t actually write the HTML separately or most of the HTML is written in JavaScript. Or to make it more easily, the code is written in a separate file with the extension of .jsx. When these components are ready in the browser, React takes them and searches them into the DOM.

The sample code & usage

We either write React code in JSX or ES6. Most browsers do not understand this script instead they understand VanillaJS. Therefore we need to transform this code into Vanilla to help the browsers understand. So we an also do it with Babel.

The above code shows usage of React code in HTML using ECMA and JSX. Here the Holla is a react component. It accepts the property of heyThere. Babel will transcript the above code as

While in browser it will show as,

Important things to focus

Nested Elements – It is necessary to wrap up multiple elements into a single div parent. This is required from React version 16.0 and above.

Virtual DOM – React creates a data structure cache in memory, computes and then updates them in the browser. This makes the programmer feel that the whole code is rendered on one page.