React JS

What is React?

First, React is not a JavaScript Framework, it is simply a JavaScript Library developed by Jordan Walke that helps you to create User Interfaces (UL). React was first used in Facebook’s newsfeed in 2011 and then later in Instagram, WhatsApp by 2012 and released to the public in 2013.

Today, most of the applications are built using Model View Controller (MVC) architecture and in this MVC architecture React is the ‘V’ that stands for view.

In ReactJS, everything is a component and each component is responsible for outputting a small, reusable piece of HTML code. It is mostly used to build reusable components and it reduces the re-rendering of the DOM with the help of Virtual DOM.

Why React?

As there are many JavaScript frameworks available in the market (like angular, node, jQuery) but what ReactJS has done to the front-end world that made it so popular and one of the most sought-out options in the world of UI development

Features of ReactJS

JSX – JSX stands for JavaScript XML. It’s an XML/HTML like syntax used by ReactJS. It extends the ECMAScript so that HTML-like code can co-exist with JavaScript react code. This format is rendered to the normal browser JavaScript by the pre-processors such as Babel. It is much faster than normal JS as it performs optimizations while translating to regular JS

Virtual DOM – Do you remember how Facebook’s UI looked a few years back? You had to reload the entire page for new updates repeatedly. But now it’s no longer required, and this is the magic of ReactJS
Re-render everything on every update? It sounds expensive but it’s not. React will make the browser render only if there are any differences and if there are no differences, React will make the browser render nothing. This makes the rendering super-fast

Performance – Owing to the Virtual DOM, excellent state management, and the component-based architecture the performance of React surpasses or is on par with many of its competitors

Native Support – ReactJS also has a native version called React Native which offers the best of React world to the mobile app development platforms. React Native supports the simultaneous building of apps in both Android and iOS platforms

Fundamentals of React

React has exploded in popularity — and for good reason! Let’s study the fundamental building blocks of React and understand things clearly.

Components

As already discussed, that ReactJS is all about components, which make the task of building UIs much easier. React allows you to break your page into independent building blocks that can be created, maintained, manipulated, reused independently, and then merged to construct the entire page.

React deals with two types of components:

1.Functional Component

No state

There is no render method used in functional components

Simple JS functions are applicable

May take props as parameters and return the output to be rendered

2. Class Component

It must have the render () method returning to HTML

More complex and flexible but deprecated component