React - Introduction: how does it work?

React - Introduction: how does it work?

What is React actually? It is an open-source JavaScript library created by Facebook, used by Instagram and Netflix for building user interfaces. 

React is used to create dynamic web applications mainly single page applications (SPA).

So, what is a single-page application? That is a web application that does not require page reloading during use.  Maybe you're not aware of it, but you are most likely using this kind of applications every day. Here are some of the SPAs; Facebook, Gmail, GitHub or Google Maps.

Basically, SPAs allow the user to stay in a pleasant web space where information is presented to the user in a nice, workable and simple fashion.

Now, let's dive in!

The life force of React is components. We create components in React for different parts of our

application. For example,

in this photo, "Home" is a component, "Explore" is another component, "Notifications" is also a component, etc. And all of these components are nested in a single component such as a "navbar" component.

And here are some more examples of components: search box, footer, header, sidebar etc.  I hope you get the picture. 

These components create the JavaScript representation of the DOM (Document Object Model) that is called virtual DOM. 

(In case you don't know about the DOM, you can learn more by clicking here.)

Virtual DOM is what makes React fast. React uses the virtual DOM, renders it to the browser and

creates the actual DOM based on it. Essentially, every time we make a change to one of our components (the data or the UI state), React will note the change and update only the changed bits via virtual DOM, and then update it inside the actual DOM

in the browser and then we can see that change. This happens really quickly because of the virtual DOM.

When we make a change in the virtual DOM (in some of our components), React creates a new virtual DOM and compares it to the old one. It knows exactly where to make an update in the browser/DOM. It updated that changed part only, instead of updating the whole thing (which would of course take more time to complete). This happens every time one of our components state or data changes. It is continuously updating the DOM to reflect the change.

This is why we say that virtual DOM makes React fast.

Now that we've explained how components work, we should say something about components themselves. 

Components look like html templates. (usually using JSX - we will explain JSX in the next post).

They can be class-based or functional. Class-based components have a state that can be changed/ updated, and functional components are basically just that: a function that does something. Components can also contain JavaScript for functionality. 

Don't worry if you didn't figure out components yet, you can read more about components in this post.

Thanks for reading and  - happy coding!