React Virtual DOM and React Router

THE BROWSER DOM

Before we talk about the React Virtual DOM. We will refresh on the concept of the browser DOM.

DOM is short for Document Object Model

The Elements tab is a representation of the DOM. The elements tab in the developer tools window gives us a representation of the DOM in real time. But the DOM is not HTML nor is it JavaScript. It acts as an interface between the two. The DOM is an API (application programming interface) and it is a set of specifications on how programming languages and HTML can interact with each other. It MAPS HTML elements to a node-based tree-like representation of HTML behind the scenes. An interface that programming languages can easily understand, traverse and modify.

You see here an example of HTML and representation in the DOM. This representation is created by the browser using a technology called a browser engine. Every time a web page is loaded your browser creates this abstract model and holds it in memory. The DOM is the interface that makes it possible for you to refer to HTML elements and attributes using JavaScript object and property syntax.

So you might create a new image element node in JavaScript like this and then you could insert this node into the DOM using a method like append child. And it would finally be rendered by the browser into this HTML element.

Again, to repeat, there is an interface between a programming language like JavaScript and the actual code that gets rendered in the browser with HTML and CSS, and the DOM is that interface. It is cross-platform and language-independent, so it can be used in all operating systems and you can interact with it using other languages not just JavaScript, though the vast majority of the time it will be JavaScript.

Whenever you cause any changes to a webpages view with JavaScript, then the affected nodes and their children in the browser DOM are recreated. Along with that, the browser view is also re-rendered graphically and that can be an expensive process.

• Cross-platform and language-independent- not only used with JavaScript(though usually so)
• Any changes you make with JavaScript to a webpage’s view causes the DOM to be recreated – the affected DOM nodes and all their children, the entire “branch”
• Whenever the browser DOM is recreated, then the graphical view is also re-rendered, which can be an expensive process

Now we can talk about the virtual DOM and why it exists.

THE VIRTUAL DOM

The virtual DOM technique is not unique to React – React is one implementation. The React application maintains a lightweight representation of the browser DOM in memory. It is much faster and easier to update the Virtual DOM than the browser DOM – no-rendering of the graphical display. Any DOM changes you make with React are first made to the Virtual DOM. So if the user clicks on a button and it changes the color of the web page’s background. For example instead of manipulating the real browser DOM directly. This change first gets made in React Virtual DOM.

When changes are made to the Virtual DOM. React compares the changes during a process called reconciliation, which is done through it’s reconciliation engine named FIBER. In this process it looks for which nodes have changes in the DOM tree and then it figures out the most optimized way tp patch the browser down with the changes and to minimize the amount of re-rendering, while applying the changes. For example, by sending multiple changes in a combined batch instead of one at a time.

• React uses a process called reconciliation to compare and find differences between (“diff”) the Virtual DOM and the browser DOM.
• Sophisticated reconciliation engine named Fiber.
• Looks for what’s changed, then figures out the most optimized way to patch the browser DOM with the changes with minimal re-rendering, such as by combining updates in batches instead of multiple changes.

This is the main reason why you need to use setState for any changes in React, instead of setting the state directly with an assignment operator. setState sends your change  through the virtual DOM. So if you don’t use it, then you are sidestepping one of the most useful features of React.

You also learned before about setting unique key attributes when rendering lists of React elements using MAP before. When doing so, you are helping out the React reconciliation process by giving it stable markers to track and look for when changes have been made, so it does not re-render unchanged items unnecessarily.

Header and Footer

1. On terminal:  yarn add font-awesome@4.7.0 or  npm install font-awesome@4.7.0
2. On terminal   yarn add bootstrap-social@5.1.1 or npm install bootstrap-social@5.1.1

Make changes to these files with this code:

index.js

HeaderComponent.js

FooterComponent.js

MainComponent.js

App.css

Overview: React Router

• <BrowserRouter> – Top-level parent component that wraps around all other React-Router components. It uses HTML5 history API to control browser history
• <Route> – Renders the UI for a matching path. Use exact attribute if you want an exact match
• <Redirect> – Redirects to a new URL
• <Switch> – Groups <Route> components together
• <Link> – Creates links to a path, renders as <a> – use instead of <a>!
• <NavLink> – Special version of <Link>, adds styles to active link

React Router

1. On terminal:  yarn add react-router-dom@5.2.0 or  npm install react-router-dom@5.2.0

Make changes to these files with this code:

App.js

HomeComponent.js

MainComponent.js

HeaderComponent.js

FooterComponent.js

DirectoryComponent.js

Additional Resources:

• React – What is the Virtual DOM?
• React – React.Fragment
• W3Schools – CSS Selectors Reference
• React Router – BrowserRouter
• React Router – Link
• React Router – NavLink
• React Router – Route
• React Router – Switch
• React Router – Redirect
• Flavio Copes – Introduction to React Router