React : Présentation et procédure pas à pas

tutoriel React : Présentation et procédure pas à pas

Niveau
  1. Initié
  2. Confirmé
React : Présentation et procédure pas à pas
traduction française du tutoriel de Tania Rascia : React Tutorial: An Overview and Walkthrough

react.png

Le guide essentiel pour démarrer avec React. Ce didacticiel pas à pas vous permettra de créer une application dans React à partir de zéro, tout en vous familiarisant avec l'état, les accessoires et les composants.



Conditions préalables
Si vous n'avez jamais utilisé JavaScript ou DOM du tout auparavant, par exemple, je me familiariserais davantage avec ceux-ci avant d'essayer de m'attaquer à React.

Voici ce que je considère être les prérequis de React.
  • Connaissance de base du HTML et du CSS .
  • Connaissance de base de JavaScript et de la programmation.
  • Compréhension de base du DOM .
  • Familiarité avec la syntaxe et les fonctionnalités ES6 .
  • Node.js et npm installés globalement.


Qu'est-ce que React ?
  • React est une bibliothèque JavaScript - l'une des plus populaires, avec plus de 100 000 étoiles sur GitHub .
  • React n'est pas un Framework (contrairement à Angular, qui est plus opiniâtre).
  • React est un projet open-source créé par Facebook.
  • React est utilisé pour créer des interfaces utilisateur (UI) sur le front-end.
  • React est la vue couche de d'une application MVC (Model View Controller)
L'un des aspects les plus importants de React est le fait que vous pouvez créer des composants , qui ressemblent à des éléments HTML personnalisés et réutilisables, pour créer rapidement et efficacement des interfaces utilisateur. React rationalise également la manière dont les données sont stockées et traitées, en utilisant l' état et les accessoires .

Nous allons passer en revue tout cela et plus tout au long de l'article, alors commençons.

Configuration et installation

Il existe plusieurs façons de configurer React, et je vais vous en montrer deux pour que vous ayez une bonne idée de son fonctionnement.

Fichier HTML statique

Cette première méthode n'est pas un moyen populaire de configurer React et ce n'est pas comment nous allons faire le reste de notre tutoriel, mais elle sera familière et facile à comprendre si vous avez déjà utilisé une bibliothèque comme jQuery, et c'est le manière la moins effrayante de commencer si vous n'êtes pas familier avec Webpack, Babel et Node.js.

Commençons par créer un fichier index.html basique. Nous allons charger trois CDN dans le header: React, React DOM et Babel. Nous allons également créer un div avec un identifiant appelé root, et enfin nous créerons une blaise script où votre code personnalisé vivra.

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>

On charge les dernières versions stables des bibliothèques suivantes:
  • React - l'API de premier niveau React
  • React DOM - ajoute des méthodes spécifiques au DOM
  • Babel - un compilateur JavaScript qui nous permet d'utiliser ES6 + dans les anciens navigateurs
Le point d'entrée de notre application sera l'élément div root, qui est nommé ainsi par convention. Vous remarquerez également le type de script text/babel, qui est obligatoire pour utiliser Babel.

Maintenant, écrivons notre premier bloc de code de React. Nous allons utiliser les classes ES6 pour créer un composant React appelé App
JavaScript
class App extends React.Component {
  //...
}

Nous allons maintenant ajouter la méthode render(), la seule méthode requise dans un composant de classe, qui est utilisée pour restituer les nœuds DOM.
JavaScript
class App extends React.Component {
  render() {
      return (
          //...
      );
  }
}

Dans le return, nous allons mettre ce qui ressemble à un simple élément HTML. Notez que nous ne renvoyons pas de chaîne ici, donc n'utilisez pas de guillemets autour de l'élément. C'est ce qu'on appelle JSX, et nous en apprendrons plus bientôt.
JavaScript
class App extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}

Enfin, nous allons utiliser la méthode React DOM render() pour rendre la classe App que nous avons créée dans la div root dans notre HTML.
Code
ReactDOM.render(<App />, document.getElementById('root'))

Et voici le code complet de notre fichier index.html
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
  </body>
</html>

Maintenant, si vous affichez votre index.html dans le navigateur, vous verrez la balise h1 que nous avons créée (rendue) dans le DOM.
Screen-Shot-2018-08-18-at-10.34.09-AM.png

Cool ! Maintenant que vous avez fait cela, vous pouvez voir que React n'est pas si effrayant pour commencer. Ce ne sont que quelques bibliothèques d'aide JavaScript que nous pouvons charger dans notre HTML.

Nous l'avons fait à des fins de démonstration, mais à partir de maintenant, nous allons utiliser une autre méthode: Create React App.


Créer une application React

La méthode que je viens d'utiliser pour charger des bibliothèques JavaScript dans une page HTML statique et rendre React et Babel à la volée n'est pas très efficace et est difficile à maintenir.

Heureusement, Facebook a créé Create React App, un environnement préconfiguré avec tout ce dont vous avez besoin pour créer une application React. Il créera un serveur de développement en direct, utilisera Webpack pour compiler automatiquement React, JSX et ES6, préfixera automatiquement les fichiers CSS et utilisera ESLint pour tester et avertir des erreurs dans le code.

Pour configurer create-react-app, exécutez le code suivant dans votre terminal, dans un répertoire à partir duquel vous souhaitez que le projet soit créé.
Terminal
$ npx create-react-app react-tutorial

Une fois l'installation terminée, accédez au répertoire nouvellement créé et démarrez le projet.
Terminal
$ cd react-tutorial && npm start

Une fois que vous exécutez cette commande, une nouvelle fenêtre apparaîtra localhost:3000 avec votre nouvelle application React.
Screen-Shot-2018-08-18-at-11.37.59-AM.png

Create React App est très utile pour les débutants ainsi que pour les applications d'entreprise à grande échelle, mais ce n'est pas parfait pour tous les flux de travail. Vous pouvez également créer votre propre configuration Webpack pour React.

Si vous regardez dans la structure du projet, vous verrez un répertoire /public et répertoire /src, ainsi que les classiques node_modules, .gitignore, README.md et package.json.

Dans /public, notre fichier important est index.html, qui est très similaire au fichier statique index.html que nous avons créé précédemment - juste une div root. Cette fois, aucune bibliothèque ou script n'est en cours de chargement. Le répertoire /src contiendra tout notre code React.

Pour voir comment l'environnement compile et met à jour automatiquement votre code React, recherchez la ligne qui ressemble à ceci dans /src/App.js:
Terminal
To get started, edit [ICODE]src/App.js[/ICODE] and save to reload.

Et remplacez-le par tout autre texte. Une fois que vous avez enregistré le fichier, vous remarquerez que localhost:3000 est compilé et actualisé avec les nouvelles données.

Allez-y et supprimez tous les fichiers du répertoire /src, et nous créerons notre propre fichier standard. Nous allons simplement garder index.css et index.js.

Pour index.css, je viens d'y copier-coller le contenu de Primitive CSS. Si vous le souhaitez, vous pouvez utiliser Bootstrap ou tout autre Framework CSS que vous voulez, ou même rien du tout mais je trouve simplement plus facile de travailler avec celui-ci.

Maintenant dans index.js, nous importons React, ReactDOM et le fichier CSS.
JSX
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'

Créons notre nouveau composant App. Avant, nous avions juste un <h1>, mais maintenant j'ajoute un élément div avec une classe également. Vous remarquerez que nous utilisons à la className à la place de class. C'est notre premier indice que notre code en cours d'écriture ici est du JavaScript, et non du HTML.
JSX
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

Enfin, nous rendons App à la racine comme auparavant.
JSX
ReactDOM.render(<App />, document.getElementById('root'))

Et donc voici notre index.js complet. Cette fois, nous chargeons le Composant en tant que propriété de React, nous n'avons donc plus besoin d'étendre React.Component.
JSX
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

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

Si vous revenez sur localhost:3000, vous verrez "Hello, React!" juste comme avant. Nous avons maintenant les prémices d'une application React.

Outils de développement React

Il existe une extension appelée React Developer Tools qui vous facilitera la vie lorsque vous travaillez avec React. Téléchargez React DevTools pour Chrome ou pour le navigateur sur lequel vous préférez travailler.

Après l'avoir installé, lorsque vous ouvrez DevTools, vous verrez un onglet pour React. Cliquez dessus et vous pourrez inspecter les composants au fur et à mesure qu'ils sont écrits. Vous pouvez toujours accéder à l'onglet Éléments pour voir la sortie réelle du DOM. Cela ne semble peut-être pas être un gros problème maintenant, mais à mesure que l'application se complique, son utilisation deviendra de plus en plus nécessaire.
Screen-Shot-2018-08-18-at-3.45.11-PM.png
Nous avons maintenant tous les outils et la configuration dont nous avons besoin pour commencer à travailler avec React.

JSX: JavaScript + XML

Comme vous l'avez vu, nous avons utilisé ce qui ressemble à du HTML dans notre code React, mais ce n'est pas tout à fait du HTML. Il s'agit de JSX , qui signifie JavaScript XML.

Avec JSX, nous pouvons écrire ce qui ressemble à du HTML, et nous pouvons également créer et utiliser nos propres balises de type XML. Voici à quoi ressemble JSX assigné à une variable.
JSX
const heading = <h1 className="site-heading">Hello, React</h1>

L'utilisation de JSX n'est pas obligatoire pour écrire React. Sous le capot, il s'exécute createElement, qui prend la balise, l'objet contenant les propriétés et les enfants du composant et restitue les mêmes informations. Le code ci-dessous aura la même sortie que le JSX ci-dessus.
pas JSX
const heading = React.createElement('h1', {className: 'site-heading'}, 'Hello, React!')

JSX est en fait plus proche de JavaScript que de HTML, il y a donc quelques différences clés à noter lors de son écriture.
  • className est utilisé à la place de class pour ajouter des classes CSS,parce que class est un mot clé réservé en JavaScript.
  • Les propriétés et méthodes dans JSX sont camelCase - onclick deviendra onClick.
  • Les balises à fermeture automatique doivent se terminer par une barre oblique - par exemple <img />
Les expressions JavaScript peuvent également être intégrées dans JSX à l'aide d'accolades, y compris des variables, des fonctions et des propriétés.
JSX
const name = 'Tania'
const heading = <h1>Hello, {name}</h1>

JSX est plus facile à écrire et à comprendre que la création et l'ajout de nombreux éléments en Vanilla JavaScript, et c'est l'une des raisons pour lesquelles les gens aiment tellement React.

Components

Jusqu'à présent, nous avons créé un composant - le composant App. Presque tout dans React se compose de composants, qui peuvent être des composants de classe ou des composants simples .

La plupart des applications React ont de nombreux petits composants et tout se charge dans le composant App principal . Les composants ont aussi souvent leur propre fichier, donc modifions notre projet en ce sens.

Supprimez la classe App de index.js, voici le résultat.
JSX
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

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

Nous allons créer un nouveau fichier appelé App.js et y placer le composant.
JSX
import React, {Component} from 'react'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

export default App

Nous exportons le composant en tant que App et le chargeons dans index.js. Il n'est pas obligatoire de séparer les composants en fichiers, mais une application commencera à devenir lourde et incontrôlable si vous ne le faites pas.

Composants de classe

Créons un autre composant. Nous allons créer une table. Créez Table.js et remplissez-le avec les données suivantes.
JSX
import React, {Component} from 'react'

class Table extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Charlie</td>
            <td>Janitor</td>
          </tr>
          <tr>
            <td>Mac</td>
            <td>Bouncer</td>
          </tr>
          <tr>
            <td>Dee</td>
            <td>Aspiring actress</td>
          </tr>
          <tr>
            <td>Dennis</td>
            <td>Bartender</td>
          </tr>
        </tbody>
      </table>
    )
  }
}

export default Table

Ce composant que nous avons créé est un composant de classe personnalisé. Nous capitalisons (première lettre en majuscule) les composants personnalisés pour les différencier des éléments HTML classiques. De retour dans App.js, nous pouvons charger le tableau, d'abord en l'important dedans:
JSX
import Table from './Table'

Puis en le chargeant dans le render() de App, où avant nous avions "Hello, React!". J'ai également changé la classe du conteneur extérieur.
JSX
import React, {Component} from 'react'
import Table from './Table'

class App extends Component {
  render() {
    return (
      <div className="container">
        <Table />
      </div>
    )
  }
}

export default App

Si vous revenez sur votre environnement live, vous verrez le fichier Table chargé.
Screen-Shot-2018-08-18-at-6.10.55-PM.png

Nous avons maintenant vu ce qu'est un composant de classe personnalisé. Nous pourrions réutiliser ce composant encore et encore. Cependant, comme les données y sont codées en dur, ce ne serait pas trop utile pour le moment.

Composants simples

L'autre type de composant dans React est le composant simple, qui est une fonction. Ce composant n'utilise pas le mot-clé class. Prenons notre Table et créons deux composants simples pour cela: un en-tête de tableau (header) et un corps de tableau (body).

Nous allons utiliser les fonctions fléchées ES6 pour créer ces composants simples. Tout d'abord, l'en-tête du tableau.
JSX
const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  )
}

Ensuite le corps
JSX
const TableBody = () => {
  return (
    <tbody>
      <tr>
        <td>Charlie</td>
        <td>Janitor</td>
      </tr>
      <tr>
        <td>Mac</td>
        <td>Bouncer</td>
      </tr>
      <tr>
        <td>Dee</td>
        <td>Aspiring actress</td>
      </tr>
      <tr>
        <td>Dennis</td>
        <td>Bartender</td>
      </tr>
    </tbody>
  )
}

Maintenant, notre fichier Table ressemblera à ceci. Notez que les composants Tableheader et Tablebody sont tous dans le même fichier et utilisés par le composant de classe Table.
JSX
const TableHeader = () => { ... }
const TableBody = () => { ... }

class Table extends Component {
  render() {
    return (
      <table>
        <TableHeader />
        <TableBody />
      </table>
    )
  }
}

Tout devrait apparaître comme avant. Comme vous pouvez le voir, les composants peuvent être imbriqués dans d'autres composants, et les composants simples et de classe peuvent être mélangés.

Un composant de classe doit inclure render() et return ne peut renvoyer qu'un seul élément parent.

Pour conclure, comparons un composant simple avec un composant de classe.
[CODE lang="jsx"const SimpleComponent = () => {
return <div>Example</div>
}[/CODE]
React
class ClassComponent extends Component {
  render() {
    return <div>Example</div>
  }
}

Notez que si le return est contenu sur une seule ligne, il n'a pas besoin de parenthèses.

Accessoires

À l'heure actuelle, nous avons un composant Table sympa, mais les données sont codées en dur. L'un des gros problèmes de React est la façon dont il gère les données, et il le fait avec les propriétés, appelées accessoire, et avec l'état. Maintenant nous allons nous concentrer sur la gestion des données avec les accessoires.

Tout d'abord, supprimons toutes les données de notre composant TableBody.

JSX
const TableBody = () => {
  return <tbody />
}

Ensuite, déplaçons toutes ces données vers un tableau d'objets, comme si nous introduisions une API JSON. Nous devrons créer ce tableau dans notre render().
JSX
class App extends Component {
  render() {
    const characters = [
      {
        name: 'Charlie',
        job: 'Janitor',
      },
      {
        name: 'Mac',
        job: 'Bouncer',
      },
      {
        name: 'Dee',
        job: 'Aspring actress',
      },
      {
        name: 'Dennis',
        job: 'Bartender',
      },
    ]

    return (
      <div className="container">
        <Table />
      </div>
    )
  }
}

Maintenant, nous allons transmettre les données au composant enfant (ICODE]Table[/ICODE]) avec des propriétés, un peu comme vous pourriez transmettre des données à l'aide d'attributs data-. Nous pouvons appeler la propriété comme nous voulons, tant que ce n'est pas un mot-clé réservé, donc appelons la characterData. La donnée que je passe est la variable characters, et je vais mettre des accolades autour d'elle car c'est une expression JavaScript.
JSX
return (
  <div className="container">
    <Table characterData={characters} />
  </div>
)

Maintenant que les données sont transmises à Table, nous devons travailler pour y accéder de l'autre côté.
JSX
class Table extends Component {
  render() {
    const {characterData} = this.props

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    )
  }
}

Si vous ouvrez React DevTools et inspectez le composant Table, vous verrez le tableau de données dans la propriété. Les données stockées ici sont connues sous le nom de DOM virtuel, qui est un moyen rapide et efficace de synchroniser les données avec le DOM réel.
Screen-Shot-2018-08-19-at-5.43.39-PM.png

Cependant, ces données ne sont pas encore dans le DOM réel. Dans Table, nous pouvons accéder à tous les accessoires via this.props. Nous ne transmettons qu'un seul accessoire, characterData, nous allons donc utiliser this.props.characterData pour récupérer ces données.

Je vais utiliser le raccourci de la propriété ES6 pour créer une variable qui contient this.props.characterData.
JSX
const {characterData} = this.props

Étant donné que notre composant Table se compose en fait de deux composants simples plus petits, je vais le passer au TableBody, encore une fois à travers les accessoires.
JSX
class Table extends Component {
  render() {
    const {characterData} = this.props

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    )
  }
}

Pour le moment TableBody ne prend aucun paramètre et renvoie une seule balise.
JSX
const TableBody = () => {
  return <tbody />
}

Nous allons passer les accessoires en tant que paramètre et mapper le tableau pour renvoyer une ligne de table pour chaque objet du tableau. Cette carte sera contenue dans la variable rows, que nous retournerons sous forme d'expression.
JSX
const TableBody = (props) => {
  const rows = props.characterData.map((row, index) => {
    return (
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
      </tr>
    )
  })

  return <tbody>{rows}</tbody>
}

Si vous affichez le front-end de l'application, toutes les données se chargent maintenant.

Vous remarquerez que j'ai ajouté un index clé à chaque ligne de table. Vous devez toujours utiliser des clés lors de la création de listes dans React, car elles permettent d'identifier chaque élément de la liste. Nous verrons également comment cela est nécessaire dans un moment où nous voulons manipuler des éléments de liste.

Les accessoires sont un moyen efficace de transmettre des données existantes à un composant React, mais le composant ne peut pas modifier les accessoires - ils sont en lecture seule. Dans la section suivante, nous allons apprendre à utiliser state pour avoir un contrôle supplémentaire sur la gestion des données dans React.

State

À l'heure actuelle, nous stockons nos données des personnages dans un tableau dans une variable et les transmettons en tant qu'accessoires. C'est pas mal pour commencer, mais imaginez si nous voulions pouvoir supprimer un élément du tableau. Avec les accessoires, nous avons un flux de données à sens unique, mais avec state, nous pouvons mettre à jour les données privées à partir d'un composant.

Vous pouvez considérer state comme toute donnée qui devrait être enregistrée et modifiée sans nécessairement être ajoutée à une base de données - par exemple, ajouter et supprimer des articles d'un panier avant de confirmer votre achat.

Pour commencer, nous allons créer un objet state.
JSX
class App extends Component {
  state = {}
}

L'objet contiendra les propriétés de tout ce que vous souhaitez stocker dans state. Pour nous, c'est characters.
JSX
class App extends Component {
  state = {
    characters: [],
  }
}

Déplacer tout le tableau d'objets que nous avons créés précédemment dans state.characters.
JSX
class App extends Component {
  state = {
    characters: [
      {
        name: 'Charlie',
        // the rest of the data
      },
    ],
  }
}

Nos données sont officiellement contenues dans state. Puisque nous voulons pouvoir supprimer un personnage de la table, nous allons créer une méthode removeCharacter sur la table parente.

Pour récupérer state, nous utiliserons this.state.characters, la même méthode ES6 qu'avant. Pour mettre à jour state, nous utiliserons this.setState() une méthode intégrée pour manipuler state. Nous filtrerons le tableau en fonction d'un index que nous lui passons et retournerons le nouveau tableau.

Vous devez utiliser this.setState() pour modifier un tableau. Le fait d'appliquer une nouvelle valeur à this.state.property ne fonctionnera pas.
JSX
removeCharacter = (index) => {
  const {characters} = this.state

  this.setState({
    characters: characters.filter((character, i) => {
      return i !== index
    }),
  })
}

filter ne mute pas mais crée plutôt un nouveau tableau et constitue une méthode préférentielle pour modifier des tableaux en JavaScript. Cette méthode particulière teste un index par rapport à tous les index du tableau et renvoie tous sauf celui qui est passé.

Nous devons maintenant transmettre cette fonction au composant et afficher un bouton à côté de chaque caractère pouvant invoquer la fonction. Nous passerons la fonction removeCharacter comme accessoire à Table.
JSX
removeCharacter = (index) => {
  const {characters} = this.state

  this.setState({
    characters: characters.filter((character, i) => {
      return i !== index
    }),
  })
}

Puisque nous le transmettons de Table à TableBody, nous allons devoir le repasser en tant qu'accessoire, comme nous l'avons fait avec les données des personnages.

De plus, comme il s'avère que les seuls composants ayant leurs propres states dans notre projet sont App et Form, il serait préférable de transformer Table en un simple composant à partir du composant de classe qu'il est actuellement.
JSX
const Table = (props) => {
  const {characterData, removeCharacter} = props

  return (
    <table>
      <TableHeader />
      <TableBody characterData={characterData} removeCharacter={removeCharacter} />
    </table>
  )
}

C'est ici qu'intervient cet index que nous avons défini dans la méthode removeCharacter(). Dans le composant TableBody, nous transmettrons la clé/l'index en tant que paramètre, afin que la fonction de filtrage sache quel élément supprimer. Nous allons créer un bouton avec un onClick et le transmettre.
JSX
<tr key={index}>
  <td>{row.name}</td>
  <td>{row.job}</td>
  <td>
    <button onClick={() => props.removeCharacter(index)}>Delete</button>
  </td>
</tr>

La fonction onClick doit passer par une fonction qui renvoie la méthode removeCharacter(), sinon elle essaiera de s'exécuter automatiquement.
Impressionnant ! Nous avons maintenant des boutons de suppression et nous pouvons modifier notre state en supprimant un personnage.
Screen-Shot-2018-08-19-at-6.37.09-PM.png

J'ai supprimé le personnage Mac.
Vous devez maintenant comprendre comment State est initialisé et comment il peut être modifié.

Soumission des données de formulaire

Maintenant, nous avons des données stockées dans state, et nous pouvons supprimer n'importe quel élément de celui-ci. Cependant, que se passerait-il si nous voulions pouvoir lui ajouter de nouvelles données ? Dans une application du monde réel, il est plus probable que vous commenciez avec un state vide et que vous le remplissiez, par exemple avec une liste de tâches ou un panier.

Avant toute chose, supprimons toutes les données codées en dur dans state.characters, car nous allons les mettre à jour via un formulaire maintenant.
JSX
class App extends Component {
  state = {
    characters: [],
  }
}

Maintenant, allons-y et créons un composant Form dans un nouveau fichier appelé Form.js.

Nous allons définir l'état initial Form comme un objet avec des propriétés vides, et affecter cet état initial à this.state.
JSX
import React, {Component} from 'react'

class Form extends Component {
  initialState = {
    name: '',
    job: '',
  }

  state = this.initialState
}

Auparavant, il était nécessaire d'inclure un composant de class constructor() sur React, mais ce n'est plus nécessaire.
Notre objectif pour ce formulaire sera de mettre à jour l'état de Form chaque fois qu'un champ est modifié dans le formulaire, et lorsque nous les soumettrons, toutes ces données passeront à l' l'état App, qui mettra alors à jour la Table.

Tout d'abord, nous allons créer la fonction qui s'exécutera chaque fois qu'une modification est apportée à une entrée. Le event sera passé, et nous définirons l'état de Form pour avoir la name (key/clé) et la value des entrées.
JSX
handleChange = (event) => {
  const {name, value} = event.target

  this.setState({
    [name]: value,
  })
}

Mettons cela en marche avant de passer à la soumission du formulaire. Dans le rendu, récupérons nos deux propriétés à partir de l'état et affectons-les comme valeurs qui correspondent aux clés de formulaire appropriées. Nous exécuterons la méthode handleChange() en tant qu'onChange d'entrée, et enfin nous exporterons le composant Form.
JSX
render() {
  const { name, job } = this.state;

  return (
    <form>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        value={name}
        onChange={this.handleChange} />
      <label htmlFor="job">Job</label>
      <input
        type="text"
        name="job"
        id="job"
        value={job}
        onChange={this.handleChange} />
    </form>
  );
}

export default Form;

Dans App.js, nous pouvons rendre le formulaire sous le tableau.
JSX
import Form from './Form'
JSX
return (
  <div className="container">
    <Table characterData={characters} removeCharacter={this.removeCharacter} />
    <Form />
  </div>
)

Maintenant, si nous allons au front-end de notre application, nous verrons un formulaire qui n'a pas encore de soumission. Mettez à jour certains champs et vous verrez l'état local de Form mise à jour.
Screen-Shot-2018-08-19-at-7.55.56-PM.png

Cool ! La dernière étape consiste à nous permettre de soumettre réellement ces données et de mettre à jour l'état parent. Nous allons créer une fonction appelée handleSubmit() sur App qui mettra jour l'état en prenant l'existant this.state.characters et ajoutant le nouveau paramètre character, en utilisant l' opérateur de diffusion ES6 .
JSX
handleSubmit = (character) => {
  this.setState({characters: [...this.state.characters, character]})
}

Assurons-nous de transmettre cela en tant que paramètre sur Form.
HTML
<Form handleSubmit={this.handleSubmit} />

Maintenant dans Form nous allons créer une méthode appelée submitForm() qui appellera cette fonction et transmettra létat de Form en tant que paramètre de character défini précédemment. Il réinitialisera également l'état à l'état initial, pour effacer le formulaire après l'envoi.
JSX
submitForm = () => {
  this.props.handleSubmit(this.state)
  this.setState(this.initialState)
}

Enfin, nous ajouterons un bouton d'envoi pour soumettre le formulaire. Nous utilisons un onClick au lieu d'un onSubmit car nous n'utilisons pas la fonctionnalité d'envoi standard. Le clic appellera le que submitForm que nous venons de faire.
HTML
<input type="button" value="Submit" onClick={this.submitForm} />

Et c'est tout! L'application est terminée. Nous pouvons créer, ajouter et supprimer des utilisateurs de notre table. Puisque Table et TableBody étaient déjà extraites de l'état, elle s'affichera correctement.
Screen-Shot-2018-08-19-at-7.55.56-PM.png

Si vous vous êtes perdu n'importe où en cours de route, vous pouvez afficher la source complète sur GitHub .

Extraction des données API

Une utilisation très courante de React consiste à extraire des données d'une API. Si vous n'êtes pas familier avec ce qu'est une API ou comment vous connecter à une API, je vous recommande de lire Comment se connecter à une API avec JavaScript , qui vous expliquera ce que sont les API et comment les utiliser avec Vanilla JavaScript.

En guise de petit test, nous pouvons créer un nouveau fichier Api.js et en créer un nouveau App. Une API publique avec laquelle nous pouvons tester est l'API Wikipedia , et j'ai un point de terminaison URL ici pour une recherche aléatoire *. Vous pouvez accéder à ce lien pour voir l'API et vous assurer que JSONView est installé sur votre navigateur.

Nous allons utiliser à Fetch intégré JavaScript pour collecter les données de ce point de terminaison d'URL et les afficher. Vous pouvez basculer entre l'application que nous avons créée et ce fichier de test en modifiant simplement l'URL dans index.js - import App from './Api'; .

Je ne vais pas expliquer ce code ligne par ligne, comme nous l'avons déjà appris sur la création d'un composant, le rendu et le mappage via un tableau d'état. Le nouvel aspect de ce code est componentDidMount() une méthode de cycle de vie React. Le cycle de vie est l'ordre dans lequel les méthodes sont appelées dans React. Le montage fait référence à un élément inséré dans le DOM.

Lorsque nous extrayons des données API, nous voulons utiliser componentDidMount car nous voulons nous assurer que le composant a été rendu dans le DOM avant d'apporter les données. Dans l'extrait ci-dessous, vous verrez comment nous importons les données de l'API Wikipedia et les affichons sur la page.
JSX
import React, {Component} from 'react'

class App extends Component {
  state = {
    data: [],
  }

  // Code is invoked after the component is mounted/inserted into the DOM tree.
  componentDidMount() {
    const url =
      'https://en.wikipedia.org/w/api.php?action=opensearch&search=Seona+Dancing&format=json&origin=*'

    fetch(url)
      .then((result) => result.json())
      .then((result) => {
        this.setState({
          data: result,
        })
      })
  }

  render() {
    const {data} = this.state

    const result = data.map((entry, index) => {
      return <li key={index}>{entry}</li>
    })

    return <ul>{result}</ul>
  }
}

export default App

Une fois que vous avez enregistré et exécuté ce fichier sur le serveur local, vous verrez les données de l'API Wikipedia affichées dans le DOM.
Screen-Shot-2018-08-19-at-7.55.56-PM.png

Il existe d'autres méthodes de cycle de vie, mais les parcourir dépassera le cadre de cet article. Vous pouvez en savoir plus sur les composants React ici .

Créer et déployer une application React

Tout ce que nous avons fait jusqu'à présent a été dans un environnement de développement. Nous avons compilé, rechargé à chaud et mis à jour à la volée. Pour la production, nous allons vouloir que les fichiers statiques se chargent. Nous pouvons le faire en créant une version et en la déployant.

Maintenant, si vous voulez juste compiler tout le code React et le placer quelque part à la racine d'un répertoire, il vous suffit d'exécuter la ligne suivante:
Terminal
npm run build

Cela créera un dossier build qui contiendra votre application. Mettez le contenu de ce dossier n'importe où, et vous avez terminé !

Nous pouvons également aller plus loin et faire déployer npm pour nous. Nous allons créer des pages GitHub, vous devrez donc déjà vous familiariser avec Git et obtenir votre code sur GitHub.

Assurez-vous que vous avez quitté votre environnement React local afin que le code ne soit pas en cours d'exécution. Tout d'abord, nous allons ajouter un champ homepage au package.json avec l'URL sur laquelle nous voulons que notre application vive.
JSON
"homepage": "https://taniarascia.github.io/react-tutorial",

Nous ajouterons également ces deux lignes à la propriété scripts.
JSON
"scripts": {
  // ...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Dans votre projet, vous allez ajouter gh-pages aux devDependencies.
Terminal
npm install --save-dev gh-pages

Nous allons créer le build, qui aura tous les fichiers statiques compilés.
Terminal
npm run build

Enfin, nous allons déployer sur gh-pages.
Terminal
npm run deploy

Conclusion​

Cet article aurait dû vous donner une bonne introduction à React, aux composants simples et de classe, à l'état, aux accessoires, à l'utilisation des données de formulaire, à l'extraction de données à partir d'une API et au déploiement d'une application. Il y a beaucoup plus à apprendre et à faire avec React, mais j'espère que vous vous sentez confiant de plonger et de jouer avec React vous-même maintenant.


traduction by Jack
Auteur
Jack
Affichages
129
Publication
Mise à jour
Notation
5.00 étoiles(s) 1 note(s)

Évaluations récentes

Le tutoriel de Tania est une référence en la matière, il ne manquait plus qu'une traduction pour les "english-réticents"... Jack a produit une traduction fiable et précise, un must !
Haut