One place for hosting & domains

      Elements

      Comment créer des éléments React avec JSX


      L’auteur a choisi Creative Commons​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      Dans ce tutoriel, vous apprendrez à décrire des éléments avec JSX. JSX est une abstraction qui vous permet d’écrire une syntaxe de type HTML dans votre code JavaScript et vous permettra de construire des composants React qui ressemblent au balisage HTML standard.  JSX est le langage de référence de React, et constitue donc le fondement de tout balisage que React apportera à votre demande. 

      Comme JSX vous permet également d’écrire du JavaScript dans votre balisage, vous pourrez tirer parti des fonctions et des méthodes JavaScript, notamment le mappage des tables et l’évaluation des courts-circuits pour les conditionnels

      Dans le cadre du tutoriel, vous capturerez les événements de clic sur les boutons directement dans le balisage et repérerez les cas où la syntaxe ne correspond pas exactement au HTML standard, par exemple avec les classes CSS. À la fin de ce tutoriel, vous disposerez d’une application de travail qui utilise diverses fonctionnalités JSX pour afficher une liste d’éléments ayant un auditeur de clics intégré. Il s’agit d’un modèle courant dans les applications React que vous utiliserez souvent durant l’apprentissage du cadre. Vous pourrez également mélanger des éléments HTML standard avec du JavaScript pour voir comment React vous donne la possibilité de créer de petits morceaux de code réutilisables.

      Conditions préalables

      Étape 1 – Ajouert des balises à un élément de React

      Comme mentionné précédemment, React dispose d’un langage de balisage spécial appelé JSX. Il s’agit d’un mélange de syntaxe HTML et JavaScript qui ressemble à quelque chose comme ça :

      <div>
        {inventory.filter(item => item.available).map(item => (
          <Card>
              <div className="title"}>{item.name}</div>
              <div className="price">{item.price}</div>
          </Card>
          ))
        }
      </div>
      

      Vous reconnaîtrez certaines fonctionnalités de JavaScript telles que .filter et .mapainsi que du HTML standard comme <div>. Mais il y a d’autres parties qui ressemblent à la fois au HTML et au JavaScript, comme <Card> et className. 

      Il s’agit de JSX, le langage de balisage spécial qui donne aux composants de React la sensation du HTML avec la puissance du JavaScript.

      Dans cette étape, vous apprendrez à ajouter une syntaxe de base de type HTML à un élément React existant. Pour commencer, vous ajouterez des éléments HTML standard dans une fonction JavaScript, puis vous verrez le code compilé dans un navigateur. Vous regrouperez également les éléments afin que React puisse les compiler avec un minimum de balisage, laissant une sortie HTML propre.

      Pour commencer, faites un nouveau projet. Sur votre ligne de commande, exécutez le script suivant pour installer un nouveau projet en utilisant create-react-app :

      • npx create-react-app jsx-tutorial

      Une fois le projet terminé, passez dans le répertoire :

      Dans un nouvel onglet ou une nouvelle fenêtre du terminal, démarrez le projet en utilisant le script de démarrage de l’application Create React . Le navigateur se réactualise automatiquement en fonction des changements, alors laissez ce script fonctionner pendant toute la durée de votre travail :

      Vous obtiendrez un serveur local en fonctionnement. Si le projet ne s’est pas ouvert dans une fenêtre de navigateur, vous pouvez le trouver sur http://localhost:3000/. Si vous l’exécutez à partir d’un serveur distant, l’adresse sera http://your_IP_address:3000.

      Votre navigateur se chargera avec une application React incluse dans le cadre de Create React App.

      Modèle de projet React

      Vous allez créer un tout nouvel ensemble de composants personnalisés, vous devrez donc commencer par effacer du code passe-partout afin d’avoir un projet vide. Pour commencer,ouvrez App.js dans un éditeur de texte. C’est le composant root (racine) qui est injecté dans la page. Tous les composants partiront de là.

      Dans un nouveau terminal, déplacez-vous dans le dossier du projet et ouvrez src/App.js avec la commande suivante : 

      Vous verrez un fichier comme ceci :

      jsx-tutorial/src/App.js

      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      
      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>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      
      export default App;
      

      Maintenant, supprimez la ligne import logo from './logo.svg et tout ce qui suit la déclaration de retour dans la fonction. Modifiez-le pour retourner null. Le code final ressemblera à ceci :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return null;
      }
      
      export default App;
      

      Sauvegardez et quittez l’éditeur de texte.

      Enfin, supprimez le logo. Dans la fenêtre du terminal, tapez la commande suivante :

      Vous n’utiliserez pas ce fichier SVG dans votre application, et vous devez supprimer les fichiers inutilisés pendant que vous travaillez. Cela permettra de mieux organiser votre code sur le long terme.

      Maintenant que ces parties de votre projet ont été supprimées, vous pouvez passer à l’exploration des facettes de JSX. Ce langage de balisage est compilé par React et devient finalement le HTML que vous voyez sur une page web. Sans aller trop loin dans les internes, React prend le JSX et crée un modèle de ce à quoi ressemblera votre page, puis crée les éléments nécessaires et les ajoute à la page. 

      Cela signifie que vous pouvez écrire ce qui ressemble à du HTML et vous attendre à ce que le HTML rendu soit similaire. Cependant, il y a quelques pièges.

      Tout d’abord, si vous regardez l’onglet ou la fenêtre de votre serveur, vous verrez ceci :

      Output

      ... ./src/App.js Line 1:8: 'React' is defined but never used no-unused-vars ...

      C’est le linter qui vous dit que vous n’utilisez pas le code React importé. Lorsque vous ajoutez la ligne import React à partir de « react » à votre code, vous importez du code JavaScript qui convertit le code JSX en code React. S’il n’y a pas de JSX, l’importation n’est pas nécessaire.

      Changeons cela en ajoutant une petite quantité de JSX. Commencez par remplacer null avec l’exemple Hello, World : 

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return <h1>Hello, World</h1>;
      }
      
      export default App;
      

      Sauvegardez le fichier. Si vous regardez le terminal avec le serveur en marche, vous verrez que le message d’avertissement a disparu. Si vous consultez votre navigateur, vous verrez le message comme un h1 element. 

      écran de navigateur affichant « Hello, World ». 

      Ensuite, sous la balise <h1>, ajoutez une balise de paragraphe qui contient la chaîne J'écris JSX. Le code ressemblera à ceci :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <h1>Hello, World</h1>
          <p>I am writing JSX</p>
        )
      }
      
      export default App;
      

      Comme le JSX s’étend sur plusieurs lignes, vous devrez mettre l’expression entre parenthèses.

      Sauvegardez le fichier. Lorsque vous le ferez, vous verrez une erreur dans le terminal qui fait fonctionner votre serveur :

      Output

      ./src/App.js Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 5 | return( 6 | <h1>Hello, World</h1> > 7 | <p>I am writing JSX</p> | ^ 8 | ) 9 | } 10 |

      Lorsque vous renvoyez JSX à partir d’une fonction ou d’une déclaration, vous devez renvoyer un seul élément. Cet élément peut avoir des enfants nichés, mais il doit y avoir un seul élément de haut niveau. Dans ce cas, vous rendez deux éléments.

      Le correctif est un petit changement de code. Entourez le code d’une balise vide. Une balise vide est un élément HTML sans aucun mot. Il ressemble à ceci : <></>.

      Retournez à la page ./src/App.js dans votre éditeur et ajoutez la balise vide : 

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <>
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </>
        )
      }
      
      export default App;
      

      La balise vide crée un élément unique, mais lorsque le code est compilé, il n’est pas ajouté à la balise finale. Cela vous permettra de garder votre code propre tout en donnant à React un seul élément.

      Note : Vous auriez également pu envelopper le code avec un div au lieu de balises vides à condition que le code renvoie un élément. Dans cet exemple, une balise vide a l’avantage de ne pas ajouter de balisage supplémentaire à la sortie analysée.

      Enregistrez le code et quittez le fichier. Votre navigateur rafraîchit et affiche la page mise à jour avec l’élément de paragraphe. En outre, lorsque le code est converti, les balises vides sont supprimées :

      Navigateur affichant le balisage et devtools affichant le balisage sans les balises vides 

      Vous avez maintenant ajouté quelques JSX de base à votre composant et appris comment tous les JSX doivent être imbriqués dans un seul composant. Dans l’étape suivante, vous ajouterez un peu de style à votre composant.

      Étape 2 – Ajout de style à un élément avec attributs

      Dans cette étape, vous allez styliser les éléments de votre composant pour apprendre comment les attributs HTML fonctionnent avec JSX. Il existe de nombreuses options de style dans React. Certaines d’entre elles impliquent l’écriture de CSS en Javascript, d’autres utilisent des préprocesseurs. Dans ce tutoriel, vous travaillerez avec des classes CSS et CSS importées.

      Maintenant que vous avez votre code, il est temps d’ajouter un peu de style. Ouvrez App.css dans votre éditeur de texte :

      Comme vous commencez avec le nouveau JSX, le CSS actuel fait référence à des éléments qui n’existent plus. Comme vous n’avez pas besoin du CSS, vous pouvez le supprimer.

      Après avoir effacé le code, vous aurez un fichier vide.

      Ensuite, vous ajouterez un style pour centrer le texte. Dans src/App.css, ajoutez le code suivant :

      jsx-tutorial/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      

      Dans ce bloc de code, vous avez créé un sélecteur de classe CSS appelé .container et utilisé ça pour centrer le contenu en utilisant display : flex.

      Sauvegardez le fichier et quittez. Le navigateur sera mis à jour, mais rien ne changera. Pour pouvoir voir le changement, vous devez ajouter la classe CSS à votre composant React. Ouvrez le code JavaScript du composant :

      Le code CSS est déjà importé avec la ligne import './App.css'. Cela signifie que le webpack va tirer le code pour faire une feuille de style finale, mais pour appliquer le CSS à vos éléments, vous devez ajouter les classes. 

      Tout d’abord, dans votre éditeur de texte, changez les balises vides <> en <div>.

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div>
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Dans ce code, vous avez remplacé les balises vides –<>-avec les balises div. Les balises vides sont utiles pour regrouper votre code sans ajouter de balises supplémentaires, mais ici vous devez utiliser un div car les balises vides n’en acceptent aucuns attributs HTML.

      Ensuite, vous devez ajouter le nom de la classe. C’est là que JSX va commencer à s’écarter du HTML. Si vous vouliez ajouter une classe à un élément HTML habituel, vous le feriez comme ceci :

      <div class="container">
      

      Mais comme JSX est du JavaScript, il a quelques limites. L’une des limites est que JavaScript a réservé des mots-clés. Cela signifie que vous ne pouvez pas utiliser certains mots dans un code JavaScript. Par exemple, vous ne pouvez pas faire de variable appelée null parce que ce mot est déjà réservé.

      L’un des mots réservés est classe. Réagissez en contournant ce mot réservé en le modifiant légèrement. Au lieu d’ajouter l’attribut class, vous ajouterez l’attribut className. En règle générale, si un attribut ne fonctionne pas comme prévu, essayez d’ajouter la version en camel case. Un autre attribut qui est légèrement différent est l’attribut for que vous utiliseriez pour les étiquettes. Il y a quelques autres cas mais heureusement, la liste est assez courte. 

      Remarque : Dans React, les attributs sont souvent appelés des accessoires. Les accessoires sont des données que vous pouvez transmettre à d’autres composants personnalisés. Ils ont le même aspect que les attributs, sauf qu’ils ne correspondent à aucune spécification HTML. Dans ce tutoriel, nous les appellerons attributs, car ils sont principalement utilisés comme des attributs HTML standard. Cela permettra de les distinguer des accessoires qui ne se comportent pas comme des attributs HTML qui seront abordés plus loin dans cette série.

      Maintenant que vous savez comment l’attribut class est utilisé dans React, vous pouvez mettre à jour votre code pour inclure les styles. Dans votre éditeur de texte, ajoutez className="container" à votre étiquette de div d’ouverture : 

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div className="container">
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Sauvegardez le fichier. Lorsque vous le ferez, la page se rechargera et le contenu sera centré.

      Éléments html centrés dans un navigateur.

      L’attribut className est unique dans React. Vous pouvez ajouter la plupart des attributs HTML à JSX sans aucune modification. Par exemple, retournez à votre éditeur de texte et ajoutez un id de salutation à votre élément <h1>. Il ressemblera à du HTML standard :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div className="container">
            <h1 id="greeting">Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Sauvegardez la page et rechargez le navigateur. Ce sera le même.

      Jusqu’à présent, JSX ressemble à un balisage standard, mais l’avantage de JSX est que même s’il ressemble au HTML, il a la puissance du JavaScript. Cela signifie que vous pouvez attribuer des variables et les référencer dans vos attributs. Pour référencer un attribut, enveloppez-le avec des accolades –{}– au lieu de guillemets.

      Dans votre éditeur de texte, ajoutez les lignes surlignées suivantes pour faire référence à un attribut :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
           <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Dans ce code, vous avez créé une variable au-dessus de l’instruction de return appelée greeting avec la valeur de « greeting », puis référencé la variable dans l’attribut id de votre balise <h1>.

      Enregistrez et quittez le fichier. La page sera la même, mais avec une balise id.

      Page avec la balise id mise en évidence dans les outils de développement 

      Jusqu’à présent, vous avez travaillé avec quelques éléments seuls, mais vous pouvez aussi utiliser JSX pour ajouter de nombreux éléments HTML et les imbriquer pour créer des pages complexes.

      Pour le démontrer, vous ferez une page avec une liste d’emojis. Ces emoji seront enveloppés d’un élément <button>. Lorsque vous cliquez sur les émojis, vous obtenez leur nom abrégé CLDR.

      Pour commencer, vous devrez ajouter quelques éléments supplémentaires à la page. Ouvrez src/App.js dans votre éditeur de texte. Gardez-le ouvert tout au long de cette étape.

      Tout d’abord, ajoutez une liste d’emojis en ajoutant les lignes surlignées suivantes :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                  <button>
                    <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                  </button>
              </li>
              <li>
                <button>
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                <button>
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Ici vous avez créé une balise <ul> pour contenir une liste d’emojis. Chaque emoji se trouve dans un élément séparé <li> et est entouré d’un élément <button>. À l’étape suivante, vous ajouterez un événement à ce bouton.

      Vous avez également entouré l’emoji avec une balise <span> qui possède quelques autres attributs. Chaque span possède l’attribut de rôle fixé au rôle img. Cela signalera au logiciel d’accessibilité que l’élément agit comme une image. En outre, chaque <span> a également une étiquette aria-label et un id avec le nom de l’emoji. L’étiquette aria-label indiquera aux visiteurs munis de lecteurs d’écran ce qui est affiché. Vous utiliserez l’id lors de la rédaction des événements de l’étape suivante.

      Lorsque vous écrivez un code de cette manière, vous utilisez des éléments sémantiques ce qui permettra de garder la page accessible et facile à analyser pour les lecteurs d’écran. 

      Enregistrez et quittez le fichier. Votre navigateur va se rafraîchir et vous verrez ceci :

      navigateur avec emojis comme liste

      Maintenant, ajoutez un peu de style. Ouvrez le code CSS dans votre éditeur de texte :

      Ajoutez le code surligné suivant pour supprimer l’arrière-plan et la bordure par défaut des boutons tout en augmentant la taille de la police :

      jsx-tutorial/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      button {
          font-size: 2em;
          border: 0;
          padding: 0;
          background: none;
          cursor: pointer;
      }
      
      ul {
          display: flex;
          padding: 0;
      }
      
      li {
          margin: 0 20px;
          list-style: none;
          padding: 0;
      }
      

      Dans ce code, vous avez utilisé la taille de la police, la bordure et d’autres paramètres permettant d’ajuster l’apparence de vos boutons et de modifier la police. Vous avez également supprimé les styles de liste et ajouté display : flex à l’élément <ul> pour le rendre horizontal.

      Enregistrez et fermez le fichier CSS. Votre navigateur va se rafraîchir et vous verrez ceci :

      liste avec les styles par défaut supprimés 

      Vous avez maintenant travaillé avec plusieurs éléments JSX qui ressemblent à du HTML normal. Vous avez ajouté des classes, des ids et des balises aria, et vous avez travaillé avec des données sous forme de chaînes et de variables. Mais React utilise également des attributs pour définir comment vos éléments doivent répondre aux événements des utilisateurs. Dans l’étape suivante, vous commencerez à rendre la page interactive en ajoutant des événements au bouton.

      Étape 3 – Ajouter des événements aux éléments

      Dans cette étape, vous ajouterez des événements aux éléments en utilisant des attributs spéciaux et capturerez un événement de clic sur un élément de bouton. Vous apprendrez comment saisir les informations de l’événement pour envoyer une autre action ou utiliser d’autres informations dans le cadre du dossier.

      Maintenant que vous disposez d’une page d’information de base, il est temps d’y ajouter quelques événements. Il existe de nombreux gestionnaires d’événements que vous pouvez ajouter aux éléments HTML. React vous donne accès à tous ces éléments. Comme votre code JavaScript est couplé à votre balisage, vous pouvez rapidement ajouter les événements tout en gardant votre code bien organisé.

      Pour commencer, ajoutez le gestionnaire d’événements onclick. Cela vous permet d’ajouter un peu de code JavaScript directement à votre élément plutôt que d’attacher un auditeur de l’événement :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                <button
                  onClick={event => alert(event.target.id)}
                >
                  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                </button>
              </li>
              <li>
                <button
                  onClick={event => alert(event.target.id)}
                >
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                  <button
                    onClick={event => alert(event.target.id)}
                  >
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Comme il s’agit de JSX, vous avez mis onclick en camel case, ce qui signifie que vous l’avez ajouté en tant que onClick. Cet attribut onClick utilise une fonction d’anonymat pour récupérer des informations sur l’élément cliqué. 

      Vous avez ajouté une fonction de flèche anonyme qui obtiendra l’événement à partir du bouton cliqué, et l’événement aura une cible qui est l’élément <span>. Les informations dont vous avez besoin se trouvent dans l’attribut id auquel vous pouvez accéder avec event.target.id. Vous pouvez déclencher l’alerte avec la fonction alert().

      Sauvegardez le fichier. Dans votre navigateur, cliquez sur l’un des emojis et vous obtiendrez une alerte avec le nom.

      Alerte pour le party popper 

      Vous pouvez réduire une duplication en déclarant la fonction une fois et en la passant à chaque action onClick. Comme la fonction ne repose sur rien d’autre que des entrées et des sorties, vous pouvez la déclarer en dehors de la fonction du composant principal. En d’autres termes, la fonction n’a pas besoin d’accéder au champ d’application du composant. L’avantage de les garder séparés est que la fonction de votre composant est légèrement plus courte et que vous pouvez déplacer la fonction dans un fichier séparé plus tard si vous le souhaitez.

      Dans votre éditeur de texte, créez une fonction appelée displayEmojiName qui prend l’événement et appelle la fonction alert() avec un identifiant. Ensuite, passez la fonction à chaque attribut onClick : 

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                <button
                  onClick={displayEmojiName}
                >
                  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                </button>
              </li>
              <li>
                <button
                  onClick={displayEmojiName}
                >
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                  <button
                    onClick={displayEmojiName}
                  >
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Sauvegardez le fichier. Dans votre navigateur, cliquez sur un émoji et vous verrez la même alerte.

      Dans cette étape, vous avez ajouté des événements à chaque élément. Vous avez également vu comment JSX utilise des noms légèrement différents pour les événements des éléments, et vous avez commencé à écrire du code réutilisable en prenant la fonction et en la réutilisant sur plusieurs éléments. Dans l’étape suivante, vous allez écrire une fonction réutilisable qui renvoie des éléments JSX plutôt que d’écrire chaque élément à la main. Cela permettra de réduire encore la duplication.

      Étape 4 – Recouper les données pour créer des éléments

      Dans cette étape, vous irez au-delà de l’utilisation de JSX comme simple balisage. Vous apprendrez à le combiner avec JavaScript pour créer un balisage dynamique qui réduit le code et améliore la lisibilité. Vous refaites votre code dans un tableau que vous passez en boucle pour créer des éléments HTML.

      JSX ne vous limite pas à une syntaxe de type HTML. Il vous donne également la possibilité d’utiliser JavaScript directement dans votre balisage. Vous avez déjà un peu essayé en passant des fonctions aux attributs. Vous avez également utilisé des variables pour réutiliser les données. Il est maintenant temps de créer JSX directement à partir des données, en utilisant le code JavaScript standard.

      Dans votre éditeur de texte, vous devrez créer un tableau des données emoji dans le fichier src/App.js. Réouvrez le dossier si vous l’avez fermé :

      Ajouter une table qui contiendra les objets qui ont l’émoji et portent le nom de l’émoji. Notez que les emojis doivent être entourés de guillemets. Créez cette table au-dessus de la fonction App :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      const emojis = [
        {
          emoji: "😀",
          name: "grinning face"
        },
        {
          emoji: "🎉",
          name: "party popper"
        },
        {
          emoji: "💃",
          name: "woman dancing"
        }
      ];
      
      function App() {
      ...
      }
      
      export default App;
      

      Maintenant que vous avez les données, vous pouvez les passer en boucle. Pour utiliser JavaScript dans JSX, vous devez l’entourer d’accolades : {}. C’est la même chose que lorsque vous avez ajouté des fonctions aux attributs.

      Pour créer les composants React, vous devez convertir les données en éléments JSX. Pour ce faire, vous allez cartographier les données et renvoyer un élément JSX. Il y a quelques éléments que vous devez garder à l’esprit lorsque vous écrivez le code.

      Tout d’abord, un groupe d’articles doit être entouré d’un conteneur <div>. Deuxièmement, chaque objet a besoin d’un bien spécial appelé key. La key, ou clé, doit être une donnée unique que React peut utiliser pour garder une trace des éléments, afin de savoir quand mettre à jour le composant. La clé sera retirée du HTML compilé, car elle est réservée à un usage interne. Chaque fois que vous travaillez avec des boucles, vous devez ajouter une simple chaîne comme clé.

      Voici un exemple simplifié qui fait correspondre une liste de noms à une liste contenant <div>: 

      ...
      const names = [
          "Atul Gawande",
          "Stan Sakai",
          "Barry Lopez"
      ];
      
      return(
          <div>
              {names.map(name => <div key={name}>{name}</div>)}
          </div>
      )
      ...
      

      Le HTML qui en résulte ressemblerait à ceci :

      ...
      <div>
          <div>Atul Gawande</div>
          <div>Stan Sakai</div>
          <div>Barry Lopez</div>
      </div>
      ...
      

      La conversion de la liste des emojis sera similaire. Le <ul> sera le conteneur. Vous allez cartographier les données et retourner un <li> avec une clé du nom court de l’emoji. Vous remplacerez les données codées en dur dans les champs <button> et <span> avec des informations provenant de la boucle. 

      Dans votre éditeur de texte, ajoutez ce qui suit :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      const emojis = [
        {
          emoji: '😀',
          name: "test grinning face"
        },
        {
          emoji: '🎉',
          name: "party popper"
        },
        {
          emoji: '💃',
          name: "woman dancing"
        }
      ];
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Dans le code, vous avez mis en correspondance sur la table d’emojis dans la balise <ul> et renvoyé un <li>. Dans chaque <li> vous avez utilisé le nom de l’emoji comme accessoire clé. Le bouton aura la même fonction que normalement. Dans l’élément <span>, remplacez l’étiquette aria-label et id par l’élément name. Le contenu de la balise <span> devrait être l’emoji. 

      Sauvegardez le fichier. Votre fenêtre se rafraîchira et vous verrez les données. Remarquez que la clé n’est pas présente dans le HTML généré.

      Navigateur avec outils de développement affichant le HTML mis à jour sans accessoires clés 

      La combinaison de JSX et de JavaScript standard vous donne de nombreux outils pour créer du contenu de manière dynamique, et vous pouvez utiliser n’importe quel JavaScript standard que vous souhaitez. Dans cette étape, vous avez remplacé le JSX codé en dur par une table et une boucle pour créer du HTML de façon dynamique. Dans l’étape suivante, vous afficherez les informations de manière conditionnelle en utilisant un court-circuit.

      Étape 5 – Présenter sous condition des éléments avec un court-circuit

      Dans cette étape, vous utiliserez le court-circuit pour afficher conditionnellement certains éléments HTML. Cela vous permettra de créer des composants qui peuvent masquer ou afficher du HTML en fonction d’informations supplémentaires, ce qui donnera à vos composants la souplesse nécessaire pour gérer plusieurs situations.

      Il y a des moments où vous aurez besoin d’un élément pour montrer des informations dans certains cas et pas dans d’autres. Par exemple, vous pouvez vouloir afficher un message d’alerte pour l’utilisateur seulement si certains cas sont vrais, ou vous pouvez vouloir afficher certaines informations de compte pour un administrateur que vous ne voudriez pas qu’un utilisateur normal voit.

      Pour ce faire, vous utiliserez un court-circuit. Cela signifie que vous utiliserez un conditionnel, et si la première partie est vraie, il renverra les informations dans la deuxième partie.

      Voici un exemple. Si vous vouliez afficher un bouton uniquement dans le case où l’utilisateur serait connecté, vous entoureriez l’élément avec des accolades et ajouteriez la condition précédente.

      {isLoggedIn && <button>Log Out</button>}
      

      Dans cet exemple, vous utilisez l’opérateur &&, qui renvoie la dernière valeur si tout est vrai. Sinon, il revient comme faux, ce qui indiquera à React de ne pas renvoyer de balisage supplémentaire. Si isLoggedIn est vrai, React affichera le bouton. Si isLoggedIn est faux, il n’affichera pas le bouton.

      Pour essayer, ajoutez les lignes surlignées suivantes :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      ...
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <ul>
      ...
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Dans votre éditeur de texte, vous avez créé une variable appelée displayAction avec une valeur assignée comme false (fausse). Vous avez ensuite entouré la balise <p> avec des accolades.  Au début des bretelles bouclées, vous avez ajouté displayAction && pour créer le conditionnel. 

      Enregistrez le fichier et vous verrez l’élément disparaître dans votre navigateur. Et surtout, il n’apparaîtra pas non plus dans le HTML généré. Ce n’est pas la même chose que de masquer un élément avec le CSS. Il n’existera pas du tout dans le balisage final.

      Navigateur avec outils de développement n'affichant aucun élément de paragraphe 

      Actuellement, la valeur de displayAction est codée en dur, mais vous pouvez également stocker cette valeur en tant qu’état ou la transmettre comme accessoire d’un composant parent. 

      Dans cette étape, vous avez appris à montrer des éléments de manière conditionnelle. Cela vous donne la possibilité de créer des composants qui sont personnalisables en fonction d’autres informations.

      Conclusion

      À ce stade, vous avez créé une application personnalisée avec JSX. Vous avez appris comment ajouter des éléments de type HTML à votre composant, ajouter du style à ces éléments, passer des attributs pour créer un balisage sémantique et accessible, et ajouter des événements aux composants. Vous avez ensuite mélangé JavaScript dans votre JSX pour réduire le code en double et afficher ou masquer les éléments de manière conditionnelle.

      C’est la base dont vous avez besoin pour fabriquer les futurs composants. En utilisant une combinaison de JavaScript et de HTML, vous pouvez construire des composants dynamiques qui sont flexibles et permettent à votre application de se développer et de changer.

      Si vous souhaitez en savoir plus sur React, consultez notre page thématique React.



      Source link

      How To Create React Elements with JSX


      The author selected Creative Commons to receive a donation as part of the Write for DOnations program.

      Introduction

      In this tutorial, you’ll learn how to describe elements with JSX. JSX is an abstraction that allows you to write HTML-like syntax in your JavaScript code and will enable you to build React components that look like standard HTML markup. JSX is the templating language of React elements, and is therefore the foundation for any markup that React will render into your application.

      Since JSX enables you to also write JavaScript in your markup, you’ll be able to take advantage of JavaScript functions and methods, including array mapping and short-circuit evaluation for conditionals.

      As part of the tutorial, you’ll capture click events on buttons directly in the markup and catch instances when the syntax does not match exactly to standard HTML, such as with CSS classes. At the end of this tutorial, you’ll have a working application that uses a variety of JSX features to display a list of elements that have a built-in click listener. This is a common pattern in React applications that you will use often in the course of learning the framework. You’ll also be able to mix standard HTML elements along with JavaScript to see how React gives you the ability to create small, reusable pieces of code.

      Prerequisites

      Step 1 — Adding Markup to a React Element

      As mentioned earlier, React has a special markup language called JSX. It is a mix of HTML and JavaScript syntax that looks something like this:

      <div>
        {inventory.filter(item => item.available).map(item => (
          <Card>
              <div className="title"}>{item.name}</div>
              <div className="price">{item.price}</div>
          </Card>
          ))
        }
      </div>
      

      You will recognize some JavaScript functionality such as .filter and .map, as well as some standard HTML like <div>. But there are other parts that look like both HTML and JavaScript, such as <Card> and className.

      This is JSX, the special markup language that gives React components the feel of HTML with the power of JavaScript.

      In this step, you’ll learn to add basic HTML-like syntax to an existing React element. To start, you’ll add standard HTML elements into a JavaScript function, then see the compiled code in a browser. You’ll also group elements so that React can compile them with minimal markup leaving clean HTML output.

      To start, make a new project. On your command line run the following script to install a fresh project using create-react-app:

      • npx create-react-app jsx-tutorial

      After the project is finished, change into the directory:

      In a new terminal tab or window, start the project using the Create React App start script. The browser will autorefresh on changes, so leave this script running the whole time that you work:

      You will get a running local server. If the project did not open in a browser window, you can find it at http://localhost:3000/. If you are running this from a remote server, the address will be http://your_IP_address:3000.

      Your browser will load with a React application included as part of Create React App.

      React template project

      You will be building a completely new set of custom components, so you’ll need to start by clearing out some boilerplate code so that you can have an empty project. To start open App.js in a text editor. This is the root component that is injected into the page. All components will start from here.

      In a new terminal, move into the project folder and open src/App.js with the following command:

      You will see a file like this:

      jsx-tutorial/src/App.js

      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      
      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>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      
      export default App;
      

      Now, delete the line import logo from './logo.svg and everything after the return statement in the function. Change it to return null. The final code will look like this:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return null;
      }
      
      export default App;
      

      Save and exit the text editor.

      Finally, delete the logo. In the terminal window type the following command:

      You won’t be using this SVG file in your application, and you should remove unused files as you work. It will better organize your code in the long run.

      Now that these parts of your project are removed, you can move on to exploring the facets of JSX. This markup language is compiled by React and eventually becomes the HTML you see on a web page. Without going too deeply into the internals, React takes the JSX and creates a model of what your page will look like, then creates the necessary elements and adds them to the page.

      What that means is that you can write what looks like HTML and expect that the rendered HTML will be similar. However, there are a few catches.

      First, if you look at the tab or window running your server, you’ll see this:

      Output

      ... ./src/App.js Line 1:8: 'React' is defined but never used no-unused-vars ...

      That’s the linter telling you that you aren’t using the imported React code. When you add the line import React from 'react' to your code, you are importing JavaScript code that converts the JSX to React code. If there’s no JSX, there’s no need for the import.

      Let’s change that by adding a small amount of JSX. Start by replacing null with a Hello, World example:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return <h1>Hello, World</h1>;
      }
      
      export default App;
      

      Save the file. If you look at the terminal with the server running, the warning message will be gone. If you visit your browser, you will see the message as an h1 element.

      browser screen showing "Hello, World"

      Next, below the <h1> tag, add a paragraph tag that contains the string I am writing JSX. The code will look like this:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <h1>Hello, World</h1>
          <p>I am writing JSX</p>
        )
      }
      
      export default App;
      

      Since the JSX spans multiple lines, you’ll need to wrap the expression in parentheses.

      Save the file. When you do you’ll see an error in the terminal running your server:

      Output

      ./src/App.js Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 5 | return( 6 | <h1>Hello, World</h1> > 7 | <p>I am writing JSX</p> | ^ 8 | ) 9 | } 10 |

      When you return JSX from a function or statement, you must return a single element. That element may have nested children, but there must be a single top-level element. In this case, you are returning two elements.

      The fix is a small code change. Surround the code with an empty tag. An empty tag is an HTML element without any words. It looks like this: <></>.

      Go back to ./src/App.js in your editor and add the empty tag:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <>
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </>
        )
      }
      
      export default App;
      

      The empty tag creates a single element, but when the code is compiled, it is not added to the final markup. This will keep your code clean while still giving React a single element.

      Note: You could have also wrapped the code with a div instead of empty tags, as long as the code returns one element. In this example, an empty tag has the advantage of not adding extra markup to the parsed output.

      Save the code and exit the file. Your browser will refresh and show the updated page with the paragraph element. In addition, when the code is converted the empty tags are stripped out:

      Browser showing markup and devtools showing markup without empty tags

      You’ve now added some basic JSX to your component and learned how all JSX needs to be nested in a single component. In the next step, you’ll add some styling to your component.

      Step 2 — Adding Styling to an Element with Attributes

      In this step, you’ll style the elements in your component to learn how HTML attributes work with JSX. There are many styling options in React. Some of them involve writing CSS in Javascript, others use preprocessors. In this tutorial you’ll work with imported CSS and CSS classes.

      Now that you have your code, it’s time to add some styling. Open App.css in your text editor:

      Since you are starting with new JSX, the current CSS refers to elements that no longer exist. Since you don’t need the CSS, you can delete it.

      After deleting the code, you’ll have an empty file.

      Next, you will add in some styling to center the text. In src/App.css, add the following code:

      jsx-tutorial/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      

      In this code block, you created a CSS class selector called .container and used that to center the content using display: flex.

      Save the file and exit. The browser will update, but nothing will change. Before you can see the change, you need to add the CSS class to your React component. Open the component JavaScript code:

      The CSS code is already imported with the line import './App.css'. That means that webpack will pull in the code to make a final style sheet, but to apply the CSS to your elements, you need to add the classes.

      First, in your text editor, change the empty tags, <>, to <div>.

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div>
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      In this code, you replaced the empty tags—<>—with div tags. Empty tags are useful for grouping your code without adding any extra tags, but here you need to use a div because empty tags do not accept any HTML attributes.

      Next, you need to add the class name. This is where JSX will start to diverge from HTML. If you wanted to add a class to a usual HTML element you would do it like this:

      <div class="container">
      

      But since JSX is JavaScript, it has a few limitations. One of the limitations is that JavaScript has reserved keywords. That means you can’t use certain words in any JavaScript code. For example, you can’t make a variable called null because that word is already reserved.

      One of the reserved words is class. React gets around this reserved word by changing it slightly. Instead of adding the attribute class, you will add the attribute className. As a rule, if an attribute is not working as expected, try adding the camel case version. Another attribute that is slightly different is the for attribute that you’d use for labels. There are a few other cases, but fortunately the list is fairly short.

      Note: In React, attributes are often called props. Props are pieces of data that you can pass to other custom components. They look the same as attributes except that they do not match any HTML specs. In this tutorial, we’ll call them attributes since they are mainly used like standard HTML attributes. This will distinguish them from props that do not behave like HTML attributes, which will be covered later in this series.

      Now that you know how the class attribute is used in React, you can update your code to include the styles. In your text editor, add className="container" to your opening div tag:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div className="container">
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Save the file. When you do, the page will reload and the content will be centered.

      Centered html elements in a browser.

      The className attribute is unique in React. You can add most HTML attributes to JSX without any change. As an example, go back to your text editor and add an id of greeting to your <h1> element. It will look like standard HTML:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div className="container">
            <h1 id="greeting">Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Save the page and reload the browser. It will be the same.

      So far, JSX looks like standard markup, but the advantage of JSX is that even though it looks like HTML, it has the power of JavaScript. That means you can assign variables and reference them in your attributes. To reference an attribute, wrap it with curly braces—{}—instead of quotes.

      In your text editor, add the following highlighted lines to reference an attribute:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
           <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      In this code, you created a variable above the return statement called greeting with the value of "greeting", then referenced the variable in the id attribute of your <h1> tag.

      Save and exit the file. The page will be the same, but with an id tag.

      Page with id tag highlighted in the developer tools

      So far you’ve worked with a few elements on their own, but you can also use JSX to add many HTML elements and nest them to create complex pages.

      To demonstrate this, you’ll make a page with a list of emoji. These emoji will be wrapped with a <button> element. When you click on the emoji, you’ll get their CLDR Short Name.

      To start, you’ll need to add a few more elements to the page. Open src/App.js in your text editor. Keep it open during this step.

      First, add a list of emojis by adding the following highlighted lines:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                  <button>
                    <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                  </button>
              </li>
              <li>
                <button>
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                <button>
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Here you created a <ul> tag to hold a list of emojis. Each emoji is in a separate <li> element and is surrounded with a <button> element. In the next step you’ll add an event to this button.

      You also surrounded the emoji with a <span> tag that has a few more attributes. Each span has the role attribute set to the img role. This will signal to accessibility software that the element is acting like an image. In addition, each <span> also has an aria-label and an id attribute with the name of the emoji. The aria-label will tell visitors with screen readers what is displayed. You will use the id when writing events in the next step.

      When you write code this way, you are using semantic elements, which will help keep the page accessible and easy to parse for screen readers.

      Save and exit the file. Your browser will refresh and you will see this:

      browser with emoji as a list

      Now add a little styling. Open the CSS code in your text editor:

      Add the following highlighted code to remove the default background and border for the buttons while increasing the font size:

      jsx-tutorial/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      button {
          font-size: 2em;
          border: 0;
          padding: 0;
          background: none;
          cursor: pointer;
      }
      
      ul {
          display: flex;
          padding: 0;
      }
      
      li {
          margin: 0 20px;
          list-style: none;
          padding: 0;
      }
      

      In this code, you used font-size, border, and other parameters to adjust the look of your buttons and change the font. You also removed the list styles and added display: flex to the <ul> element to make it horizontal.

      Save and close the CSS file. Your browser will refresh and you will see this:

      list with default styles removed

      You’ve now worked with several JSX elements that look like regular HTML. You’ve added classes, ids, and aria tags, and have worked with data as strings and variables. But React also uses attributes to define how your elements should respond to user events. In the next step, you’ll start to make the page interactive by adding events to the button.

      Step 3 — Adding Events to Elements

      In this step, you’ll add events to elements using special attributes and capture a click event on a button element. You’ll learn how to capture information from the event to dispatch another action or use other information in the scope of the file.

      Now that you have a basic page with information, it’s time to add a few events to it. There are many event handlers that you can add to HTML elements. React gives you access to all of these. Since your JavaScript code is coupled with your markup, you can quickly add the events while keeping your code well-organized.

      To start, add the onclick event handler. This lets you add some JavaScript code directly to your element rather than attaching an event listener:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                <button
                  onClick={event => alert(event.target.id)}
                >
                  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                </button>
              </li>
              <li>
                <button
                  onClick={event => alert(event.target.id)}
                >
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                  <button
                    onClick={event => alert(event.target.id)}
                  >
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Since this is JSX, you camelCased onclick, which means you added it as onClick. This onClick attribute uses an anonymous function to retrieve information about the item that was clicked.

      You added an anonymous arrow function that will get the event from the clicked button, and the event will have a target that is the <span> element. The information you need is in the id attribute, which you can access with event.target.id. You can trigger the alert with the alert() function.

      Save the file. In your browser, click on one of the emoji and you will get an alert with the name.

      Alert for party popper

      You can reduce a duplication by declaring the function once and passing it to each onClick action. Since the function does not rely on anything other than inputs and outputs, you can declare it outside the main component function. In other words, the function does not need to access the scope of the component. The advantage to keeping them separate is that your component function is slightly shorter and you could move the function out to a separate file later if you wanted to.

      In your text editor, create a function called displayEmojiName that takes the event and calls the alert() function with an id. Then pass the function to each onClick attribute:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                <button
                  onClick={displayEmojiName}
                >
                  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                </button>
              </li>
              <li>
                <button
                  onClick={displayEmojiName}
                >
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                  <button
                    onClick={displayEmojiName}
                  >
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Save the file. In your browser, click on an emoji and you will see the same alert.

      In this step, you added events to each element. You also saw how JSX uses slightly different names for element events, and you started writing reusable code by taking the function and reusing it on several elements. In the next step, you will write a reusable function that returns JSX elements rather than writing each element by hand. This will further reduce duplication.

      Step 4 — Mapping Over Data to Create Elements

      In this step, you’ll move beyond using JSX as simple markup. You’ll learn to combine it with JavaScript to create dynamic markup that reduces code and improves readability. You’ll refactor your code into an array that you will loop over to create HTML elements.

      JSX doesn’t limit you to an HTML-like syntax. It also gives you the ability to use JavaScript directly in your markup. You tried this a little already by passing functions to attributes. You also used variables to reuse data. Now it’s time to create JSX directly from data using standard JavaScript code.

      In your text editor, you will need to create an array of the emoji data in the src/App.js file. Reopen the file if you have closed it:

      Add an array that will contain objects that have the emoji and the emoji name. Note that emojis need to be surrounded by quote marks. Create this array above the App function:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      const emojis = [
        {
          emoji: "😀",
          name: "grinning face"
        },
        {
          emoji: "🎉",
          name: "party popper"
        },
        {
          emoji: "💃",
          name: "woman dancing"
        }
      ];
      
      function App() {
      ...
      }
      
      export default App;
      

      Now that you have the data you can loop over it. To use JavaScript inside of JSX, you need to surround it with curly braces: {}. This is the same as when you added functions to attributes.

      To create React components, you’ll need to convert the data to JSX elements. To do this, you’ll map over the data and return a JSX element. There are a few things you’ll need to keep in mind as you write the code.

      First, a group of items needs to be surrounded by a container <div>. Second, every item needs a special property called key. The key needs to be a unique piece of data that React can use to keep track of the elements so it can know when to update the component. The key will be stripped out of the compiled HTML, since it is for internal purposes only. Whenever you are working with loops you will need to add a simple string as a key.

      Here’s a simplified example that maps a list of names into a containing <div>:

      ...
      const names = [
          "Atul Gawande",
          "Stan Sakai",
          "Barry Lopez"
      ];
      
      return(
          <div>
              {names.map(name => <div key={name}>{name}</div>)}
          </div>
      )
      ...
      

      The resulting HTML would look like this:

      ...
      <div>
          <div>Atul Gawande</div>
          <div>Stan Sakai</div>
          <div>Barry Lopez</div>
      </div>
      ...
      

      Converting the emoji list will be similar. The <ul> will be the container. You’ll map over data and return a <li> with a key of the emoji short name. You will replace the hard-coded data in the <button> and <span> tags with information from the loop.

      In your text editor, add the following:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      const emojis = [
        {
          emoji: '😀',
          name: "test grinning face"
        },
        {
          emoji: '🎉',
          name: "party popper"
        },
        {
          emoji: '💃',
          name: "woman dancing"
        }
      ];
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      In the code, you mapped over the emojis array in the <ul> tag and returned a <li>. In each <li> you used the emoji name as the key prop. The button will have the same function as normal. In the <span> element, replace the aria-label and id with the name. The content of the <span> tag should be the emoji.

      Save the file. Your window will refresh and you’ll see the data. Notice that the key is not present in the generated HTML.

      Browser with developer tools showing updated HTML without key props

      Combining JSX with standard JavaScript gives you a lot of tools to create content dynamically, and you can use any standard JavaScript you want. In this step, you replaced hard-coded JSX with an array and a loop to create HTML dynamically. In the next step, you’ll conditionally show information using short circuiting.

      Step 5 — Conditionally Showing Elements with Short Circuiting

      In this step, you’ll use short circuiting to conditionally show certain HTML elements. This will let you create components that can hide or show HTML based on additional information giving your components flexibility to handle multiple situations.

      There are times when you will need a component to show information in some cases and not others. For example, you may only want to show an alert message for the user if certain cases are true, or you may want to display some account information for an admin that you wouldn’t want a normal user to see.

      To do this you will use short circuting. This means that you will use a conditional, and if the first part is truthy, it will return the information in the second part.

      Here’s an example. If you wanted to show a button only if the user was logged in, you would surround the element with curly braces and add the condition before.

      {isLoggedIn && <button>Log Out</button>}
      

      In this example, you are using the && operator, which returns the last value if everything is truthy. Otherwise, it returns false, which will tell React to return no additional markup. If isLoggedIn is truthy, React will display the button. If isLoggedIn is falsy, it will not show the button.

      To try this out, add the following highlighted lines:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      ...
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <ul>
      ...
            </ul>
          </div>
        )
      }
      
      export default App;
      

      In your text editor, you created a variable called displayAction with a value of false. You then surrounded the <p> tag with curly braces. At the start of the curly braces, you added displayAction && to create the conditional.

      Save the file and you will see the element disappear in your browser. Crucially, it will also not appear in the generated HTML. This is not the same as hiding an element with CSS. It won’t exist at all in the final markup.

      Browser with developer tools showing no paragraph element

      Right now the value of displayAction is hard-coded, but you can also store that value as a state or pass it as a prop from a parent component.

      In this step, you learned how to conditionally show elements. This gives you the ability to create components that are customizable based on other information.

      Conclusion

      At this point, you’ve created a custom application with JSX. You’ve learned how to add HTML-like elements to your component, add styling to those elements, pass attributes to create semantic and accessible markup, and add events to the components. You then mixed JavaScript into your JSX to reduce duplicate code and to conditionally show and hide elements.

      This is the basis you need to make future components. Using a combination of JavaScript and HTML, you can build dynamic components that are flexible and allow your application to grow and change.

      If you’d like to learn more about React, check out our React topic page.



      Source link