React Components (Français)

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

React Components

Les composants sont des bouts de code indépendants et réutilisables.Ils servent le même objectif que les fonctions JavaScript,mais fonctionnent de manière isolée et renvoient du HTML via une fonction render().

Les composants sont de deux types, les composants de classe et les composants de fonction, dans ce tutoriel nous allons nous concentrer sur les composants de classe.

Créer un composant de classe

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

Le composant doit inclure l’instruction extends React.Component, cette instruction crée un héritage à React.Component, et donne à votre composant l’accès aux fonctions de React.Component.

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

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

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

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

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

Créer un composant Fonction

Voici le même exemple que ci-dessus, mais créé en utilisant plutôt un composant Fonction.

Un composant Function renvoie également du HTML, et se comporte à peu près de la même manière qu’un composant Class, mais les composants Class ont quelques ajouts, et seront privilégiés dans ce tutoriel.

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

De nouveau, votre application React possède un composant Car.

Référer au composant Voiture comme du HTML normal (sauf que dans React, les composants doivent commencer par une majuscule) :

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

Constructeur de composant

S’il existe une fonction constructor() dans votre composant, cette fonction sera appelée lorsque le composant sera initié.

La fonction constructeur est l’endroit où vous initiez les propriétés du composant.

Dans React, les propriétés du composant doivent être conservées dans un objet appeléstate.

Vous en apprendrez davantage sur state plus tard dans ce tutoriel.

La fonction constructeur est également le lieu où vous honorez l’héritage du composant parent en incluant l’instruction super(), qui exécute la fonction constructeur du composant parent, et votre composant a accès à toutes les fonctions du composant parent (React.Component).

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a Car!</h2>; }}

Utiliser la propriété de couleur dans la fonction render() :

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a {this.state.color} Car!</h2>; }}

Props

Une autre façon de gérer les propriétés des composants est d’utiliser props.

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

Vous en apprendrez davantage sur props dans le prochain chapitre.

class Car extends React.Component { render() { return <h2>I am a {this.props.color} Car!</h2>; }}ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Composants dans les composants

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

class Car extends React.Component { render() { return <h2>I am a Car!</h2>; }}class Garage extends React.Component { render() { return ( <div> <h1>Who lives in my Garage?</h1> <Car /> </div> ); }}ReactDOM.render(<Garage />, document.getElementById('root'));

Composants dans des fichiers

React consiste à réutiliser le code, et il peut être intelligent d’insérer certains de vos composants dans des fichiers séparés.

Pour ce faire, créez un nouveau fichier avec une extension .js et mettez le code à l’intérieur :

Notez que le fichier doit commencer par importer React (comme précédemment), et qu’il doit se terminer par l’instruction exporter default Car;.

import React from 'react';import ReactDOM from 'react-dom';class Car extends React.Component { render() { 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 './App.js';ReactDOM.render(<Car />, document.getElementById('root'));

.