What is React Js – Know Everything in Detail

Hello Developers,  I am going to share a complete course of React Js from basic to advance level.  here,  you will know everything about React Js in detail like What is React Js, its Features, advantages, disadvantages, usages, & more. If you are interested to learn it, then you should follow my all tutorials. After completing this course, you will definitely develop any kind of React Application.

Before learning React js, you must have a basic understanding of the following languages –

  • HTML
  • CSS
  • JavaScript
  • NPM

What Is Meant By React Js

  • React Js is a JavaScript library.
  • React Js is created by Facebook to develop a single page, user-friendly and attractive Frontend web application or user interface (UI ).
  • Even React js is open-source means that You can use it absolutely free.

When you want to develop a single-page web application that functionalities work without reloading the page like a mobile app then you should use react Js. There are many languages that are used to develop single-page web applications but React Js is the best language that is very easy to use & understand.

You can also use React Js with backend languages to handle server data through REST API on the web & mobile application.

Component

Now, a  question arises that What is a Component? A component is a building block of React Js that creates containers, div, or sections with proper view structures & data ( text, images, media, etc).

For example header, footer, sidebar, image gallery, a section with paragraph, title, table, list, or form.  All these parts of the web page can be created using components. So, You can also be considered any part or section of the web page as a component.

We can create reusable UI components in React Js. This means that A component can be used multiple times at multiple positions on a web page. but its structure remains the same with different data.

If you need to create the same view structure of multiple sections with different types of content, then you can reuse the single component by passing different content. You can understand it well by seeing the following picture.

react app component

How Does React Js Work?

If you have created a static web page using HTML & CSS and this web page contains a header, footer & content section. If you want to create this page using React js then you will need to create three components for header, footer & content.

Now, We understand that How does React js Work on this web page. React js creates a virtual DOM and keeps all those components data in that virtual DOM then renders data on the web page.

If we change data of any components then React js creates again a new Virtual DOM  for that data and compares it with the old virtual DOM. After that React js finds changes in components and renders only those changes on the web page. The remaining data will be the same.

In this way, the Web page works fast as a single page application. So using react js, you can update anything on the web page without reloading it.

For your better understanding, see the following diagram –

react js working diagram

 

In the above diagram, There are three components are created with some data. Header components contain “Page Header, Content Component contains “Hi” & Footer component contains “footer page”. React js has created a virtual DOM to keep All those components data and shown on the web page.

After that, the Content component is updated with a new data “Hello” that is kept in a new virtual DOM and shown “Hello” instead of “Hi” on the web page. Header & footer data remain the same due to no changing anything in them.

History of React js

React js was developed by Jordan Walke who works as a Software Engineer at Facebook.

React js also deployed on Facebook in 2011 and After that on Instagram in 2012

Even React has been open-sourced since May 2013 at JSconf.

The current version of React js is 17.0.2 released on 22 March 2021

Advantages of React Js

  • Features of ReactJs
  • You can use React js absolutely free for developing your projects
  • Easy to create single page application
  • You can easily maintain the code of large scale project by reusing components
  • You can easily find out the latest changes in components and also improve apps performance using Virtual Dom.
  • React js is one of the popular languages that is created By Facebook. So, It is well updated, supported & maintained
  • You can create front end UI for web & mobile apps using React js
  • Very Easy to test & debug

Disadvantages of React Js –

  • Since React js uses JSX, HTML & CSS code is written with javascript code. While most of the frameworks/libraries keep HTML & CSS separate from the javascript. So, You may be confused when you start your first project in React js.
  • React js has a large file size.
  • React js can not be used for backend development. But It can handle backend data through API.

 Popular React Based  live Projects

Here is the list of some live projects that use React js to improve their performance and make an attractive user interface –

  • Facebook
  • Airbnb
  • Uber
  • Netflix
  • Instagram
  • WhatsApp
  • Khan Academy
  • Dropbox

What’s Next –

Now, you should learn to Create React App Step By Step in the next tutorial

My Suggestion –

From React Js, I have shared only important points that are necessary for you. All these points are enough for a beginner to learn the react Js. I hope, You have completely known about React js. Even You are interested to learn more about it.

If you are experienced and need to know more then can read the official documentation of React Js to know more about it.

If you like this tutorial and want more React tutorials then ask me through the comment box that is shown below. I will definitely share the next topics with a great explanation.

 

 

 

Categories ReactJS

Leave a Comment