Do You Really Need React-Js? WHY?

Most of the time learners don’t focus on the basic concept theory and requirements and use of any library,programming language and new techs etc. and directly dive into the coding part which lands them in a difficult position most of the time ,when they start solving the real world problem. “If you don’t know the exact use of anything then you will not use it properly”

So we’ll start with main basic concept behind the react-js that will help you to build a strong basic understanding of react and its uses.

What is React-Js?

When you google it you will find something like: React is an open-source JavaScript library for building user interfaces.

It’s quiet mind boggling if you are a beginner and not familiar with word open-source,JavaScript and library terminology.So don’t worry we will proceed with step by step to understand each word.

Open-source: It refers to a language/software/library that can be publicly accessible means can be used and you can contribute to that.

JavaScript: It’s a scripting language used to create a dynamic web page from static page and control that.

In simple words, it’s an important coding language to add the functionality (like animation,clicking,changing) in a simple web page(html,CSS web-page).

Library: In simple words,its same as school library where a bunch of books and study related things stored that is place of knowledge store.Similarly, in the programming world it’s a collection of pr-written class,functionality codes store which makes the developers job easy.

So, JavaScript libraries are collections of pre-written JavaScript code functionality that can be used for common JS tasks which helps us to not write the unnecessary code by hand again and again.

Now we have understood that react is a JS library,but why do JS Developers use react?

Why Do Developers use React?

So Most of the time ,every library comes into the picture with its own features to provide new functionality or enhance pre-existed functionality or solve the existing problems that developers were facing previously.

So lets understand what are the problems that developers were facing before introducing the react and how react rescue in that.

Note:- React is not only the solution for that,since we are learning about react. That’s why i’m only talking about all the aspects related to react-js.

Before React JS, developers were using “vanilla Js” (i.e raw JavaScript language) or with less UI-focused React predecessors like JQuery(it's also a JS library).

That was taking longer development times and plenty of opportunities for errors and bugs.

So in 2011, Facebook engineer Jordan Walke created React JS specifically to improve UI development. To know more history of react follow this link History of React.

All of you got the point that developers were facing some problems and to minimize that react-js comes for rescue,but now you have the curiosity that how React rescues them and what are new features/methods used to minimize them.

How React-Js Rescue the developers?

So react comes with a reach support function library (that saves development time and minimizes the chance for coding errors).

React introduces two new features that make the task easy for the developers.

1. JSX
2. Virtual DOM

I. JSX [JavaScript XML]:-

We all know that the bottom heart of any website is HTML Document.Web browsers read these documents and display on our computer,tablet or phone as web pages.During this process browser create something call DOCUMENT OBJECT MODEL(DOM), a representational tree of how the web pages is arranged.

Developers then can add dynamic content to their projects by modifying the DOM with the scripting language like JS.

So what does JSX do?

JSX is a React extension that makes it easy for web developers, to modify their DOM by using simple HTML-style code.

Since React JS browser support extends to all modern web browsers — JSX is compatible with any browser platform you might be working with.

We are using the JSX not only to access the DOM and modify them easily but also using JSX to update a DOM leads to significant site performance improvements and development efficiency.

The Question that you are wondering right now that HOW? So,that is related to the next feature that is Virtual DOM.

II. Virtual DOM:-

If you’re not using React JS (and JSX),your website will use HTML to update its DOM(the process that makes things “change” on screen without a user having to manually refresh a page).This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh)..

However, if a developer uses JSX to manipulate and update its DOM, React JS creates something called a Virtual DOM. The Virtual DOM (like the name implies) is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when an event happens (like a user clicking a button).

Other reasons for Why React?

• It provides component based architecture.
• Provide reusable code
• React is declarative in nature i.e Tell react what you want and react will build the actual UI

Other non-technical reasons for Why React:-

• Created and maintained by Facebook
• More than 100k starts on GitHub
• Huge Community
• In Demand skill set

KEY POINTS:-

1.React is a library not a framework,its focus on doing one thing and doing that thing real well.

2. It’s only focus on building user friendly UI not on other side as server like routing ,and HTTP request

3. React has reach ecosystem to handle like routing,HTTP request with playing really well with other library which provides more than building a full fledged web application

Prerequisite:

Before starting for react implementation following prerequisite should be helpful not mandatory like Html,CSS,Js,Es6 basic concepts.