What is a React Element?


An element is a node in the React tree (React DOM implementation) that has a type and props.

A component is a user-defined element.


If you don't have any knowledge of React, check the getting started first.

Elements are created with the createElement function of the React library (If you are using jsx files, when they are compiled, they generate code with the createElement function).

We create an alias/wrapper function called e around it to make the next code more concise.

var e =  function(type, props = [], ...children){
    return React.createElement(
       type,  // type is the string equivalent of the HTML tag (ie h1, div, ...) or the function/class component
       props, // props are the equivalent of HTML attributes 
       children // children are other react element or a string for a text node
  • A counter component with a useState hook to show how to call function
function Counter(props) {
    const [count, setCount] = React.useState(0); // state
    let updateCounter = function(){ setCount(count + 1) };
    return e(
        'div', // the type of element (div)
        {'className': 'container'}, // its properties
        e('h1', { className: 'H1'}, 'Welcome ', props.name), // first h1 child with two children text nodes
        e('p', null, 'A simple counter application'), // second p child
        e('p', null, "Counter: ", count), // third p child with two text nodes
            'button',  // a button
            { onClick: updateCounter}, // on click call the function updateCounter
// Wrapping it to be able to use the state
let App = e(Counter, {name: "Foo"});
  • Result:


A component return always a fragment (ie elements in a container).


The elements returned may be of two types:

How to list the type name (ie h1, h2, …)?

React.Children.map(children, (child) => {
   if(!React.isValidElement(child)) {
   const type = (child as ReactElement).type;



React elements are immutable.

Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.



All DOM properties and attributes (including event handlers) should have a camelCased name

For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased.

Attribute value

Concatenate in Jsx Example:

<g transform={"translate("+margin.left+",0)"} />



With Native Javascript

The only element that you needs to create inside React is a component. html react element are built-in element.

The React.createElement() function 1) is the basic block to create element/component.

  type, /* The html name or the function/class component */


React.createElement() performs a few checks to help write bug-free code but essentially it creates from

const element = React.createElement(
  {className: 'greeting'},
  'Hello, world!'

an object like this:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'

With Jsx

jsx is a language that compiles to elements via a transpiler generally babel.

When writing JSX, you are creating elements.


See React - Rendering (Lifecycle)


See React - (Component) Updating


See How to render a List of React Elements (Component, )?

Documentation / Reference

Discover More
How to inject multi React components in a page? A Multiple Root demo

This page shows how to render multiple root in the same web page For instance, when you want to integrate React component in another HTML application (php, ruby,...) with templating, you may render several...
How to render Jsx code in the browser

This article shows you how you can render JSX in the browser
How to render a List of React Elements (Component, )?

This page is Loop in React and Jsx. Example with Pure Javascript map is the Reference/Global_Objects/Array/mapArray Map function with an Arrow function as argument Example in React By adding...

is a virtual dom technology that permits to create HTML page or components based on the concepts that: If the data (state) changes, the UI should change too. Learn once, write anywhere Babel for...
React - Server-rendered markup (renderToString / hydrate)

server-rendered markup is the dynamic possibility of server-side rendering (vs static). The steps are: the web server returns a web page where the root component has been rendered as HTML with special...
React - Children Element

When you create an element, you pass one or more children elements that will build the React DOM tree. componentyou create a component Related: See also The below example codes are created with JSX....
React - Component (User-defined Element)

A component is a user-defined react element in the React tree. Components let you split the UI into independent, reusable pieces, and think each piece in isolation. Conceptually, components are like...
React - Forwarding Ref

The forwardRef function wraps a element to add to the props a ref that is generated by React. This ref is called a forwarding ref because you pass it along to use it in one of its child components in...
React - Fragment

A component / elements return always a fragment (A part of the React tree) When a component returns multiple stacked components, you need to wrap them: around a div element or a React.Fragment component...
React - Function Component

This page is the writing of a component with the functional syntax In Jsx A UD DOM component defining the Welcome tag A React element using this DOM tag Rendering The standard mandatory...

Share this page:
Follow us:
Task Runner