What are React HTML elements? (Built-In)

About

In React, HTML elements are:

• built-in React elements that wraps a HTML element
• the leaf of the React DOM tree

Example

with Jsx

In Jsx

• A css class that we will apply to our HTML element

.blue { color: blue; }

• The component with a p React element that outputs a HTML P element. We style it with a class and a inline styles

const ourP = <p className="blue" style={{textAlign: 'center'}}>Hello World</p>;

• The standard mandatory root DOM node (placeholder for React DOM manipulation)

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

• Rendering of the ReactHTML component in the root div defined below

ReactDOM.render(
  ourP,
  document.getElementById('root')
);

• Output:

with Pure Javascript

With createElement, the same example as above.

• The component with a p React element that outputs a HTML P element. We style it with a class and a inline styles

const ourP = React.createElement(
       'p' ,  // the type: the string equivalent of the HTML tag (ie h1, div, ...)
       {  
           className: "blue",
           style: {textAlign: 'center'}
       }, // props are the equivalent of HTML attributes
       ['Hello World'] // children are other react element or a string for a text node
)

• Output:

Syntax

They start with a lowercase letter whereas the component (React Element created by yourself or a library) starts with an uppercase letter.

• The name is lowercase
• Attributes:
  • dangerouslySetInnerHTML: This attribute permits to inject an HTML string. See How to inject a HTML string in React with the dangerouslySetInnerHTML attribute?
  • More ..

Ref

They are the only ones to be able to receive a ref directly to get the underlying DOM element. For component, you need to use React.forwardRef to make them ref aware.