React - HTML element (Built-In)

About

In React, HTML elements are built-in React elements of the React DOM tree that wraps a HTML element

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

Example

with a function component in Jsx

  • A css class that we will apply to our HTML element
.blue { color: blue; }
function ReactHTML() {
  // styles is an object where the keys are CSS properties in camel Case 
  const styles = {textAlign: 'center'};
  // p are built-in react element that produces HTML p elements
  return ( <p className="blue" style={styles}>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(
  <ReactHTML/>,
  document.getElementById('root')
);
  • Output:

Syntax





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 - Element

An element is a node in the React tree (React DOM implementation). component getting started createElementjsx filescreateElement e A counter component with a useState hook to show how to call...
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...
React - Tree (Virtual DOM) - Component Hierarchy

The React tree is: a tree composed of React elements that implements a virtual DOM system where only the updates are applied to the real DOM (browser DOM) React element (components, html...



Share this page:
Follow us:
Task Runner