Composants de réaction

Les composants sont comme des fonctions qui renvoient des éléments HTML.

Composants de réaction

Les composants sont des morceaux de code indépendants et réutilisables. Elles ont le même objectif que les fonctions JavaScript, mais fonctionnent de manière isolée et renvoient du HTML.

Les composants sont de deux types, les composants de classe et les composants de fonction. Dans ce didacticiel, nous nous concentrerons sur les composants de fonction.

Créez votre premier composant

Lors de la création d'un composant React, le nom du composant DOIT commencer par une lettre majuscule.

Composant de classe

Un composant de classe doit inclure l' extends React.Componentinstruction. Cette instruction crée un héritage pour React.Component et donne à votre composant l'accès aux fonctions de React.Component.

Le composant nécessite également une render()méthode, cette méthode renvoie HTML.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Composant de fonction

Voici le même exemple que ci-dessus, mais créé à l'aide d'un composant Function à la place.

Un composant Function renvoie également HTML et se comporte à peu près de la même manière qu'un composant Class, mais les composants Function peuvent être écrits en utilisant beaucoup moins de code, sont plus faciles à comprendre et seront préférés dans ce didacticiel.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

Rendu d'un composant

Maintenant, votre application React a un composant appelé Car, qui renvoie un <h2>élément.

Pour utiliser ce composant dans votre application, utilisez une syntaxe similaire à celle du HTML normal : <Car />

ReactDOM.render(<Car />, document.getElementById('root'));

Accessoires

Les composants peuvent être passés sous la forme props, ce qui signifie propriétés.

Les accessoires sont comme des arguments de fonction, et vous les envoyez dans le composant en tant qu'attributs.

Vous en apprendrez plus propsdans le chapitre suivant.

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Composants dans Composants

Nous pouvons faire référence à des composants à l'intérieur d'autres composants :

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Composants dans les fichiers

React consiste à réutiliser le code, et il est recommandé de diviser vos composants en fichiers séparés.

Pour ce faire, créez un nouveau fichier avec une .js extension de fichier et insérez-y le code :

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

Pour pouvoir utiliser le composant Car, vous devez importer le fichier dans votre application.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}