Golang React JS Technology Blog

React Elements

A React element is a JavaScript object with specific properties and methods that React assigns and uses internally. React elements are the instructions for how the browser DOM get created. When we use ReactDOM library React elements are getting changed into DOM elements. However, when we use React Native, React elements are getting changed into native UI elements of Android or iOS.

Create Simple React Element

We create React elements using a function called createElement(). The .createElement() method is part of the Top-Level React API, and we use it to create React elements. This method takes three parameters:

  1. The first argument defines type of element to create.
  2. The second argument defines properties or attributes of the element.
  3. The third argument represents the element's children, any nodes or simple text that are inserted between the opening and closing tag.

You don't need to install NPM and React library, just type out the below code in index.html to create a React element to represent an H1 tag using React.createElement. During rendering, React will convert this element to an actual DOM element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://fb.me/react-0.14.3.min.js"></script>
	<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
</head>

<body>
	<div id="root"></div>
</body>

<script>
const hello = React.createElement(
	"H1",
	{id: "msg", className: "title"},
	"Hello React Element"
);

ReactDOM.render(
  hello,
  document.getElementById('root')
);
</script>

</html>

The above example first imports both the React and ReactDOM libraries in HTML file. We can render a React element, including its children, to the DOM with ReactDOM.render. Here ReactDOM.render(), which takes a React element H1 as the first parameter. The ReactDOM.render() will then convert this React element into a valid DOM element. The second parameter is the target node, where on the page it should add this newly created DOM element.

A React Element is not an instance of a React Component. It is just a simplified description of how the React Component Instance to be created should look like. A React Element that describes a React Component doesn't know to which DOM node it is eventually rendered - this association is abstracted and will be resolved while rendering.

Creating React Elements Using a React Component

The JSX format is a superset of JavaScript that allows HTML to be mixed with regular code statements. The JSX format used for React development allows HTML elements to be defined declaratively. I have replaced the placeholder content in the App.js file with a component whose render method returns some simple HTML elements.

App.js

import React from 'react';

class App extends React.Component {
	render = () =>
        <h1 className="title" id="msg">
            Hello React Element
        </h1>
}

export default App;
Nested React Elements without JSX

Let's run another example with JSX. React Elements may contain child elements and thus are capable of forming element trees, which represent the Virtual DOM tree. The tree has one root element from which many branches grow. In this example of unordered list there is a root element with three childrens. The React.createElement used to represent ul and its children. The additional argument sent to the createElement function is another child element due to this React creates an array of these child elements.

App.js

import React from 'react';

const programming = React.createElement(
			  	"section", {id: "coding"}, React.createElement("h1", null, "Programming Languages"),
					React.createElement("ul", {className: "coding"},
						React.createElement("li", null, "Java"),
						React.createElement("li", null, "Python"),
						React.createElement("li", null, "PHP"))
				);

class App extends React.Component {
	render() {
		return (
			programming
		);
	}
}

export default App;
Return multiple elements inside render()

Using logic of JavaScript we can also build the React component tree. Data can be stored in an array, and we can map that array to the React elements. We can map over the items array and create list items for as many items as there are in array.

App.js

import React from 'react';

const items = [
	"C++",
	"PHP",
	"JAVA"
];

class App extends React.Component {
	render() {
		return (
			React.createElement(
				"ol",
					{ className: "coding" },
						items.map((coding, i) =>
							React.createElement("li", { key: i }, coding)
						)
			)
		);
	}
}

export default App;

This creates a React element for each item in the array. Each string is displayed in the list item's children as text. The value for each data array is displayed as the list item.

Important characteristics of a React Elements need to remember:

  1. React elements have a string to create a DOM element.
  2. React elements are nestable and you can implement other React elements as the children of an element.
  3. React uses React elements to create a virtual DOM that React DOM can use as it restores the browser DOM.
  4. React elements are what components it makes from in React.
Most Helpful This Week
React JSX Create React App React Components