React est l’une des bibliothèques JavaScript les plus populaires pour la construction d’interfaces utilisateur.
Si vous voulez devenir un développeur front-end ou trouver un emploi dans le développement web, vous auriez probablement avantage à apprendre React en profondeur.
Dans ce post, vous allez apprendre certaines des bases de React comme la création d’un composant, la syntaxe JSX et les Props. Si vous n’avez pas ou peu d’expérience avec React, ce post est pour vous.
Pour commencer, voici comment vous pouvez installer React.
Qu’est-ce que JSX?
La première chose que vous réaliserez après avoir installé votre premier projet React est qu’une fonction JavaScript renvoie du code HTML:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}C’est une extension de syntaxe spéciale et valide pour React qui est appelée JSX (JavaScript XML). Normalement, dans les projets liés à la façade, nous gardons 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 ensemble 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, et ainsi de suite) à l’intérieur du HTML directement en utilisant des accolades { }, comme ceci :
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}De plus, vous pouvez attribuer des balises HTML à des variables JavaScript :
const message = <h1>React is cool!</h1>;Ou vous pouvez retourner du HTML à l’intérieur de la logique JavaScript (comme les cas if-else):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Je n’entrerai pas dans d’autres détails de JSX, mais assurez-vous de considérer les règles suivantes lors de l’écriture de JSX :
- Les balises HTML et de composants doivent toujours être fermées < />
- Certains attributs comme « class » deviennent « className » (parce que class fait référence aux classes JavaScript), « tabindex » devient « tabIndex » et doivent être écrits en camelCase
- On ne peut pas renvoyer plus d’un élément HTML à la fois, alors assurez-vous de les envelopper dans une balise parent :
return ( <div> <p>Hello</p> <p>World</p> </div>);- ou comme alternative, vous pouvez les envelopper avec des balises vides:
return ( <> <p>Hello</p> <p>World</p> </>);Vous pouvez également regarder mon tutoriel React pour débutants pour plus d’infos:
Que sont les composants de classe &fonctionnels ?
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 ce post, 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 construire l’ensemble de l’interface utilisateur sous un seul fichier, nous pouvons et nous devons diviser toutes les sections (marquées en rouge) en plus petits morceaux indépendants. En d’autres termes, ce sont des composants.
React a deux types de composants : fonctionnels et de classe. Examinons maintenant chacun d’eux plus en détail.
Composants fonctionnels
Le premier type de composant recommandé dans React est le composant fonctionnel. Un composant fonctionnel est fondamentalement une fonction JavaScript/ES6 qui renvoie un élément React (JSX). Selon les docs officiels de React, la fonction ci-dessous est un composant fonctionnel valide:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternativement, vous pouvez également créer un composant fonctionnel avec la définition de la fonction flèche:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Cette fonction est un composant React valide car elle accepte un seul argument 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 pour pouvoir l’importer ailleurs:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Après l’avoir importé, vous pouvez appeler le composant comme dans cet exemple:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}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 nommage)
- prend des props en 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 du 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 <h1>Hello, {this.props.name}</h1>; }}Différent des composants fonctionnels, les composants de classe doivent avoir une méthode supplémentaire render( ) pour retourner 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’UI uniquement, tandis 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 posts suivants, alors ne vous en préoccupez pas pour l’instant).
Un composant de classe :
- est une classe ES6, sera un composant une fois qu’elle ‘étend’ un composant React.
- prend des Props (dans le constructeur) si nécessaire
- doit avoir une méthode render( ) pour retourner JSX
Que sont les Props dans React ?
Un autre concept important des composants est la façon dont ils communiquent. React dispose d’un objet spécial appelé prop (signifie propriété) que nous utilisons pour transporter des données d’un composant à un autre.
Mais attention – les props ne transportent les données que dans un flux à sens unique (uniquement des composants parents aux composants enfants). Il n’est pas possible avec les props de passer des données d’un enfant à un parent, ou à des composants de même niveau.
Revisitons la fonction App( ) ci-dessus pour voir comment passer des données avec des props.
D’abord, nous devons définir un prop sur le composant Welcome et lui attribuer une valeur :
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Les props 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 props sur son parent (App), afin que nous puissions passer les valeurs et obtenir le résultat simplement en accédant à la prop « name »:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
Les props React sont vraiment utiles
Donc, les développeurs React utilisent les props pour passer les données et ils sont utiles pour ce travail. Mais qu’en est-il de la gestion des données ? Les props sont utilisés pour passer des données, pas pour les manipuler. Je vais couvrir la gestion des données avec React dans mes futurs posts ici sur freeCodeCamp.
En attendant, si vous voulez en savoir plus sur le développement Web React &, n’hésitez pas à vous abonner à ma chaîne YouTube.
Merci de votre lecture !
.