Introduction About React Create Elements:
Hey everyone! In this article we’ll understand what is a React create element. So before we start understanding the React element, let’s talk about a document object model first. So let’s overview how document object models work. HTML is a simple set of instructions that the browser follows when constructing the document object model or a DOM. The element that makes up an HTML document becomes dome elements when the browser loads HTML and renders the user interface. So, basically we are using HTML to construct document object model elements. So this is our simple heading tag:
<h1> </h1> = document.createElement(“h1”)
Creating a simple heading level element in HTML is equal to the DOM statement like above. Using the DOM API you can create the same DOM elements which you can create using HTML
Updating all changing render DOM elements in the JavaScript is relatively easy. However, the process of inserting new elements is painfully slow.
Managing DOM elements 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 the virtual DOM or a set of instructions that React will use to construct the UI and interact with the browser. The virtual DOM is made up of react elements which conceptually seems similar to the HTML elements but are actually JavaScript objects.
Now you know how browsers can understand HTML and use DOM to create user interfaces. Now let’s talk about the 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 component to represent an h1 heading tag using React.createElement method.
React.createElement(“h1”, null, “First Reach Element”);
So using this method you can create a React element. The first argument defines the type of element that we wish to create like h1, span or paragraph. You can also define components.
The second argument represents the element’s properties. We did not specify any property to the h1 heading tire right now. The third argument represents the elements children or innerHTML text. So the react element is just a JavaScript literal that tells React how to construct the DOM element.
Now let’s talk about a React DOM. A React DOM contains the tools necessary to render React elements in the browser. React DOM is where we will find the render method now when you have your element in the DOM we need to append this element in the Dom tree so React uses the append method to render this DOM element. Now let’s see what this method looks like. So this is our simple React or render method: ReactDOM.render(element, containerElement);
In the first argument of this render method, we will specify the element which we wanted to render on the browser and the second argument is a container element where you want to append your child element so the second argument is your parent node and the first argument is your child node.
Now let’s put the previously created h1 heading tank in the render method and let’s see how it should look like. So to create a React element we are using the React object with create element method. So now we will create a React element:
Let h1 = React.createElement(“h1”,{id: “heading1”}, “First React Element”);
The second argument represents the elements properties and just after that we will specify some text to the h1 heading tag. Now I just want to render this react element in the DOM so I will just say ReactDOM.render and I will call the render method and specify our element first.
ReactDOM.render(h1, document.getElementById(“container”));
So on the first argument we will say h1 so this is my react element and specify comma and in the second argument I will specify the parent node where I wanted to insert my element.
I wanted to insert my element in the division tag. So I will just say here document.getElement by ID and specify ID of the element. When you execute this the output should look like this:
So, you have your development inside h1 heading tag
the question specified in the command.
How to Set up React Elements:
Before we learn how to create react element, it is very important to know the steps and procedures to get React set up and running on our system. We are aware of a CLI by React known as React Create App that will allow us to bootstrap our React project very quickly. Here we might even use the Webpack for having the hot reload. We need to install these packages globally for having the necessary dependencies up and running on our system. We might use the command: $ npm install -g create-react-app webpack
So we might even have to run sudo before the npm installs and it will depend on how we are setting up the node. We are also going to use the Create React App’s structure of folders for everything we are going to do.
RUNNING THE APP:
We are going to run the React application we have using npm in our terminal from the directory of our project. We use the command: $ npm install && npm start . This command should be opening a browser that has an empty white screen as its display. And just like that we have our very own React app.
To start things off, let us create a very basic page title in React using the React.createElement(). So let us open our index.js and start. First of all, what we need to do is importing the React library.
After this, we are going to make our first element:
So before we proceed any further, let us talk about arguments of the React.createElement() very briefly. In our case, it’s an <h1> tag. This can also be another component of React. If we want to create an HTML element, we are going to pass the element as a string just like we did in our code above. But if we want to create a React component, we need to pass the variable that the component is assigned with.
The next argument will be an object that contains properties which are termed as ‘props’ in the terms of React, and this gets passed to the component. But we are not going to use this argument right now because this is just the beginning.
The last argument is that component’s children. This can also be a quoted string just like the one we did above in which the content got interpreted as text. Another thing that we can also do is pass in a reference to another component. This enables us to next the elements and the components within one another.
Having our component ready, we can render it to our page using the ReactDOM.render(). The two arguments it take are the things we want to render and the target DOM.
We can fit this in one line but it is a good way to add breaks to our arguments for ReactDOM.render(). Formatting allows us to keep our code clean.
MAKING A PARENT:
After knowing how to render things, we can try to make our application a bit more complicated. We can do this by introduction of child elements. First we are going to make an element for rendering our title in which we are going to call a container. This time we will be passing a reference and not a string.
CHILDREN’S CHILDREN:
Here, any number of children can be nested as we want and we don’t even need to store the elements in variables before they are used as they can be declared inline as well. But the disadvantage of doing so is that we will get a code that is less readable.
ADDITION OF ATTRIBUTES:
We know that we can pass properties to an element by use of the second element. One thing we should remember is that we should not use a reserved keyword like class in Javascript as keys. This is because it might result in unexpected and unwanted behavior of the code. Thus here we will be using className to name our prop instead of class.
If we want, we may also add some HTML attributes like that of id, disabled and so on. We can use their props for passing in our custom data to the components we need.