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?
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.