Afficher des données dynamiques

Effectué 100 XP

Les composants vous permettent de décomposer une application en éléments logiques. Dans cette unité, nous allons explorer cette fonctionnalité en créant un composant pour le titre d’une recette. Nous allons créer des composants et les importer dans App. Nous allons également découvrir comment afficher des données de manière dynamique.

Afficher des données dynamiques

Pour afficher des données dynamiques à l’intérieur d’un composant, utilisez la syntaxe { }, parfois appelée handlebars. Ce style de syntaxe est relativement courant dans les outils de création de modèles HTML. Utilisez ces handlebars pour passer en mode JavaScript et exécuter à peu près tout code JavaScript valide.

Par exemple, pour afficher l’heure actuelle, vous pouvez utiliser le code suivant :

JavaScript

<div>{ Date.now() }</div>

Créer un composant RecipeTitle

Dans notre exemple, nous allons créer un composant pour le titre d’une recette. Nous allons utiliser une variable JavaScript pour le titre pour montrer comment React peut afficher des données dynamiques. Les unités futures vous montrent comment utiliser des données plus complexes.

1. Créez un nouveau fichier dans le dossier src. Nommez-le RecipeTitle.jsx.

2. Ajoutez le code suivant à RecipeTitle.jsx :

   jsx

   import React from 'react';
   
   function RecipeTitle() {
       const title = 'Mashed potatoes';
       return (
           <h2>{ title }</h2>
       )
   };
   export default RecipeTitle;
   

Explorer le code

Notez que nous créons une constante nommée title. Nous utilisons ensuite la syntaxe de handlebar { } pour indiquer à React que vous souhaitez afficher la valeur de title à l’intérieur de l’élément <h2>. Cette fonctionnalité de JSX nous permet de mélanger du JavaScript et du HTML.

Utiliser le composant RecipeTitle

Affichons RecipeTitle dans notre application en l’ajoutant à App.

1. Ouvrez src/App.jsx.

2. Sous la ligne qui indique import React from 'react'; (il devrait s’agir de la ligne 2), ajoutez le code suivant :

   JavaScript

   import RecipeTitle from './RecipeTitle'
   

3. Utilisez RecipeTitle comme élément HTML en ajoutant le code suivant sous la syntaxe qui indique <h1>Recipe Manager</h1> :

   jsx

   <RecipeTitle />
   

Explorer le code

Voici la totalité du contenu du fichier src/App.jsx :

jsx

import React from 'react';
import RecipeTitle from './RecipeTitle'

function App() {
    return (
        <article>
            <h1>Recipe Manager</h1>
            <RecipeTitle />
        </article>
    )
}

export default App;

Tout comme nous avons utilisé <App /> comme un élément HTML, nous pouvons utiliser RecipeTitle. Cet exemple illustre l’essence de la création d’applications React : vous créez et utilisez des composants pour générer votre application.

Afficher les résultats

Enregistrez tous les fichiers. Le navigateur doit automatiquement actualiser et afficher la page mise à jour. L’en-tête Mashed potatoes s’affiche en haut de la page.

---

Unité suivante: Ajouter un style

Précédent Suivant