What are React HTML elements? (Built-In)


In React, HTML elements are:


with Jsx

In Jsx

  • A css class that we will apply to our HTML element
.blue { color: blue; }
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
  • Output:

with Pure Javascript

With createElement, the same example as above.

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:


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


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.

Discover More
How to inject a HTML string in React with the dangerouslySetInnerHTML attribute?

How to add a HTML string (for instance for when you have converted a markdown document in an HTML string). with a function component in Jsx The standard mandatory root DOM node (placeholder for React...
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 - Composite Component (Layout) / Container Component

React Layout / Composition - There is three methods to create a composite component from html component / or composite (decorator) Props: via props but alsoRefs (They provide a way...
React - Getting Started (The Welcome Element)

React is a virtual dom library that: permits to define the HTML dom programmatically will update HTML dom incrementally There is basically two big steps when you work with React (or any virtual...
React Render Element Splittsing
React - ReactDOM.render

ReactDOM.render is the main function that renders an element into a DOM element. It will be: the root element in a single page application or another react element called a secondary root, when...
What is a React Element?

An element is a node in the React tree (React DOM implementation) that has a type and props. component getting started createElementjsx filescreateElement e A counter component with a useState...
What is a React Ref?

A ref is a state object that holds a value in its current property for the entire lifetime of the component. It's used to hold information that isn’t used for rendering. Unlike with state, updating...
What is the React Virtual DOM? Components Tree/Hierarchy

The React tree is: a tree composed of React node that implements a virtual DOM system known as the React DOM where only the updates are applied to: the real DOM (browser DOM) or for Native...

Share this page:
Follow us:
Task Runner