Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

3. Créer notre premier composant

Nous allons créer notre premier composant, depuis le temps que vous en entendez parler !

Cependant, nous allons organiser un peu notre code en mettant nos fichiers sources dans un dossier src, plutôt qu’avec nos fichiers de configuration à la racine de notre projet. Créez donc un dossier src à la racine de votre projet. À l’intérieur de ce dossier, créez un nouveau fichier nommé App.tsx, qui contiendra notre premier composant 😀 :

import React from 'react';

const App: React.FC = () => {
 const name: String = 'React';
	
 return (
  <h1>Hello, {name} !</h1>
 )
}

export default App;

Nous allons prendre un peu de temps pour décrire ce fichier, car malgré sa taille réduite, ce fichier est composé de trois parties différentes.

D’abord, on importe le module React dont on va avoir besoin pour déclarer notre premier composant. On importe donc React depuis le module… react :

import React from 'react';

Ensuite, à la ligne 3, on s’aperçoit que l’on a typé notre composant App avec le type React.FC. Nous comprenons ce qu’est React, car nous venons de l’importer. Mais qu’est ce que « FC » signifie » ?

Et bien, cela signifie « Function Component« , c’est-à-dire un composant que l’on peut écrire sous la forme d’une fonction. Nous y reviendrons dans le chapitre sur les Composants, mais sachez que React propose plusieurs types de composants différents, des composants sous forme de fonctions, mais également sous forme de classes. Dans notre cas, nous utilisons un composant écrit avec une fonction. (React encourage fortement les développeurs à utiliser les composants écrits sous forme de fonctions, car ils sont plus performants et plus lisibles, même si certaines fonctionnalités sont bien sûr plus limitées).

Heu, … attend tu dis que le composant est une fonction, or il est écrit « const » au début de la ligne et non « function » ! 🧐

Vous avez raison, mais c’est une constante qui contient … une fonction ! Rappelez-vous des fonctions fléchées d’ECMAScript 6 :

const App: React.FC = () => { // Ceci est le corps de ma fonction };

Alors, bien sûr, on aurait pu écrire une fonction directement :

fonction App(): React.FC { // Ceci est le corps de ma fonction };

Quel est l’intérêt de passer par une constante ? Et bien cela nous permet d’utiliser une fonction fléchée plutôt qu’une fonction traditionnelle, et rappelez-vous tous les avantages d’utiliser une fonction fléchée, notamment les confusions avec this.

Enfin, on retrouve le code de notre composant. On déclare d’abord à la ligne 4 une variable de type String, qui contient la valeur « React ». Ensuite, on souhaite afficher cette valeur dans notre DOM virtuelle, grâce à JSX. Pour cela on utilise la fonction return à la ligne 6, et entre parenthèses nous écrivons l’instruction JSX suivante :

<h1>Hello, {name} !</h1>

Comme nous l’avons déjà vu, la syntaxe avec les accolades permet d’utiliser JavaScript dans JSX, qui va remplacer name par la valeur « React ». Cette expression JSX va donc afficher « Hello, React !« . Lorsque nous aurons finis de mettre en place notre projet, ce sera donc la première chose que vous verrez à l’écran. 👍

Et la dernière ligne du fichier App.tsx, à quoi elle sert ?

Ah oui, j’ai failli l’oublié ! Cette dernière ligne permet d’exporter notre composant, afin qu’il soit utilisable dans le reste de notre application.

Et avant de terminer, je souhaiter vous montrer une petite astuce qui me paraît intéressante, regardez le code ci-dessous :

import React, { FunctionComponent } from 'react';

const App: FunctionComponent = () => {
 const name: String = 'React';
	
 return (
  <h1>Hello, {name} !</h1>
 )
}

export default App;

Je n’ai modifié que la ligne 1 et 3. J’ai utilisé le destructuring d’ECMAScript 6 pour extraire le type FunctionComponent du paquet react. Ainsi, plutôt que de typer mon composant avec React.FC, je peux utiliser directement FunctionComponent. Je ne sais pas pour vous, mais je trouve ça beaucoup plus lisible et moins fatiguant à lire. Je ne peux que vous recommander de faire la même chose.