React Create Element: An Introduction
Hey everyone! In this article, we’ll understand what is a 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. Instructions that the browser will follow. While constructing the document object model or a DOM. So, 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 JavaScript is easy. Yet, the process of inserting new elements is slow.
Managing DOM elements with JavaScript can become very complicated and time-consuming. The solution for this is to React. React is a library that is to update the browser DOM for us. With React we do not interact with the DOM API. Instead, we interact with the virtual DOM or a set of instructions. What React will use to construct the UI and interact with the browser.
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. The React DOM 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. 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 of children or innerHTML text. So the react element is 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, container element);
In the first argument of this render method, we will specify the element which we want to render on the browser. For 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 before 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 properties of the element. After that, we will specify some text to the h1 heading tag. Now I want to render this react element in the DOM. So I will 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. 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 say here document.getElement by ID and specify the ID of the element. Therefore, when you execute this the output should look like this:
So, you have your development inside the h1 heading tag, the question specified in the command.
How to Set up React?
Before we learn how to create elements, 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 can even use the Webpack for having the hot reload. We need to install these packages globally. This will be important for having the necessary dependencies running on our system. So we can use the command: $ npm install -g create-react-app web pack
We can 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 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 import the React library.
After this, we are going to make our first element:
So before we proceed any further, let us talk about the arguments of the React.createElement(). The first type is the type created by us. 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 as 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 present with.
The next argument will be an object that contains properties. Properties that are ‘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 the beginning.
The last argument is the component’s children. This can also be a quoted string 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 takes 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 introducing 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 kept. 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 a 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.