Élément React

Un élément React est un objet JavaScript léger et immuable, élémentaire, qui décrit de manière déclarative ce qui doit être affiché à l’écran à un instant donné.

Il constitue l’unité de base du rendu dans React.

Structure interne d’un élément

Quand vous écrivez :

const element = <h1 className="titre">Bonjour</h1>;

React crée en réalité cet objet :

const element = {
  type: 'h1',
  props: {
    className: 'titre',
    children: 'Bonjour'
  },
  key: null,
  ref: null
};

Distinction claire : Élément vs Composant

+ ÉLÉMENT
  • Objet résultat, immuable
  • Décrit "quoi afficher"
  • Exemple : <div>Hello</div>

+ COMPOSANT
  • Fonction ou classe, exécutable
  • Décrit "comment construire" l'UI
  • Peut contenir de la logique et un état
  • Exemple : function Header() { return <div>Hello</div>; }

Relation : Un composant retourne un ou plusieurs éléments. React exécute les composants pour obtenir des éléments, puis rend ces éléments dans le DOM.

Exemple simple

// 1. Définition d'un COMPOSANT (usine)
function Salutation(props) {
  // Retourne un ÉLÉMENT (photo)
  return <h1>Bonjour, {props.nom}!</h1>;
}

// 2. Création manuelle d'un ÉLÉMENT (rare en pratique)
const elementManuel = React.createElement(
  'h1',
  null,
  'Bonjour, Alice!'
);

// 3. Utilisation normale : React exécute le composant
//    et récupère l'élément pour le rendre
root.render(<Salutation nom="Alice" />);
// → React exécute Salutation() → obtient l'élément <h1>... → met à jour le DOM

Pourquoi cette notion est essentielle

1. Performance (Virtual DOM) :
   Puisque les éléments sont immuables et légers, React peut comparer rapidement l’élément précédent et le nouvel élément pour ne mettre à jour que le strict nécessaire dans le vrai DOM.
2. Prédictibilité :
   L’immuabilité garantit qu’un élément ne change jamais après sa création. Chaque mise à jour génère un nouvel arbre d’éléments, rendant le flux de données unidirectionnel et plus facile à déboguer.
3. Abstraction du DOM :
   Les éléments React ne sont pas des éléments du navigateur. Ils sont agnostiques : le même élément peut être rendu dans le web (react-dom), en mobile (react-native), ou même sur serveur (react-server).

Pièges courants à éviter

Confondre élément et composant dans le rendu :

// Incorrect : on passe l'élément au lieu du composant
const monElement = <Bouton />;
root.render(monElement); // Fonctionne, mais on perd les bénéfices du composant

// Correct : on laisse React gérer l'exécution
root.render(<Bouton />);

Tenter de modifier un élément après création :

const el = <div id="old" />;
el.props.id = "new"; // Ne fonctionne pas (et ne devrait pas)
// Pour "modifier", il faut créer un NOUVEL élément :
const newEl = <div id="new" />;

Élément React = Objet descriptif immuable → « Quoi afficher »
Composant React = Fonction exécutable → « Comment le construire »
Flux : Composant → (exécution) → Élément → (React) → DOM