Catégories
Astuces et Design

Premiers pas avec React: Guide du débutant

React est une bibliothèque JavaScript remarquable qui a pris d'assaut la communauté des développeurs. En un mot, il est plus facile pour les développeurs de créer des interfaces utilisateur interactives pour les plates-formes Web, mobiles et de bureau. Aujourd'hui, des milliers d'entreprises dans le monde utilisent React, y compris de grands noms tels que Netflix et Airbnb.

Dans ce guide, je vais vous présenter React et plusieurs de ses concepts fondamentaux. Nous nous mettrons rapidement en marche avec l'outil Créer une application React, puis nous suivrons étape par étape le processus de création d'une application React simple. Lorsque vous aurez terminé, vous aurez un bon aperçu des bases et serez prêt à franchir la prochaine étape de votre aventure React.

Conditions préalables

Avant de commencer à apprendre React, il est logique d'avoir une compréhension de base de HTML, CSS et JavaScript. Cela vous aidera également à avoir une compréhension de base de Node.js, ainsi que du gestionnaire de paquets npm.

Pour suivre ce didacticiel, vous devez installer Node et npm sur votre ordinateur. Pour ce faire, rendez-vous sur la page de téléchargement Node.js et récupérez la version dont vous avez besoin (npm est fourni avec Node). Vous pouvez également consulter notre tutoriel sur l'installation de Node à l'aide d'un gestionnaire de version.

Qu'est-ce que React?

React est une bibliothèque JavaScript pour la création de composants d'interface utilisateur. Contrairement aux frameworks plus complets tels que Angular ou Vue, React ne traite que la couche de vue, vous aurez donc besoin de bibliothèques supplémentaires pour gérer des choses telles que le routage, la gestion de l'état, etc. Dans ce guide, nous allons nous concentrer sur ce que React peut faire dès le départ.

Les applications React sont créées à l'aide de Composants de l'interface utilisateur qui peuvent interagir les uns avec les autres. Un composant React peut être un composant basé sur une classe ou un composant de fonction. Les composants basés sur les classes sont définis à l'aide de classes ES6, tandis que les composants de fonction sont des fonctions JavaScript de base. Celles-ci ont tendance à être définies à l'aide d'une fonction de flèche, mais elles peuvent également utiliser la fonction function mot-clé. Les composants basés sur les classes implémenteront un render function, qui renvoie du JSX (l'extension React de Regular JavaScript, utilisée pour créer des éléments React), alors que les composants de fonction renverront directement JSX. Ne vous inquiétez pas si vous n’avez jamais entendu parler de JSX, car nous y reviendrons plus tard.

Les composants React peuvent en outre être classés en avec état et apatride Composants. Le travail d’un composant sans état consiste simplement à afficher les données qu’il reçoit de son composant React parent. S'il reçoit des événements ou des entrées, il peut simplement les transmettre à son parent pour qu'il les gère.

Un composant avec état, quant à lui, est responsable du maintien d'une sorte d'état d'application. Cela peut impliquer de récupérer des données à partir d'une source externe ou de savoir si un utilisateur est connecté ou non. Un composant avec état peut répondre aux événements et aux entrées pour mettre à jour son état.

En règle générale, vous devez viser à écrire des composants sans état lorsque cela est possible. Ceux-ci sont plus faciles à réutiliser, à la fois dans votre application et dans d'autres projets.

Comprendre le DOM virtuel

Avant de passer au codage, vous devez savoir que React utilise un DOM virtuel pour gérer le rendu des pages. Si vous connaissez jQuery, vous savez qu'il peut manipuler directement une page Web via le DOM HTML. Dans de nombreux cas, cette interaction directe pose peu ou pas de problèmes. Cependant, dans certains cas, tels que l'exécution d'une application Web en temps réel hautement interactive, les performances peuvent en pâtir.

Pour contrer cela, le concept du DOM virtuel (une représentation en mémoire du vrai DOM) a été inventé et est actuellement appliqué par de nombreux frameworks d'interface utilisateur modernes, y compris React. Contrairement au DOM HTML, le DOM virtuel est beaucoup plus facile à manipuler et est capable de gérer de nombreuses opérations en quelques millisecondes sans affecter les performances de la page. React compare périodiquement le DOM virtuel et le DOM HTML. Il calcule ensuite un diff, qu'il applique au DOM HTML pour le faire correspondre au DOM virtuel. De cette façon, React garantit que votre application est rendue à une fréquence cohérente de 60 images par seconde, ce qui signifie que les utilisateurs ne subissent que peu ou pas de décalage.

Démarrer un projet React vierge

Conformément aux conditions préalables, je suppose que vous avez déjà configuré un environnement Node, avec une version à jour de npm (ou éventuellement Yarn).

Ensuite, nous allons créer notre première application React à l'aide de Create React App, un script utilitaire officiel permettant de créer des applications React d'une seule page.

Installons ceci maintenant:

npm i -g create-react-app

Ensuite, utilisez-le pour créer une nouvelle application React.

create-react-app message-app

Selon la vitesse de votre connexion Internet, cette opération peut prendre un certain temps s'il s'agit de la première fois que vous exécutez le create-react-app commander. Un tas de packages sont installés en cours de route, nécessaires pour mettre en place un environnement de développement pratique, y compris un serveur Web, un compilateur et des outils de test.

Si vous préférez ne pas installer trop de packages dans le monde, vous pouvez également npx, qui vous permet de télécharger et d'exécuter un package sans l'installer:

npx i -g create-react-app

L'exécution de l'une de ces commandes devrait générer quelque chose de similaire à ce qui suit:

...
Success! Created react-app at C:Usersmikeprojectsgithubmessage-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!

Une fois le processus de configuration du projet terminé, exécutez les commandes suivantes pour lancer votre application React:

cd message-app
npm start

Vous devriez voir la sortie suivante:

....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

Votre navigateur par défaut devrait se lancer automatiquement et vous devriez obtenir un écran comme celui-ci:

Créer une application React

Maintenant que nous avons confirmé que notre projet de démarrage React fonctionne sans erreur, voyons ce qui s'est passé sous le capot. Vous pouvez ouvrir le dossier message-app en utilisant votre éditeur de code préféré. Commençons avec package.json fichier:

{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": (
      ">0.2%",
      "not dead",
      "not op_mini all"
    ),
    "development": (
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    )
  }
}

Comme vous pouvez le voir, Create React App a installé plusieurs dépendances pour nous. Les trois premiers sont liés à la bibliothèque de tests React qui (comme vous pouvez le deviner) nous permet de tester notre code React. Ensuite nous avons react et react-dom, les packages de base de toute application React, et enfin react-scripts, qui configure l'environnement de développement et démarre un serveur (que vous venez de voir).

Viennent ensuite quatre scripts npm, qui sont utilisés pour automatiser les tâches répétitives:

  • start démarre le serveur de développement
  • build crée une version de votre application prête pour la production
  • test exécute les tests mentionnés ci-dessus
  • eject exposera l'environnement de développement de votre application

Cette commande finale mérite d'être développée. L'outil Create React App fournit une séparation claire entre votre code réel et l'environnement de développement. Si vous courez npm run eject, Create React App arrêtera de cacher ce qu'elle fait sous le capot et videra tout dans votre projet package.json fichier. Bien que cela vous donne un contrôle plus fin sur les dépendances de votre application, je ne vous recommanderais pas de le faire, car vous devrez gérer tout le code complexe utilisé pour créer et tester votre projet. Si cela arrive, vous pouvez utiliser personnaliser-cra pour configurer votre processus de construction sans éjecter.

Create React App est également pris en charge avec ESLint (comme le montre le eslintConfig property) et est configuré à l'aide des règles ESLint de react-app.

le browserslist propriété de la package.json fichier vous permet de spécifier une liste de navigateurs pris en charge par votre application. Cette configuration est utilisée par les outils et transpileurs PostCSS tels que Babel.

L’une des fonctionnalités les plus intéressantes de l’application Create React est qu’elle fournit rechargement à chaud hors de la boîte. Cela signifie que toute modification que nous apportons au code entraînera l'actualisation automatique du navigateur. Les modifications apportées au code JavaScript rechargeront la page, tandis que les modifications apportées au CSS mettront à jour le DOM sans recharger.

Pour l'instant, arrêtons d'abord le serveur de développement en appuyant sur Ctrl + C. Une fois le serveur arrêté, supprimez tout sauf le serviceWorker.js et setupTests.js fichiers dans le src dossier. Si vous souhaitez découvrir ce que font les prestataires de services, vous pouvez en savoir plus à leur sujet ici.

En dehors de cela, nous allons créer tout le code à partir de zéro afin que vous puissiez tout comprendre à l'intérieur du src dossier.

Présentation de la syntaxe JSX

Défini par la documentation React comme une «extension de syntaxe de JavaScript», JSX est ce qui facilite l'écriture de vos composants React. En utilisant JSX, nous pouvons transmettre des structures HTML ou des éléments React comme s'il s'agissait de valeurs JavaScript standard.

Voici un exemple rapide:

import React from 'react';

export default function App() {
  const message = <h1>I'm a headingh1>;  
  return ( message );
}

Remarquez la ligne const message =

I'm a heading

;. C’est JSX. Si vous essayez de l'exécuter dans un navigateur Web, cela vous donnera une erreur. Cependant, dans une application React, JSX est interprété par un transpilateur, tel que Babel, et rendu en code JavaScript que React peut comprendre.

Remarque: vous pouvez en savoir plus sur JSX dans notre tutoriel «Une introduction à JSX».

Dans le passé, les fichiers React JSX étaient accompagnés d'un .jsx extension de fichier. De nos jours, l'outil Create React App génère des fichiers React avec un .js extension de fichier. Tandis que le .jsx l'extension de fichier est toujours prise en charge, les responsables de React recommandent d'utiliser .js. Cependant, il existe un groupe opposé de développeurs React, dont moi-même, qui préfèrent utiliser le .jsx extension, pour les raisons suivantes:

  • Dans VS Code, Emmet est prêt à l'emploi pour .jsx des dossiers. Vous pouvez cependant configurer VS Code pour traiter tous .js fichiers comme JavaScriptReact pour faire fonctionner Emmet sur ces fichiers.
  • Il existe différentes règles de linting pour le code JavaScript standard et le code JavaScript React.

Cependant, pour ce didacticiel, je vais respecter ce que Create React App nous donne et m'en tenir à la .js fin de fichier.

Bonjour le monde! dans React

Commençons par écrire du code. À l'intérieur de src dossier du nouvellement créé message-app, créé un index.js fichier et ajoutez le code suivant:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

Redémarrez le serveur de développement en utilisant npm start ou yarn start. Votre navigateur doit afficher le contenu suivant:

Bonjour React

Il s'agit de l'exemple React le plus élémentaire de «Hello World». le index.js file est la racine de votre projet où les composants React seront rendus. Laissez-moi vous expliquer comment fonctionne le code:

  • Ligne 1: le package React est importé pour gérer le traitement JSX.
  • Ligne 2: Le package ReactDOM est importé pour rendre le composant React racine.
  • Ligne 3: Appel à la fonction de rendu, en passant:

    • Hello World

      : un élément JSX

    • document.getElementById('root'): un conteneur HTML (l'élément JSX sera rendu ici).

Le conteneur HTML se trouve dans le public/index.html fichier. À la ligne 31, vous devriez voir

. Ceci est connu comme le nœud DOM racine car tout ce qu'il contient sera géré par le Réagir le DOM virtuel.

Bien que JSX ressemble beaucoup au HTML, il existe quelques différences clés. Par exemple, vous ne pouvez pas utiliser un class attribut, car il s'agit d'un mot clé JavaScript. Au lieu, className est utilisé à sa place. En outre, des événements tels que onclick sont épelés onClick dans JSX. Modifions maintenant notre code Hello World:

const element = <div>Hello World</div>;
ReactDOM.render(element, document.getElementById('root'));

J'ai déplacé le code JSX dans une variable constante nommée element. J'ai également remplacé le h1 tags avec div Mots clés. Pour que JSX fonctionne, vous devez envelopper vos éléments dans une seule balise parent.

Jetez un œil à l'exemple suivant:

const element = <span>Hello,</span> <span>Jane</span>;

Le code ci-dessus ne fonctionnera pas. Vous obtiendrez une erreur de syntaxe indiquant que vous devez inclure les éléments JSX adjacents dans une balise englobante. Quelque chose comme ça:

const element = <div>
    <span>Hello, </span>
    <span>Jane</span>
    </div>;

Que diriez-vous d'évaluer les expressions JavaScript dans JSX? Facile. Utilisez simplement des accolades comme ceci:

const name = "Jane";
const element = <p>Hello, {name}</p>

… Ou comme ça:

const user = {
  firstName: 'Jane',
  lastName: 'Doe'
}
const element = <p>Hello, {user.firstName} {user.lastName}</p>

Mettez à jour votre code et confirmez que le navigateur affiche «Hello, Jane Doe». Essayez d'autres exemples tels que { 5 + 2 }. Maintenant que vous avez les bases de l'utilisation de JSX, allons-y et créons un composant React.

Déclaration des composants React

L'exemple ci-dessus était une manière simpliste de vous montrer comment ReactDOM.render() travaux. En général, nous encapsulons toute la logique du projet dans les composants React, qui sont ensuite passés au ReactDOM.render une fonction.

À l'intérieur de src dossier, créez un fichier nommé App.js et tapez le code suivant:

import React, { Component } from 'react';

class App extends Component {

  render(){
    return (
      <div>
        Hello World Again!
      </div>
    )
  }
}

export default App;

Ici, nous avons créé un composant React en définissant une classe JavaScript qui est une sous-classe de React.Component. Nous avons également défini une fonction de rendu qui renvoie un élément JSX. Vous pouvez placer du code JSX supplémentaire dans le

Mots clés. Ensuite, mettez à jour src/index.js avec le code suivant afin de voir les changements reflétés dans le navigateur:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

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

Nous importons d'abord le App composant. Ensuite, nous rendons App en utilisant le format JSX, comme ceci: . Ceci est nécessaire pour que JSX puisse le compiler en un élément qui peut être poussé vers le React DOM. Après avoir enregistré les modifications, jetez un œil à votre navigateur pour vous assurer qu'il affiche le bon message.

Ensuite, nous verrons comment appliquer un style.

Styliser les éléments JSX

Il existe différentes manières de styliser les composants React. Les deux que nous allons examiner dans ce didacticiel sont:

  1. Style en ligne JSX
  2. Feuilles de style externes

Voici un exemple de la façon dont nous pouvons implémenter le style en ligne JSX:



render() {
  const headerStyle = {
    color: '#ff0000',
    textDecoration: 'underline'
  }
  return (
    <div>
      <h1 style={headerStyle}>Hello World Again!</h1>
    </div>
  )
}

Le style React ressemble beaucoup au CSS ordinaire, mais il existe quelques différences clés. Par exemple, headerStyle est un objet littéral. Nous ne pouvons pas utiliser de points-virgules comme nous le faisons normalement. De plus, un certain nombre de déclarations CSS ont été modifiées afin de les rendre compatibles avec la syntaxe JavaScript. Par exemple, au lieu de text-decoration, nous utilisons textDecoration. Fondamentalement, utilisez la casse camel pour toutes les clés CSS à l'exception des préfixes de fournisseur tels que WebkitTransition, qui doit commencer par une majuscule.

Nous pouvons également implémenter le style de cette façon:



return (
  <div>
    <h1 style={{color:'#ff0000', textDecoration: 'underline'}}>Hello World Again!</h1>
  </div>
)

La deuxième méthode utilise des feuilles de style externes. Par défaut, les feuilles de style CSS externes sont déjà prises en charge. Si vous souhaitez utiliser un préprocesseur tel que Sass, veuillez consulter la documentation pour savoir comment le configurer.

À l'intérieur de src dossier, créez un fichier nommé App.css et tapez le code suivant:

h1 {
  font-size: 4rem;
}

Ajoutez l'instruction d'importation suivante à src/App.js en haut du fichier:

import './App.css';

Après l'enregistrement, vous devriez voir le contenu du texte de votre navigateur changer considérablement de taille. Vous pouvez également utiliser des classes CSS comme celle-ci:

.header-red {
  font-size: 4rem;
  color: #ff0000;
  text-decoration: underline;
}

Mise à jour src/App.js comme suit:

<h1 className="header-red">Hello World Again!</h1>

Nous ne pouvons pas utiliser du HTML class attribut puisqu'il s'agit d'un mot clé JavaScript réservé. Au lieu de cela, nous utilisons className. Ci-dessous devrait être votre sortie attendue.

Styling dans React

Maintenant que vous avez appris à ajouter du style à votre projet React, allons-y et découvrons les composants React sans état et avec état.

Composants sans état ou avec état

Un composant sans état, également appelé composant stupide, est simplement un composant qui affiche des informations. Il ne contient aucune logique pour manipuler les données. Il peut recevoir des événements de l'utilisateur, qui sont ensuite transmis au conteneur parent pour traitement.

Créer le fichier message-view.js et copiez-y l'exemple de code suivant. Voici un exemple parfait d'un composant stupide (bien que techniquement il s'agisse plus d'un composant statique):

import React from 'react';

class MessageView extends React.Component {
  render() {
    return(
      <div className="message">
        <div className="field">
          <span className="label">From: </span>
          <span className="value">John Doe</span>
        </div>
        <div className="field">
          <span className="label">Status: </span>
          <span className="value"> Unread</span>
        </div>
        <div className="field content">
          <span className="label">Message: </span>
          <span className="value">Have a great day!</span>
        </div>
      </div>
    )
  }
}

export default MessageView;

Ensuite, ajoutez un style de base à src/App.css avec le code suivant:

body {
  background-color: #EDF2F7;
  color: #2D3748;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
  font-size: 2rem;
}

.container {
  width: 800px;
  margin: 0 auto;
}

.message {
  background-color: #F7FAFC;
  width: 400px;
  margin-top: 20px;
  border-top: solid 2px #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.field{
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}

.label {
  font-weight: bold;
  font-size: 1rem;
  width: 6rem;
}

.value {
  color: #4A5568;
}

.content .value {
  font-style: italic;
}

Enfin, modifiez src/App.js pour que le fichier entier ressemble à ceci:

import React, { Component } from 'react';

import './App.css';
import MessageView from './message-view';

class App extends Component {
  render(){
    return (
      <MessageView />
    )
  }
}

export default App;

À présent, le code devrait être assez explicite, comme j'ai déjà expliqué les concepts impliqués jusqu'à présent. Jetez un œil à votre navigateur maintenant, et vous devriez avoir le résultat suivant:

Affichage des messages

Nous avons mentionné précédemment que React propose à la fois des composants basés sur les classes et des fonctions. Nous pouvons réécrire MessageView en utilisant une syntaxe fonctionnelle comme celle-ci:

import React from 'react';

export default function MessageView() {
  return (
    <div className="message">
      <div className="field">
        <span className="label">From: </span>
        <span className="value">John Doe</span>
      </div>
      <div className="field">
        <span className="label">Status: </span>
        <span className="value"> Unread</span>
      </div>
      <div className="field content">
        <span className="label">Message: </span>
        <span className="value">Have a great day!</span>
      </div>
    </div>
  );
}

Notez que j'ai supprimé le Component import, car cela n'est pas obligatoire dans la syntaxe fonctionnelle. Ce style peut prêter à confusion au début, mais vous apprendrez rapidement qu’il est plus rapide d’écrire des composants React de cette façon.

De plus, avec l'avènement des hooks React, ce style d'écriture des composants React devient de plus en plus populaire.

Passer des données via des accessoires

Vous avez créé avec succès un composant React sans état. Cependant, il n’est pas terminé, car il reste encore du travail à faire pour l’intégrer correctement à un composant ou un conteneur avec état. Actuellement, le MessageView affiche des données statiques. Nous devons le modifier pour qu'il puisse accepter les paramètres d'entrée. Nous faisons cela en utilisant quelque chose appelé accessoires – des données que nous allons transmettre à partir d'un composant parent.

Commencez par modifier le MessageView composant comme ceci:

import React from 'react';

class MessageView extends React.Component {
  render() {
    const message = this.props.message;

    return(
      <div className="message">
        <div className="field">
          <span className="label">From: </span>
          <span className="value">{message.from}</span>
        </div>
        <div className="field">
          <span className="label">Status: </span>
          <span className="value">{message.status}</span>
        </div>
        <div className="field content">
          <span className="label">Message: </span>
          <span className="value">{message.content}</span>
        </div>
      </div>
    )
  }
}

export default MessageView;

La principale chose à savoir ici est de savoir comment nous définissons le message variable. Nous lui attribuons une valeur de this.props.message, que nous transmettrons à partir d'un composant parent avec état. Dans notre JSX, nous pouvons alors référencer notre message variable et l'afficher sur la page.

Créons maintenant un composant parent pour notre MessageView. Créer un nouveau fichier message-list.js et ajoutez le code suivant:

import React, { Component } from 'react';
import MessageView from './message-view';

class MessageList extends Component {
  state = {
    message: {
      from: 'Martha',
      content: 'I will be traveling soon',
      status: 'read'
    }
  }

  render() {
    return(
      <div className="container">
        <h1>List of Messages</h1>
        <MessageView message={this.state.message} />
      </div>
    )
  }
}

export default MessageList;

Ici, nous utilisons state pour stocker un objet contenant notre message. Une partie de la magie de React est que lorsque l'objet d'état change, le composant sera de nouveau rendu (mettant ainsi à jour l'interface utilisateur).

Ensuite, dans notre JSX, nous passons le message propriété de notre state objecter à la MessageView composant.

La dernière étape consiste à mettre à jour notre App composant pour rendre notre nouveau stateful MessageList composante, par opposition à l'apatride MessageView composant:

import React, { Component } from 'react';
import MessageList from './message-list';

import './App.css';

class App extends Component {
  render(){
    return (
      <MessageList />
    )
  }
}

export default App;

Après avoir enregistré les modifications, vérifiez votre navigateur pour voir le résultat.

Liste des messages

Prenez un moment pour vous assurer que vous comprenez ce qui se passe. Nous déclarons un state objet dans notre (avec état) MessageList composant. UNE message propriété de cet objet contient notre message. Dans notre render fonction, nous pouvons transmettre ce message à notre composant enfant (sans état) en utilisant quelque chose appelé accessoires.

Dans le (apatride) MessageView composant, nous pouvons accéder au message en utilisant this.props.message. Nous pouvons ensuite transmettre cette valeur à notre JSX pour le rendre sur la page.

Phew!

Vérification des accessoires

Au fur et à mesure que votre application se développe et que les données sont transmises comme accessoires, il sera utile de valider que les composants reçoivent le type de données qu'ils attendent.

Heureusement, nous pouvons le faire avec le package prop-types. Pour voir un exemple rapide de cela en action, modifiez notre MessageView composant comme suit:

import React from 'react';
import PropTypes from 'prop-types';

class MessageView extends Component {
  
)

MessageView.propTypes = {
  message: PropTypes.object.isRequired
}

export default MessageView;

Cela amènera votre application React à se plaindre si le message prop est manquant. Cela l'amènera également à se plaindre si le composant reçoit autre chose qu'un objet.

Vous pouvez essayer ceci en modifiant l’état du composant parent comme ceci:

 state = {
  message: 'Not an object!'
}

Revenez à votre navigateur et ouvrez la console. Vous devriez voir ce qui suit connecté à la console:

Warning: Failed prop type: Invalid prop `message` of type `string` supplied to `MessageView`, expected `object`.
    in MessageView (at message-list.js:13)
    in MessageList (at App.js:9)
    in App (at src/index.js:6)

Réutilisation des composants

Voyons maintenant comment nous pouvons afficher plusieurs messages à l'aide de MessageView instances. C'est là que React commence à briller, car il rend la réutilisation du code incroyablement facile (comme vous le verrez).

Premièrement, nous allons changer state.message à un tableau et renommez-le en messages. Ensuite, nous utiliserons la fonction de carte de JavaScript pour générer plusieurs instances de MessageView composant, chacun correspondant à un message dans le state.messages tableau.

Nous devrons également renseigner un attribut spécial nommé clé avec une valeur unique telle que id. React en a besoin pour garder une trace des éléments de la liste qui ont été modifiés, ajoutés ou supprimés.

Mettre à jour le MessageList code comme suit:

class MessageList extends Component {
  state = {
    messages:  (
      {
        _id: 'd2504a54',
        from: 'John',
        content: 'The event will start next week',
        status: 'unread'
      },
      {
        _id: 'fc7cad74',
        from: 'Martha',
        content: 'I will be traveling soon',
        status: 'read'
      },
      {
        _id: '876ae642',
        from: 'Jacob',
        content: 'Talk later. Have a great day!',
        status: 'read'
      }
    )
  }

  render() {
    const messageViews = this.state.messages.map(
      message => <MessageView key={message._id} message={message} />
    )

    return(
      <div className="container">
        <h1>List of Messages</h1>
        {messageViews}
      </div>
    )
  }
}

Vérifiez votre navigateur pour voir les résultats:

Boucle de messages

Comme vous pouvez le constater, il est facile de définir des blocs de construction pour créer des interfaces d’interface utilisateur puissantes et complexes à l’aide de React.

Refactor pour utiliser les crochets React

Les Hooks sont une édition récente de React, mais ils prennent d'assaut le monde de React. En termes simplistes, ils permettent de prendre un composant de fonction React et de lui ajouter un état (et d'autres fonctionnalités).

Je vais terminer ce tutoriel en refactorisant notre MessageView composant pour en faire un composant de fonction, qui gère son état avec les hooks React. Veuillez noter que cela n'est possible que lors de l'utilisation de React v16.8 et supérieur.

import React, { useState } from 'react';
import MessageView from './message-view';

export default function MessageList () {
  const initialValues = (
    {
      _id: 'd2504a54',
      from: 'John',
      content: 'The event will start next week',
      status: 'unread'
    },
    {
      _id: 'fc7cad74',
      from: 'Martha',
      content: 'I will be traveling soon',
      status: 'read'
    },
    {
      _id: '876ae642',
      from: 'Jacob',
      content: 'Talk later. Have a great day!',
      status: 'read'
    }
  );

  const (messages) = useState(initialValues);
  const messageViews = messages.map(
    message => <MessageView key={message._id} message={message} />
  );

  return (
    <div className="container">
      <h1>List of Messages</h1>
      {messageViews}
    </div>
  );
}

Dans l'exemple ci-dessus, j'ai remplacé le state objet avec le hook useState React. Comme son nom l'indique, cela vous permet de gérer l'état d'un composant.

L'utilisation de crochets vous aidera à éviter ce que l'on appelle le forage d'hélices lorsque vous travaillez sur de grands projets. Forage d'hélice vous voit passer des accessoires à travers plusieurs composants (qui n'ont finalement pas besoin de ces données) juste pour atteindre un composant profondément imbriqué.

Nous pouvons également convertir notre MessageView composant à un composant de fonction:

import React from 'react';
import PropTypes from 'prop-types';

const MessageView = ({ message }) => {
  const { from, status, content } = message;

  return(
    <div className="message">
      <div className="field">
        <span className="label">From: span>
        <span className="value">{from}span>
      div>
      <div className="field">
        <span className="label">Status: span>
        <span className="value">{status}span>
      div>
      <div className="field content">
        <span className="label">Message: span>
        <span className="value">{content}span>
      div>
    div>
  );
};

MessageView.propTypes = {
  message: PropTypes.object.isRequired
}

export default MessageView;

Remarquez comment nous recevons maintenant le message prop dans notre composant:

const MessageView = ({ message }) => {
  ...
}

Cela utilise une technique appelée déstructuration d'objets, qui vous permet d'extraire des éléments individuels à partir de tableaux ou d'objets et de les placer dans des variables à l'aide d'une syntaxe abrégée.

Nous utilisons la même technique ici, pour saisir les valeurs dont nous avons besoin message objet et évitez de tout préfixer avec message:

const { from, status, content } = message;

Et c’est le lot!

Je ne veux pas aller plus loin dans les hooks React dans cet article, mais simplement vous faire prendre conscience qu'ils existent et qu'ils sont de plus en plus populaires au sein de la communauté React. Si vous souhaitez en savoir plus sur les hooks, veuillez lire notre guide pour démarrer avec React Hooks.

Démo

Voici une démo en direct avec laquelle vous pouvez jouer:

Voir le stylo
Application React Message par SitePoint (@SitePoint)
sur CodePen.

Où aller en partant d'ici

Nous arrivons maintenant à la fin de ce guide d’introduction. Il y a beaucoup plus de concepts React que je n'ai pas pu couvrir, tels que la récupération de données, la gestion des erreurs, le routage, l'utilisation des formulaires, le débogage. La liste continue …

La bonne nouvelle est que nous avons beaucoup de contenu React génial sur SitePoint Premium, ainsi que de nombreux articles intéressants sur notre blog. Je vous encourage à les consulter et à créer quelque chose de génial.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *