Pour créer un élément React à l'aide du React API, il suffit d'appeler la méthode createElement de React et de lui passé le type d'élément souhaité, ainsi que ses props dans le format suivant:

const element = React.createElement(type, props);

Par exemple:

const element = React.createElement('div', {
  className: 'blue',
  children: 'Marshall Mathers'
});

Dans cet exemple, le type d'élément créé est un <div> et les props sont passées sous la forme d'un objet contenant les propriétés className et children, ce qui générera le résultat suivant:

<div class="blue">Marshall Mathers</div>

Variation: 3e paramètre

Dans l'exemple précédent, l'enfant du div.blue était passé grâce à la prop children. Cependant, il est aussi possible de spécifier un enfant en utilisant le 3e paramètre de la méthode createElement.

Par exemple, le code ci-dessous 👇 est équivalent au précédent ☝️:

const element = React.createElement(
  'div', 
  {className: 'blue'}, 
  'Marshall Mathers'
);

Pour l'instant, peu importe la variation utilisée, la variable element ne contient rien de plus qu'un element React sous la forme d'un objet JavaScript:

▶ Object
   $$typeof: Symbol(react.element)
   key: null
 ▶ props: {className: 'blue', children: 'Marshall Mathers'}
   ref: null
   type: "div"
   _owner: null
 ▶ [[Prototype]]: Object

Affichage d'un élément

Pour afficher un élément React, il suffit d'appeler la méthode render de React DOM et de lui passer l'objet à afficher, ainsi que le noeud du DOM dans lequel cet objet doit être inséré, bref son futur parent. Le tout dans le format suivant:

ReactDOM.render(element, parent);

Par exemple:

const root = document.querySelector('#root');
ReactDOM.render(element, root);

L'élément créé plus tôt via le React API est inséré dans la balise avec le id root.

Multiple enfants

Pour créer plusieurs enfants, il est possible de passer un tableau [...] à la propriété children.

Par exemple:

const element = React.createElement('div', {
  className: 'blue',
  children: ['Marshall', ' ', 'Mathers']
});

Générera trois nœuds texte distincts dans le DOM comme ceci:

<div class="blue">Marshall Mathers</div>

À priori le résultat semble identique, mais il s'agit réellement de 3 nœuds texte distincts l'un à la suite de l'autre, comme le démontre l'objet JavaScript ayant servi à le créé:

▶ Object
   $$typeof: Symbol(react.element)
   key: null
 ▶ props: {className: 'blue', children: ['Marshall', ' ', 'Mathers']}
   ref: null
   type: "div"
   _owner: null
 ▶ [[Prototype]]: Object

Variation: 3e paramètre

Il est aussi possible de spécifier des enfants avec la variation du 3e paramètre. Par exemple, l'équivalent le code suivant produit le même résultat que le code précédent:

const element = React.createElement(
  'div', 
  {className: 'blue'},
  'Marshall', ' ', 'Mathers'
);

Enfants HTML

Il est aussi possible de créer des enfants HTML. Pour ce faire, il suffit de créer un élément React et de le passer à titre d'enfant à son parent.

Par exemple:

Il est aussi possible de spécifier plusieurs enfants en ayant recours à un tableau comme suit: