Learning React Day 2

So it's been a while since I updated you guys about my react learning journey and I can't recall where I left off. So today I'm going to be talking about the virtual DOM and how to render JSX. So how is my learning progress really coming along you may ask. Today I also tried to attempt to do a simple project using react..........I absolutely failed and felt like I knew nothing. As I was doing the project I just kept messing up and nothing was displaying and I just sat at my screen confused and lost,

but what really came in handy as a programmer's best friend GOOGLE. Google helped me out a lot and I was able to figure out what was going on with the project and I got it fixed and working (ill show you guys more of my projects when I get better at this react thing), but let us get into the things we're actually here to talk about.

so what is the virtual DOM?

A virtual DOM object is a portrayal of a DOM object, similar to a lightweight duplicate.

A virtual DOM object has similar properties as a genuine DOM object, yet it comes up short on the genuine article's ability to straightforwardly change what's on the screen.

Controlling the DOM is moderate. Controlling the virtual DOM is a lot quicker because nothing gets drawn onscreen. Consider controlling the virtual DOM as altering an outline, instead of moving things around.

sounds interesting right?

Now let's move on to rendering things to the screen. So say we have some JSX that we code for example:

const animal = (
    <div>
         <h1> I'm an animal </h1>
    </div>

let's say we have a

ReactDOM.render(animal,document.getElementById('root'))