Virtual DOM

Learning Objectives

After this lesson, you will be able to:

• Describe the Virtual DOM versus the standard DOM

• Understand how components are called

Review src/index.js

Keeping components separate and organized is a best practice, so we created the Hello component in its own file.

To show up on the page, though, that component still needs to actually be called from somewhere. The main "HUB" 🛖 of our React app is src/index.js. We'll investigate how src/index.js is currently loading and rendering the App component. Look at your src/index.js file, and contrast it with the code below.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

The App component is being imported in from src/App.js Remember, the default part of export default App in src/App.js means that importing other names - like App - actually already brings in the App component! As a best practice, though, we're going to leave this file alone. We will import Hello inside of the App along with other components, such as Dog and Human. Pretty cool!!

The last difference is that ReactDOM.render( <App />,.

This changes the ReactDOM.render() call to explicitly say "Render whatever the component App returns."

Let's Hack away!

Code along: Calling our Hello component explicitly

Update your index.js file to have the three changes listed above:

• Delete the CSS import.

• Change the App component name that's imported to be your Hello component.

• Change the component name that's used inside ReactDOM.render to be your Hello component.

Check it out! You should be able to browse to http://localhost:3000 and see that nothing has changed.

Virtual DOM Intro

You should be familiar with the DOM. You may have noticed that our src/index.js code mentions ReactDOM. ReactDOM doesn't refer to the same DOM we know. Instead, it refers to a Virtual DOM. The Virtual DOM is a key piece of how React works.

So, how is different? Watch this video to find out. (note: right click for new tab!)

In React, the virtual DOM is a staging area for changes that will eventually be implemented.

Virtual DOM Diagram

You know every component has, at a minimum, a return statement. The return generates a Virtual DOM node to be added to the actual DOM.

The contents of this node are what we define in the return statement, using JSX.

The ReactDOM.render() function takes two arguments:

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
)

• <Hello /> uses the name of the component to render. In our Hello.js file, the Hello component returns the content to render: a div with "Hello World!" and heading tags (written in JSX). As a reminder, this is the Hello component:

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
        <Hello />
    </div>
  );
}

export default Hello;

• The second argument of the ReactDOM.render() function is document.getElementById('root'); this finds the DOM element to append that content to. This argument can be any element on the page. Here, we're simply appending it to an element with the id root. (Look through the index.html file if you're curious about the HTML structure from create-react-app.)

When our index.js is processed, React compares the Virtual DOM to the regular DOM and only updates the root element on the page. Dope!

Side note: What is <Hello /> written in? JSX! Whenever you use a self-closing tag in JSX, you MUST end it with a /, like <Hello /> in the above example. If you don't use a self-closing tag, JSX will look for a closing tag and never find it!

• Let's switch it back to <App />!

If you're you have 35 mins of nothing to do on the weekend, check out this video with history on the Virtual to learn more, check this video out. (note: right click for new tab!)