In this blog series, we are going to learn react from complete basic up to advance level I will try to break the concept as much as I can.If you have any queries you can ask me through comments I will try to solve your issue.

Table of content in this blog:-

What is react?

Why you should use react js?

What is JSX?

What is virtual DOM?

What is React?

React JS is a Javascript library used in web development to build interactive elements on websites. One thing I want to tell you before starting this If you have no knowledge of Javascript or Javascript Libraries, you should go and first learn that cause it might be a chance I can't explain this framework to you correctly.

Why you should Use React JS?

React is a Javascript library that specializes in helping developers build user interfaces or UIs.

UI is the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to use a website or app.

Before react JS, developers were stuck building UIs by hand with 'vanilla Javascript' or with less UI-focused React predecessors like jQuery.That means longer development time and plenty of opportunities for errors and bugs. React is mainly for improving UI development.

React comes with two key features that add to its appeal for javascript developers:

- JSX

- Virtual DOM

Let's take a look at both of them to understand react more clearly.

What is JSX?

At the heart of any website, there is an HTML document that is read by the browser and displayed on the computer screen, tablet, or phone as web pages. During this process, the browser creates something which is called DOM ( Document object model ), a representational tree of how the web pages are arranged. Developers can add dynamic content into DOM through a language like Javascript.

JSX (short for javascript extension ) is a react extension that makes it easy for web developers to modify their DOM by using simple HTML style code. JSX is compatible with any browser platform you might work with.

JSX is not just a matter of convenience, Using JSX to update a DOM leads to significant site performance, improvement and development efficiency. This will become more clear as we learn to React feature, the Virtual DOM

What is Virtual DOM?

If you are using react js and jsx, your website will use HTML to update its DOM (the process that makes things 'change' without getting the page refresh). This works fine for a simple, static website to not use react js but for dynamic websites that involve heavy user interaction, it can cause a problem (since the entire DOM is changing with one click it will cause a page refresh ultimately).

However, If you use JSX to manipulate and update its DOM, React js creates something called a virtual dom . It is a copy of the site's real 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 clicks a button). Let's take an example to make it more clear suppose you are on a blog site and you write a comment and click the comment button now in a normal vanilla Javascript case the whole dom and page is needed to be load in case to get this change added to the dom but what react do is it scans the virtual dom to see what changed after a user action ( in this case comment is added ) and selectively updates only that section of the DOM.

This kind of selective updating takes less computing power and less loading time, which might not sound like much in the case of a single blog comment, but - when you start to think about all the dynamics and updating associated with even a slightly complex website -you'll realize it adds up a lot.

If you understand all the concepts mentioned in the above section clearly. Congratulation you are one level up to learn to react🚀. This blog is just an introduction about react nothing more complex but in case you have some queries ask me in the comments, I will answer them for sure. See you in the next part...