Intro To React.JS and how to set React component and the virtual DOM

Set React component and the virtual DOM

Published in

TreeNodes

4 min readApr 26, 2017

Now that we know what React is and what you have to cover in the first article ( Intro to React ). Let’s set and prepare our fist react component.

When using React, we solve problems using component based architecture. So We have to start thinking in term of components to build our application. First we create components, and if a component gets too complex we break it into smaller, simpler components.

Let’s try to imaginary identify some components we might use in comment widget.

The First component is what brings everything together. Let’s call it ( MainBox ).
This will be the root component.
The second component we have is the picture. Let’s call it (PhotoBox).
Third box will be the comment form let’s create it and call it (CommentForm). And this will allow users to add new comment to our feed.
The 4th will be (CommentBox) and We will reuse (commentBox) component over and over again but with different data each time.

It will look like this after we apply our visuale boxes. You can call your component StoryBox / StoryImage / StoryForm / Story or whatever you like.

Now after we used and identified our components.

What is a component in react ?

Components and Props

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs called props and return React elements describing what should appear on the screen i.e They ultimately generate what becomes our HTML code.

Functional and Class Components

The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single “props” object argument with data and returns a React element. We call such components “functional” because they are literally JavaScript functions.

You can also use an ES6 class to define a component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

The above two components are equivalent from React’s point of view. Classes have some additional features that we will discuss in later in another blog post.

Let’s look at this simple component.

When the render method is call on it, it return output #1.

<div> 
<P>Hello,Wold!</p>
<P>10:00AM</p>
</div>

Later on we will call this same component’s render method again and we will generate output #2. But with 10:30AM. So we create a new component but it doesn’t mean that the whole DOM has changed. That’s where the virtual DOM comes in. Wait a second.

What is the virtual DOM?

The virtual DOM is an in-memory representation of the real DOM elements generated by React components before any changes are made to the page.

It’s a step that happens between the render function being called and the displaying of elements on the screen.

A component’s render method returns some markup, but it’s not the final HTML yet.

It’s the in-memory representation of what will become real elements.

This is step 1.

Then that output will be transformed into real HTML, which is what gets displayed in the browser.

This is step 2.

<div> 
<P>Hello,World!</p>
<P>10:30AM</p>
</div>

So why go through all this to generate virtual DOM?

Simple answer — This is what allows react to be fast. It does this by means of virtual DOM diffing. Comparing two virtual trees — old and new — and make only the necessary changes into the real DOM in our case only this paragraph will be replaced.


<P>10:30AM</p>

Virtual DOM diffing allows React to minimize changes to the DOM as a result of user actions — therefore, increasing browser performance.

Useful reading: