What does React.js do?

A webpage is typically requested by inputting its URL into your web browser. Your browser then sends a request for that webpage, which is rendered by your browser. When you click a link on that webpage to navigate to another page on the website, a new request is sent to the server to obtain that new page.

This back-and-forth loading cycle between your browser (the client) and the server repeats itself for each new page or resource you attempt to access on a website. This common way to loading webpages works OK, however consider a website that is heavily data-driven. Back and forth loading of the entire homepage would be redundant and would result in a poor user experience.

With traditional JavaScript applications, updating data meant getting your hands dirty with DOM manipulation. You tracked down the changes and manually altered the DOM, often resulting in a full page reload 😵

React throws this approach out the window and welcomes the era of single-page applications (SPAs). Say goodbye to multiple page loads! React loads only one HTML document initially and then uses JavaScript to update specific parts of the page, keeping things dynamic and fresh ⚡️

This magic is thanks to client-side routing: instead of requesting a whole new page every time a user takes action, React intercepts the request and updates only the necessary sections 🪄 No more waiting for full reloads, just smooth transitions and a seamless user experience 😎

But the real hero behind the scenes is the virtual DOM. Think of it as a lightweight copy of the actual DOM, constantly updated whenever data changes. React compares this virtual copy to the real one, pinpointing the exact changes that need to happen. Then, like a ninja, it applies those changes to the real DOM in the most efficient way possible, without any unnecessary re-rendering 🥷

The result? React components and UIs that respond to changes instantly, without the lag of a full page reload. So, say goodbye to the slowpoke days and embrace the lightning speed of React ✨