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: