Composants

Les composants, ou en anglais "components", sont une des fonctionnalités les plus importantes de React. Ils permettent de découper l’interface utilisateur en éléments indépendants et réutilisables.

Fonction

Une fonction retournant le code HTML de la composante doit premièrement être créée.

Par exemple, avec une fonction JavaScript de base (fonction composant):

function Blue(props) {
  return <div className="blue">{props.children}</div>;
}

ou en étendant une classe ES6 React:

class Blue extends React.Component {
  render() {
    return <div className="blue">{this.props.children}</div>;
  }
}

Ces deux approches sont équivalentes du point de vue de React.

Simplification

Si un composant utilise peu de propriétés dans ses props, il est possible de déstructurer son paramètre dans le cadre d'une fonction composant.

Le code précédent pourrait-être réécris ainsi:

function Blue({children}) {
  return <div className="blue">{children}</div>;
}

Indiquant qu'un objet est passé en paramètre (props) et que seule sa propriété children est nécessaire. Donc la référence à props est retirée, permettant ainsi de simplifier l'accès à la valeur de children.

Utilisation

Pour utiliser une composante, il faut ensuite l'appeler. soit directement avec l'API de React:

const element = React.createElement(Blue, {children: 'Marshall Mathers'})

Ou encore plus simplement en JSX:

const element = <Blue>Marshall Mathers</Blue>

Par défaut, le contenu se trouvant entre deux balises d'un composant React est attribué comme valeur à la propriété children. D'où pourquoi ces deux codes sont équivalents.

Attributs

Il est possible de spécifier des propriétés supplémentaires en les définissant comme attribut sur un composant React.

Par exemple, plutôt que d'utiliser la propriété children, il est possible de créer une propriété intitulée text et d'utiliser celle-ci à la place:

Réutilisation & imbrication

Une fois définis, des composants React peuvent être réutilisés ou imbriqués à volonté sans problème. Ce qui les rends très flexibles et puissants.

Par exemple:

const element = (
  <Blue>Marshall Mathers</Blue>
  <Blue>Eminem</Blue>
  <Blue>Slim Shady</Blue>
)

Ou encore:

const element = (
  <Blue>
    Marshall Mathers
    <Blue>Eminem</Blue>
  </Blue>
)

Sont tout à fait valides.