What is React Element and Component Class?


In this article, we are going to understand what is react element and component class. Well, react element and component is very crucial to understand because react is made of react elements and components. So in this article, we will briefly take a look at react element and component class.

react element

What is React Element?

So before we start understanding react element let’s talk about document object model first.  So let’s overview of how document object model works. HTML is simply a set of instructions that a browser follows when constructing the document object model, or DOM. The elements that make up an HTML document become DOM elements when the browser loads HTML and renders the user interface.

Basically, we are using HTML to construct document object model elements.

<h1> </h1>

creating a simple heading level element in HTML is equal to the Dom statement.

document.createElement(h1);

Using the Dom API you can create the same Dom elements which you create using HTML. Updating or changing rendered DOM elements in JavaScript is relatively easy. However, the process of inserting new elements is painfully slow.

Managing DOM changes with JavaScript efficiently can become very complicated and time-consuming.

The solution for this is react.

React is a library that is designed to update the browser DOM for us. With React, we do not interact with the DOM API directly. Instead, we interact with a virtual DOM or set of instructions that React will use to construct the UI and interact with the browser.

Virtual DOM is made up of React elements, which conceptually seem similar to HTML elements, but are actually JavaScript objects.

Now you know that how Browser can understand HTML and use Dom to create the user interface.

React Element.

The browser DOM is made up of DOM elements. Similarly, the React DOM is made up of React elements. DOM elements and React elements may look the same, but they are actually quite different. A React element is a description of what the actual DOM element should look like. 

In simple words, React elements are the instructions for how the browser DOM should be created.

We can create a React element to represent an h1 using React.createElement:

The first argument defines the type of element that we wish to create like h1, span or p. You can also define the component. The second argument represents the element’s properties. We did not specify any property to the h1 tag right now. Just like, {style :{ color:”blue”}}, className,event handlers etc.

The third argument represents the element’s children or inner HTML element text. So, a React element is just a JavaScript literal that tells React how to construct the DOM element.

React Dom

ReactDOM contains the tools necessary to render React elements in the browser. ReactDOM is where we will find the render method. Now when you have your element in the Dome we need to append this element in the Dom tree. react use render method to render Dom element.

now let’s see how this method looks like.

ReactDOM.render(element , containerElement);

In the first argument of render method will specify element which we want to render on the Browser. and the second argument Is a container element where you want to append your child element. so the container element is a parent node and the element is child node.

Now let’s put the previously created H1 heading tag in the render method and let’s see how it should look like.

so when you execute this statement the output should look like this.

Right. so basically we are creating an HTML element with JSX.

React Component

Now when you have a nested react element used stumble with the next react problem. When you create a nested element you will find there are lots of element you need to create.  and what if you wanted to create the same element in other pages. then you need to create the same code again. to solve this problem we have a react component class or you can just say react component.

react component help us to reuse elements multiple times. 

React component help us to reuse elements multiple times. Now let’s take an example to understand why we need to create the component class. 

suppose you have a react element paragraph.

React.createElement("h1", null, "First React Element");

you need to use this paragraph in 10 different files or you can say 10 different projects. the way you can do that you will put the same code in 10 different files. This method will increase the size of your application as well as you will find the repeated code. So to solve this problem we have a react component class. Using the react component class you can extend the same class over and over and use the same element in many projects.

Interestingly you can use extend keyword to extend react component class and create your child and parent relation with the react component class. So your class would be child class extended from the parent react component class.

Now let’s see how to use react component class to create two react element.

So when you execute this code you will get three react element on the document. So the power of component is reusability. It leads to faster development and fever bogs. Components also have lifecycle events, states, DOM events, and other features that let you make them interactive and self-contained.

If you put this code into react application then this code will create a division tag with h1 child element. Then we just put this react element in the root div using ReactDOM.render() Method.

In the next article, we will understand more about react.

 

Leave a Reply

Your email address will not be published. Required fields are marked *