ReactJS - Composants

Dans ce chapitre, nous allons apprendre à combiner des composants pour faciliter la maintenance de l'application. Cette approche permet de mettre à jour et de modifier vos composants sans affecter le reste de la page.

Exemple sans état

Notre premier composant dans l'exemple suivant est App. Ce composant est propriétaire deHeader et Content. Nous créonsHeader et Content séparément et en l'ajoutant simplement dans l'arborescence JSX dans notre Appcomposant. SeulementApp le composant doit être exporté.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

Pour pouvoir le rendre sur la page, nous devons l'importer dans main.js déposer et appeler reactDOM.render(). Nous l'avons déjà fait en définissant l'environnement.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

Le code ci-dessus générera le résultat suivant.

Exemple avec état

Dans cet exemple, nous allons définir l'état du composant propriétaire (App). leHeaderLe composant est simplement ajouté comme dans le dernier exemple car il n'a besoin d'aucun état. Au lieu de balise de contenu, nous créonstable et tbody éléments, où nous insérerons dynamiquement TableRow pour chaque objet du data tableau.

On peut voir que nous utilisons la syntaxe de flèche EcmaScript 2015 (=>) qui semble beaucoup plus propre que l'ancienne syntaxe JavaScript. Cela nous aidera à créer nos éléments avec moins de lignes de code. C'est particulièrement utile lorsque nous devons créer une liste avec de nombreux éléments.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

Note - Notez que nous utilisons key = {i} inside map()fonction. Cela aidera React à mettre à jour uniquement les éléments nécessaires au lieu de restituer la liste entière lorsque quelque chose change. C'est une énorme amélioration des performances pour un plus grand nombre d'éléments créés dynamiquement.