Understanding how React helps build SPAs
In this section, we'll learn about React at a high level. This understanding will help us build better React-based applications as we'll understand how React operates internally.
As mentioned previously, a website is primarily just an HTML file, which is a text-based document. This file contains code that the browser uses to create a logical tree called the Document Object Model (DOM). This tree represents all of the HTML elements within the file according to their order and relative to other elements in the structure. All websites have a DOM structure on their pages, whether they use the SPA style or not. However, React takes advantage of the DOM in unique ways in order to help build apps.
React has two main constructs:
- React maintains its own virtual DOM at runtime. This virtual DOM is distinct from the browser's DOM. It is React's own unique copy of the DOM that it creates and maintains based on the instructions...