React Functional Components, Props et JSX - Tutoriel React.js pour les débutants

React est l'une des bibliothèques JavaScript les plus populaires pour la création d'interfaces utilisateur.

Si vous souhaitez devenir développeur front-end ou trouver un emploi en développement Web, vous bénéficierez probablement d'un apprentissage approfondi de React.

Dans cet article, vous allez apprendre certaines des bases de React telles que la création d'un composant, la syntaxe JSX et les accessoires. Si vous n'avez pas ou peu d'expérience avec React, cet article est pour vous.

Pour commencer, voici comment installer React.

Qu'est-ce que JSX?

La première chose que vous réaliserez après l'installation de votre premier projet React est qu'une fonction JavaScript renvoie du code HTML:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Il s'agit d'une extension de syntaxe spéciale et valide pour React qui s'appelle JSX (JavaScript XML). Normalement, dans les projets liés au frontend, nous conservons le code HTML, CSS et JavaScript dans des fichiers séparés. Cependant, dans React, cela fonctionne un peu différemment.

Dans les projets React, nous ne créons pas de fichiers HTML séparés, car JSX nous permet d'écrire HTML et JavaScript combinés dans le même fichier, comme dans l'exemple ci-dessus. Vous pouvez cependant séparer votre CSS dans un autre fichier.

Au début, JSX peut sembler un peu bizarre. Mais ne vous inquiétez pas, vous vous y habituerez.

JSX est très pratique, car nous pouvons également exécuter n'importe quel code JavaScript (logique, fonctions, variables, etc.) à l'intérieur du HTML directement en utilisant des accolades {}, comme ceci:

function App() { const text = 'Hello World'; return ( 

{text}

); }

Vous pouvez également affecter des balises HTML aux variables JavaScript:

const message = 

React is cool!

;

Ou vous pouvez renvoyer du HTML dans la logique JavaScript (comme les cas if-else):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Je n'entrerai pas dans les détails de JSX, mais assurez-vous de prendre en compte les règles suivantes lors de l'écriture de JSX:

  • Les balises HTML et composants doivent toujours être fermées
  • Certains attributs comme «class» deviennent «className» (car class se réfère aux classes JavaScript), «tabindex» devient «tabIndex» et doit être écrit camelCase
  • Nous ne pouvons pas renvoyer plus d'un élément HTML à la fois, alors assurez-vous de les envelopper dans une balise parent:
return ( 

Hello

World

);
  • ou comme alternative, vous pouvez les envelopper avec des balises vides:
return (  

Hello

World

);

Vous pouvez également regarder mon tutoriel React pour les débutants pour plus d'informations:

Que sont les composants fonctionnels et de classe?

Après s'être habitué à la syntaxe JSX, la prochaine chose à comprendre est la structure basée sur les composants de React.

Si vous revisitez l'exemple de code en haut de cet article, vous verrez que le code JSX est renvoyé par une fonction. Mais la fonction App () n'est pas une fonction ordinaire - c'est en fait un composant. Alors, qu'est-ce qu'un composant?

Qu'est-ce qu'un composant?

Un composant est un bloc de code indépendant et réutilisable qui divise l'interface utilisateur en plus petits morceaux. Par exemple, si nous construisions l'interface utilisateur de Twitter avec React:

Plutôt que de créer toute l'interface utilisateur sous un seul fichier, nous pouvons et devons diviser toutes les sections (marquées en rouge) en plus petites parties indépendantes. En d'autres termes, ce sont des composants.

React a deux types de composants: fonctionnelset classe. Regardons chacun maintenant plus en détail.

Composants fonctionnels

Le premier type de composant recommandé dans React est celui des composants fonctionnels. Un composant fonctionnel est essentiellement une fonction JavaScript / ES6 qui renvoie un élément React (JSX). Selon la documentation officielle de React, la fonction ci-dessous est un composant fonctionnel valide:

function Welcome(props) { return 

Hello, {props.name}

; }

Vous pouvez également créer un composant fonctionnel avec la définition de fonction de flèche:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Cette fonction est un composant React valide car elle accepte un seul argument d'objet «props» (qui signifie propriétés) avec des données et renvoie un élément React. - reactjs.org

Pour pouvoir utiliser un composant plus tard, vous devez d'abord l'exporter afin de pouvoir l'importer ailleurs:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

Après l'avoir importé, vous pouvez appeler le composant comme dans cet exemple:

import Welcome from './Welcome'; function App() { return ( ); }

Donc, un composant fonctionnel dans React:

  • est une fonction JavaScript / ES6
  • doit retourner un élément React (JSX)
  • commence toujours par une majuscule (convention de dénomination)
  • prend les accessoires comme paramètre si nécessaire

Que sont les composants de classe?

Le deuxième type de composant est le composant de classe. Les composants de classe sont des classes ES6 qui renvoient JSX. Ci-dessous, vous voyez notre même fonction Welcome, cette fois en tant que composant de classe:

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

Différents des composants fonctionnels, les composants de classe doivent avoir une méthode render () supplémentaire pour renvoyer JSX.

Pourquoi utiliser des composants de classe?

Nous avions l'habitude d'utiliser des composants de classe à cause de "l'état". Dans les anciennes versions de React (version <16.8), il n'était pas possible d'utiliser l'état à l'intérieur des composants fonctionnels.

Par conséquent, nous avions besoin de composants fonctionnels pour le rendu de l'interface utilisateur uniquement, alors que nous utiliserions des composants de classe pour la gestion des données et certaines opérations supplémentaires (comme les méthodes de cycle de vie).

Cela a changé avec l'introduction de React Hooks, et maintenant nous pouvons également utiliser des états dans les composants fonctionnels. (Je couvrirai l'état et les crochets dans mes articles suivants, alors ne les dérangez pas pour le moment).

Un composant de classe:

  • est une classe ES6, sera un composant une fois qu'il «étendra» un composant React.
  • prend des accessoires (dans le constructeur) si nécessaire
  • doit avoir un render ()méthode pour renvoyer JSX

Que sont les accessoires dans React?

Un autre concept important des composants est la façon dont ils communiquent. React a un objet spécial appelé prop (signifie propriété) que nous utilisons pour transporter des données d'un composant à un autre.

Mais soyez prudent - les accessoires transportent uniquement les données dans un flux à sens unique (uniquement des composants parents aux composants enfants). Il n'est pas possible avec les accessoires de transmettre des données d'un enfant à un parent, ou à des composants de même niveau.

Revisitons la fonction App () ci-dessus pour voir comment transmettre des données avec des accessoires.

Tout d'abord, nous devons définir un accessoire sur le composant Welcome et lui attribuer une valeur:

import Welcome from './Welcome'; function App() { return ( ); }

Les accessoires sont des valeurs personnalisées et ils rendent également les composants plus dynamiques. Puisque le composant Welcome est l'enfant ici, nous devons définir des accessoires sur son parent (App), afin de pouvoir transmettre les valeurs et obtenir le résultat simplement en accédant au prop "name":

function Welcome(props) { return 

Hello, {props.name}

; }

Les accessoires React sont vraiment utiles

Les développeurs React utilisent donc des accessoires pour transmettre des données et ils sont utiles pour ce travail. Mais qu'en est-il de la gestion des données? Les accessoires sont utilisés pour transmettre des données, pas pour les manipuler. Je vais couvrir la gestion des données avec React dans mes futurs articles ici sur freeCodeCamp.

En attendant, si vous souhaitez en savoir plus sur le développement React & Web, n'hésitez pas à vous abonner à ma chaîne YouTube.

Merci pour la lecture!