Introduction to React.js

Why one should learn react.js?

There are 2 good reasons:

1. Virtual DOM (Also known as React DOM):

Let me try to explain in detail:

What is DOM:-

1. Standardised API that represents an HTML, XHTML, or XML document as a tree structure.
2. Each node on the tree is an object representing an HTML element.
3. Connects JavaScript to HTML.
4. Dom nodes can be manipulated directly eg.(using document.getElementById).

BUT DOM IS A MESS. WHY?

1. Actually, The DOM itself is not slow, however, when you make changes that trigger re-painting of the layout, that’s where things start to slow down (especially if you do a lot of manipulation at once).
2. Let us understand the web workflow.
3. The dom tree itself is constructed by the rendering i.e from parsing the HTML document.
4. Parse CSS and applies CSS to the HTML creating a render tree.
5. Render tree is painted to the browser.
6. Now making changes is expensive as all the nodes have to go through these things.

Now here comes the Virtual Dom:

1. Instead of rendering all these changes to the real dom, we apply them first to the virtual dom, virtual dom doesn’t get rendered in real life so changes are cheap.
2. Batch changes together for efficiency.
3. It’s like editing a blueprint then creating an entire building every time we do any changes.

What is virtual dom?

1. A lightweight representation of dom.

2. Exists in memory and is never actually rendered.

3. It’s just a tree data structure of plain javascript objects.

4. Popularised by react.js (also used by Angular and Vue).

2. Reusable and clearer web components:-

We can divide the youtube page into simple, reusable, and clearer web components.

I highly recommend any Web developer to have at least a basic understanding of React.

That’s because for a few reasons.

1. React is very popular. As a developer, it’s quite likely that you’re going to work on a React project in the future. Perhaps an existing project, or maybe your team will want you to work on a brand new app based on React.

2. A lot of tooling today is built using React at the core. Popular frameworks and tools like Next.js, Gatsby and many others use React under the hood.

3. As a frontend engineer, React is probably going to come up in a job interview.

Those are all good reasons, but one of the reasons I want you to learn React is that it’s great. It promotes several good development practices, including code reusability and components-driven development. It is fast, it is lightweight and the way it makes you think about the data flow in your application perfectly suits a lot of common scenarios.