What is React JS & Why React JS?

What is react? React is basically an open-source, javascript library for building user interfaces especially for Single Page Applications.

Let’s start breaking things down from here.

Library: Library simply means a collection of codes that can be reused while building a web app and UI(user interface). Similarly React is also a collection of Vanilla javascript codes. We can simply use those to build Mobile applications, Desktop applications & Websites.

User Interface(UI): User interface means by which the user and a system or application interact, in particular the use of input devices and software. Every application has 2 basic parts. Front End & Backend. The front end part is referred to as the user interface. You can simply say what the user sees is the user interface.

As for React, it doesn’t have any concern about what is going on in the backend but Front End. React responds according to the user’s action and renders data.

But? Here comes a but. Javascript is a programming language and default language of our browser. On the other hand, React is just a library! So if React has to deal with the browser or do something on the browser it has to be in javascript. Here comes JSX.

JSX: In React, instead of using regular JavaScript for templating, it uses JSX. JSX is a simple JavaScript that allows HTML quoting and uses these HTML tag syntax to render subcomponents. HTML syntax is processed into JavaScript calls of React Framework. We can also write in pure old JavaScript.

Before getting into why react, let’s know about some features of react:

Single way data flow: In React, a set of unchangeable values are passed to the components renderer as properties in its HTML tags. The component cannot directly modify any properties but can pass a callback function( a function passed as an argument to another function ) with the help of which we can do modifications. This complete process is known as “properties flow down; actions flow up”.

Virtual DOM: React creates an in-memory data structure cache(a reserved storage location that collects temporary data to help websites, browsers, and apps load faster) which computes the changes made and then updates the browser. This allows a special feature that enables the programmer to code as if the whole page is rendered on each change whereas React library only renders components that actually change.

React Native: React has native libraries that were announced by Facebook in 2015, which provides the react architecture to native applications like IOS, Android, and UPD.

React-native is a mobile application building framework using only Javascript. It uses the same design as React, letting anyone utilize/include a rich mobile UI library/ declarative components. It uses the same fundamental UI building blocks as regular iOS(iPhone Operating System) and Android apps. The best part of using react-native is to allow/adopt components(components are independent and reusable bits of code.) written in Objective-C, Java, or Swift.

Here comes the framework, let’s know something about it…

Framework: A framework, or software framework, is a platform for developing software applications. Working with a framework, many smart design decisions are already made for you, which gives you a clear path to focus on writing good application-level logic. For example, a framework may include predefined classes and functions that can be used to process input, manage hardware devices, and interact with system software. This streamlines the development process since programmers don’t need to reinvent the wheel each time they develop a new application.

Ok, we now understood what react js is and some of its features. Let's create a react app( following the official documentation of react js).

See closely, we have created a class component and wrote some JSX format code and inside parenthesis and returned it. And all these things are saved in the App.js file, a typical, plain javascript file. So where is Vanilla js? How will javascript understand this JSX format?

Transpiler: Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Babel is one of them. React uses babel to understand JSX codes. Babel transpile JSX codes written in .js files into Vanilla JS format.

So why react js?

1. Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.
2. Improved performance: Because React uses Virtual DOM, therefore creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.
3. Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.

And so on. If you are still using jQuery for building applications, re-think about it!