# 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 and Refactor
`Hello` in `src/App.js` is our component class. It has a `render` method that returns the JSX for our "Hello World!" and heading tags. Keeping components separate and organized is a best practice, so we created that class 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 component, and we'll improve the code by making it more explicit and readable.
Look at your `src/index.js` file, and contrast it with the code below.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './App.js';
ReactDOM.render(
,
document.getElementById('root')
)
```
The first (and smallest) difference is that we've dropped the CSS file import. We just aren't using it.
The next difference is that `import App from './App';` has turned into `import Hello from './App.js'`.
> This line imports the `Hello` component from the `src/App.js` file. Remember, the `default` part of `export default Hello` in `src/App.js` means that importing other names - like `App` - actually *already* brings in the `Hello` component! As a best practice, though, we're going to explicitly import the `Hello` component.
The last difference is that `ReactDOM.render( ,` has turned into `ReactDOM.render( ,`.
> This changes the `ReactDOM.render()` call to explicitly say "Render whatever the component `Hello` returns."
## Hello World exercise - You do!
### 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 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 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](https://generalassembly.wistia.com/medias/v5qyqsir0s) 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.
> If you're interested in learning more about the Virtual DOM, [check this video out](https://www.youtube.com/watch?v=-DX3vJiqxm4). *(note: right click for new tab!)*
You know every component has, at a minimum, a `render` method. The `render` method generates a Virtual DOM node to be added to the actual DOM.
The contents of this node are what we define in the method's return statement, using JSX.
The `ReactDOM.render()` function takes two arguments:
```javascript
ReactDOM.render(
,
document.getElementById('root')
)
```
* `` uses **the name of the component to render**. In our `App.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:
```javascript
class Hello extends Component {
// what should the component render?
render () {
// make sure to return some UI
return (
Hello World!
It is time for tea.
)
}
}
```
* 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.
> Side note: What is `` written in? JSX! Whenever you use a self-closing tag in JSX, you **MUST** end it with a `/`, like `` in the above example. If you don't use a self-closing tag, JSX will look for a closing tag and never find it!