Posted

3 minutes read

What are React elements?

Elements are the smallest building blocks of any React app and describe what you want to see on the screen.
In essence an element is a plain object describing a component instance or DOM node and its desired properties.

What information do React elements contain?

The elements contain only information related to:

  • type (for example Button, div)
  • its properties
  • any child elements that it contains inside it

How can you create the object representation of a DOM node / component element instance?

For manually creating the React element object representation we can use the createElement method.


React.createElement(
  type,
  [props],
  [...children]
)

The type argument can be either a DOM tag name string (such as ‘div’) or a React component type (a class or a function) or a React fragment type.

Usually you will not invoke React.createElement() directly as most of the time you will be using JSX.

The code written in JSX will be converted into using React.createElement().

Example of using React.createElement:


const element = React.createElement('div',{id:'search-button'},'Results');
Example of using React.createElement:

const element = <div id="search-button">Results</div>

What does the React createElement return?

The method return just an immutable description object with two fields:


type: (string | ReactClass)
props: Object.
For example:

{
	type: 'div',
	props: {
		children: 'Results',
		id: 'search-button'
	}
}

When does an element represent a DOM node?

When an element’s type is a string, it represents a DOM node with that tag name and with the props corresponding to its attributes. For example the object representation below is a DOM node:


{
	type: 'div',
	props: {
		className: 'highlight red',
		children: {
			type: 'b',
			props: {
				children: 'Hello React!'
			}
		}
	}
}

Basically the object above represents the object representation of the following HTML:


<div class="highlight red">
  <b>
    Hello React!
  </b>
</div>

How to create an element tree?

To create an element tree we only need to specify one or more child elements as the children prop of their containing element.

Why use this representation for a DOM node?

The reasoning behind using elements are: – easy to traverse
– don’t need to be parsed
– they are much lighter than the actual DOM elements—they’re just plain objects

What are component elements?

The type of an element can also be a function or a class corresponding to a React component, it does not have to be a string representing a DOM node. For example:


{
	type: Button,
	props: {
		color: 'blue',
		children: 'Test'
	}
}

This is the main idea of React: an element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.

Can I mix DOM and component elements?

Yes, that is the main idea of React. For example:


const SignoutAccount = () => ({
	type: 'div',
	props: {
		children: [{
			type: 'p',
			props: {
				children: 'Are you sure?'
			}
		}, {
			type: ConfirmButton,
			props: {
				children: 'Yes'
			}
		}, {
			type: Button,
			props: {
				color: 'blue',
				children: 'No'
			}
		}]
	}
}
});

Or in the JSX representation:


const SignoutAccount = () => (
{
  	<div>
  		<p>Are you sure?</p>
  		<ConfirmButton>Yes</ConfirmButton>
  		<Button>No</Button>
  	</div>  	
});

Are React elements immutable?

Yes, React elements are immutable. Once an element gets created, its children or attributes cannot be changed. An element represents the UI at a certain snapshot point in time.

Does React update the entire DOM?

No, React updates only the DOM parts that have changed.

For more information please visit the documentation on the reactjs.org.





Thanks for reading. I hope you learned something interesting about React!
If you found this article useful, please share it with others. Don’t forget to subscribe to get notified for the upcoming articles.