One place for hosting & domains

      JSX

      Erstellen von React-Elementen mit JSX


      Der Autor hat Creative Commons dazu ausgewählt, im Rahmen des Programms Write for DOnations eine Spende zu erhalten.

      Einführung

      In diesem Tutorial lernen Sie, wie Sie Elemente mit JSX beschreiben. JSX ist eine Abstraktion, die es Ihnen erlaubt, eine HTML-ähnliche Syntax in Ihren JavaScript-Code zu schreiben und ermöglicht es Ihnen, React-Komponenten zu erstellen, die wie Standard-HTML-Markup aussehen. JSX ist die Vorlagensprache der React-Elemente und bildet daher die Grundlage für jedes Markup, das React in Ihrer Anwendung rendert.

      Da Sie mit JSX auch JavaScript in Ihr Markup schreiben können, können Sie die Vorteile von JavaScript-Funktionen und -Methoden nutzen, einschließlich Array-Mapping und Kurzschlussevaluierung für Bedingungen.

      Im Rahmen des Tutorials werden Sie Klick-Ereignisse auf Schaltflächen direkt im Markup erfassen und Instanzen abfangen, wenn die Syntax nicht exakt mit Standard-HTML übereinstimmt, wie zum Beispiel bei CSS-Klassen. Am Ende dieses Tutorials haben Sie eine funktionierende Anwendung, die eine Vielzahl von JSX-Funktionen verwendet, um eine Liste von Elementen anzuzeigen, die über einen integrierten Klick-Listener verfügen. Dies ist ein übliches Muster in React-Anwendungen, das Sie während des Erlernens des Frameworks häufig verwenden werden. Sie werden auch in der Lage sein, Standard-HTML-Elemente mit JavaScript zu mischen und dabei sehen, wie React Ihnen ermöglicht, kleine, wiederverwendbare Code-Stücke zu erstellen.

      Voraussetzungen

      Schritt 1 — Hinzufügen eines Markups zu einem React-Element

      Wie bereits erwähnt, verfügt React über eine spezielle Markup-Sprache namens JSX. Diese vermischt HTML- und JavaScript-Syntax und sieht in etwa so aus:

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

      Sie werden einige JavaScript-Funktionalität wie .filter und .map sowie Standard-HTML wie <div> erkennen. Es gibt aber auch andere Teile, die wie HTML und JavaScript aussehen, wie <Card> und className.

      Dabei handelt es sich um JSX, die spezielle Markup-Sprache, die React-Komponenten den Anschein von HTML mit der Leistungsfähigkeit von JavaScript verleiht.

      In diesem Schritt lernen Sie, grundlegende HTML-ähnliche Syntax zu einem bestehenden React-Element hinzuzufügen. Zu Beginn fügen Sie Standard-HTML-Elemente in eine JavaScript-Funktion ein und sehen dann den kompilierten Code in einem Browser. Außerdem gruppieren Sie Elemente, damit React diese mit minimalem Markup kompilieren kann und dadurch eine klare HTML-Ausgabe hinterlässt.

      Beginnen Sie mit der Erstellung eines neuen Projekts. Führen Sie auf Ihrer Befehlszeile das folgende Skript aus, um ein neues Projekt mit create-react-app zu installieren:

      • npx create-react-app jsx-tutorial

      Nachdem das Projekt erstellt ist, wechseln Sie in das Verzeichnis:

      Starten Sie das Projekt in einer neuen Terminal-Registerkarte oder einem -fenster mit dem Create React App start-Skript. Der Browser aktualisiert Änderungen automatisch; lassen Sie also dieses Skript während der gesamten Dauer Ihrer Arbeit laufen:

      Sie erhalten einen funktionierenden lokalen Server. Falls sich das Projekt nicht in einem Browserfenster geöffnet hat, finden Sie es unter http://localhost:3000/. Wenn Sie dies von einem Remote-Server aus ausführen, ist die Adresse http://your_IP_address:3000.

      Ihr Browser wird mit einer React-Anwendung geladen, die als Teil von Create React App enthalten ist.

      React-Vorlagenprojekt

      Sie werden ein vollständig neues Set von benutzerdefinierten Komponenten erstellen, sodass Sie zunächst etwas Standardcode löschen müssen, um ein leeres Projekt zu erhalten. Zuerst öffnen Sie App.js in einem Texteditor. Das ist die Stammkomponente, die in der Seite injiziert wird. Alle Komponenten beginnen von hier.

      Gehen Sie in einem neuen Terminal in den Projektordner und öffnen Sie src/App.js mit dem folgenden Befehl:

      Sie sehen eine Datei wie diese:

      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;
      

      Löschen Sie nun die Zeile import logo from './logo.svg sowie alles nach der return-Anweisung in der Funktion. Ändern Sie diese zu return null. Der endgültige Code sieht so aus:

      jsx-tutorial/src/App.js

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

      Speichern und schließen Sie den Texteditor.

      Abschließend löschen Sie das Logo. Geben Sie im Terminalfenster den folgenden Befehl ein:

      Sie werden diese SVG-Datei nicht in Ihrer Anwendung verwenden und Sie sollten unbenutzte Dateien entfernen, während Sie arbeiten. So wird Ihr Code langfristig besser organisiert.

      Nachdem diese Teile Ihres Projekts nun entfernt sind, können Sie die Facetten von JSX erkunden. Diese Markup-Sprache wird von React kompiliert und wird schließlich zu dem HTML, das Sie auf einer Webseite sehen. Ohne zu sehr in die Einzelheiten zu gehen, nimmt React die JSX und erstellt ein Modell Ihrer zukünftigen Seite sowie anschließend die erforderlichen Elemente, die dann in Ihre Seite eingefügt werden.

      Das bedeutet, dass Sie etwas schreiben können, das wie HTML aussieht, und erwarten können, dass das gerenderte HTML ähnlich sein wird. Es gibt jedoch einige Fallstricke.

      Wenn Sie sich zunächst die Registerkarte oder das Fenster ansehen, auf dem Ihr Server läuft, sehen Sie Folgendes:

      Output

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

      Das ist der Linter, der Ihnen sagt, dass Sie den importierten React-Code nicht verwenden. Wenn Sie die Zeile import React from 'react' in Ihren Code einfügen, importieren Sie JavaScript-Code, der die JSX in React-Code konvertiert. Wenn keine JSX vorhanden ist, ist das Importieren nicht erforderlich.

      Wir ändern dies, indem wir einen kleinen Teil JSX einfügen. Beginnen Sie, indem Sie null durch das Beispiel Hello, World ersetzen:

      jsx-tutorial/src/App.js

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

      Speichern Sie die Datei. Wenn Sie sich das Terminal mit dem laufenden Server ansehen, ist die Warnmeldung verschwunden. Wenn Sie Ihren Browser besuchen, sehen Sie die Nachricht als h1-Element.

      Bildschirmanzeige des Browsers mit „Hello, World“

      Fügen Sie als Nächstes unter dem Tag <h1> ein Absatz-Tag mit der Zeichenfolge I am writing JSX ein. Der Code sieht dann so aus:

      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;
      

      Da JSX mehrere Zeilen umfasst, müssen Sie den Ausdruck in Klammern setzten.

      Speichern Sie die Datei. Wenn Sie dies tun, sehen Sie einen Fehler in dem Terminal, auf dem Ihr Server läuft:

      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 |

      Wenn Sie JSX von einer Funktion oder Anweisung zurückgeben, müssen Sie ein einzelnes Element zurückgeben. Dieses Element kann verschachtelte Unterelemente haben, aber es muss ein einzelnes Element der obersten Ebene vorhanden sein. In diesem Fall geben Sie zwei Elemente zurück.

      Die Lösung ist eine kleine Codeänderung. Umgeben Sie den Code mit einem leeren Tag. Ein leeres Tag ist ein HTML-Element ohne Wörter. Es sieht so aus: <></>.

      Gehen Sie zu ./src/App.js in Ihrem Editor zurück und fügen Sie das leere Tag ein:

      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;
      

      Das leere Tag erstellt ein einzelnes Element, aber wenn der Code kompiliert wird, wird es nicht in das endgültige Markup eingefügt. Dadurch wird Ihr Code sauber gehalten und dennoch ein einzelnes Element an React gegeben.

      Anmerkung: Sie könnten den Code auch mit einem div anstatt eines leeren Tags umgeben, solange der Code ein Element zurückgibt. In diesem Beispiel hat ein leeres Tag den Vorteil, dass kein zusätzliches Markup in die gegliederte Ausgabe eingefügt wird.

      Speichern Sie den Code und schließen Sie die Datei. Ihr Browser aktualisiert sich und zeigt die aktualisierte Seite mit dem Absatz-Element an. Zusätzlich werden die leeren Tags bei der Konvertierung des Codes ausgelassen:

      Browser mit Anzeige des Markups und DevTools mit Anzeige des Markups ohne leere Tags

      Sie haben nun einige grundlegende JSX in Ihre Komponente eingefügt und gelernt, wie die gesamte JSX in einer einzelnen Komponente geschachtelt werden muss. Im nächsten Schritt geben Sie Ihre Komponente ein Styling.

      Schritt 2 — Hinzufügen eines Stylings zu einem Element mit Attributen

      In diesem Schritt stylen Sie die Elemente in Ihrer Komponente, um zu lernen, wie HTML-Attribute mit JSX arbeiten. Es gibt zahlreiche Styling-Optionen in React. Einige von ihnen erfordern das Schreiben von CSS in Javascript, andere verwenden Präprozessoren. In diesem Tutorial arbeiten Sie mit importierten CSS und CSS-Klassen.

      Sie haben nun Ihren Code und können diesem nun ein Styling hinzufügen. Öffnen Sie App.css in Ihrem Texteditor:

      Da Sie mit neuer JSX beginnen, bezieht sich das aktuelle CSS auf Elemente, die nicht mehr existieren. Da Sie kein CSS benötigen, können Sie es löschen.

      Nach der Löschung des Codes haben Sie eine leere Datei.

      Als Nächstes fügen Sie ein Styling hinzu, um den Text zu zentrieren. Fügen Sie den folgenden Code in src/App.css ein:

      jsx-tutorial/src/App.css

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

      In diesem Codeblock haben Sie einen CSS-Klassenselektor namens .container erstellt und dazu verwendet, den Inhalt mit display:flex zu zentrieren.

      Speichern Sie die Datei und schließen Sie sie. Der Browser wird aktualisiert, aber es wird sich nichts ändern. Bevor Sie die Änderung sehen können, müssen Sie die CSS-Klasse zu Ihrer React-Komponente hinzufügen. Öffnen Sie den JavaScript-Code der Komponente:

      Der CSS-Code wurde bereits mit der Zeile import './App.css' importiert. Das bedeutet, dass webpack den Code einzieht, um ein endgültiges Stylesheet zu erstellen, aber um das CSS auf Ihre Elemente anzuwenden, müssen Sie die Klassen hinzufügen.

      Ändern Sie zuerst in Ihrem Texteditor die leeren Tags, <>, in <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 diesem Code haben Sie die leeren Tags — <> — mit div-Tags ersetzt. Leere Tags sind nützlich, um Ihren Code zu gruppieren, ohne zusätzliche Tags einzufügen, aber hier müssen Sie ein div verwenden, da leere Tags keine HTML-Attribute akzeptieren.

      Als Nächstes müssen Sie den Klassennamen hinzufügen. Hier beginnt JSX, von HTML abzuweichen. Wenn Sie eine Klasse zu einem gängigen HTML-Element hinzufügen wollten, würden Sie das so tun:

      <div class="container">
      

      Da JSX jedoch JavaScript ist, hat es einige Beschränkungen. Eine der Beschränkungen besteht darin, dass JavaScript reservierte Schlüsselwörter hat. Das bedeutet, dass Sie bestimmte Wörter in keinem JavaScript-Code verwenden können. Sie können zum Beispiel keine Variable mit der Bezeichnung null erstellen, da dieses Wort bereits reserviert ist.

      Eines der reservierten Wörter ist class. React umgeht dieses reservierte Wort, indem es leicht geändert wird. Anstelle des Attributs class fügen Sie das Attribut className hinzu. Wenn ein Attribut nicht wie erwartet funktioniert, können Sie generell versuchen, die Version mit einer Binnenmajuskel hinzufügen. Ein weiteres Attribut, das leicht abweicht, ist das Attribut for, das Sie für Labels verwenden würden. Es gibt einige weitere Fälle, aber glücklicherweise ist die Liste ziemlich kurz.

      Anmerkung: In React werden Attribute oft props genannt. Props sind Datenstücke, die Sie an andere benutzerdefinierte Komponenten übergeben können. Sie sehen so aus wie Attribute, außer dass sie keinen HTML-Spezifikationen entsprechen. In diesem Tutorial nennen wir sie Attribute, da sie hauptsächlich wie Standard-HTML-Attribute verwendet werden. Das unterscheidet sie von den Props, die sich nicht wie HTML-Attribute verhalten, was später in dieser Serie behandelt wird.

      Nachdem Sie nun wissen, wie das Attribut class in React verwendet wird, können Sie Ihren Code aktualisieren, um das Styling einzubeziehen. Fügen Sie in Ihrem Texteditor className="container" in Ihr öffnendes div-Tag ein:

      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;
      

      Speichern Sie die Datei. Wenn Sie dies tun, wird die Seite neu geladen und der Inhalt wird zentriert.

      Zentrierte HTML-Elemente in einem Browser.

      Das Attribut className ist in React einzigartig. Sie können die meisten HTML-Attribute ohne Änderung in JSX einfügen. Gehen Sie als Beispiel zurück in Ihren Texteditor und fügen Sie Ihrem <h1>-Element eine id von greeting hinzu. Es wird aussehen wie 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;
      

      Speichern Sie die Seite und laden Sie den Browser neu. Sie wird gleich bleiben.

      Bis hierher sieht JSX wie Standard-Markup aus. Aber der Vorteil von JSX ist, dass es, obwohl es wie HTML aussieht, die Leistungsfähigkeit von JavaScript hat. Das bedeutet, dass Sie Variablen zuweisen und in Ihren Attributen referenzieren können. Um ein Attribut zu referenzieren, umschließen Sie es mit geschweiften Klammern — {} — anstelle von Anführungszeichen.

      Fügen Sie in Ihrem Texteditor die folgenden hervorgehobenen Zeilen ein, um ein Attribut zu referenzieren:

      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 diesem Code haben Sie eine Variable über der return-Anweisung namens greeting mit dem Wert von "greeting" erstellt und dann die Variable im Attribut id Ihres <h1>-Tags referenziert.

      Speichern und schließen Sie die Datei. Die Seite wird gleich sein, hat aber ein id-Tag.

      Seite mit hervorgehobenem id-Tag in den Entwickler-Tools

      Bisher haben Sie mit einigen wenigen Elementen einzeln gearbeitet, aber Sie können JSX auch verwenden, um viele HTML-Elemente zur Erstellung komplexer Seiten hinzuzufügen und zu verschachteln.

      Um dies zu demonstrieren, erstellen Sie eine Seite mit einer Liste von Emojis. Diese Emojis werden von einem <button>-Element umgeben. Wenn Sie auf das Emoji klicken, erhalten Sie dessen CLDR-Kurznamen.

      Zu Beginn müssen Sie einige weitere Elemente in die Seite einfügen. Öffnen Sie src/App.js in Ihrem Texteditor. Lassen Sie ihn während dieses Schritts geöffnet.

      Fügen Sie zunächst eine Liste von Emojis hinzu, indem Sie die folgenden hervorgehobenen Zeilen einfügen:

      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;
      

      Sie haben hier ein <ul>-Tag erstellt, um eine Liste von Emojis zu umfassen. Jedes Emoji ist in einem separaten <li>-Element und von einem <button>-Element umgeben. Im nächsten Schritt fügen Sie diesem Button ein Ereignis hinzu.

      Zudem haben Sie das Emoji mit einem <span>-Tag umgeben, das einige weitere Attribute hat. Jedes span hat das Attribut role, das auf die Rolle img gesetzt ist. Dadurch wird barrierefreier Software signalisiert, dass sich das Element wie ein Bild verhält. Außerdem verfügt jedes <span> auch über ein aria-label und ein id-Attribut mit dem Namen des Emojis. Das aria-label sagt Besuchern mit Bildschirmlesern, was angezeigt wird. Beim Schreiben von Ereignissen im nächsten Schritt verwenden Sie die id.

      Wenn Sie auf diese Weise Code schreiben, verwenden Sie semantische Elemente, die dazu beitragen, dass die Seite barrierefrei und verständlich für Bildschirmleser ist.

      Speichern und schließen Sie die Datei. Ihr Browser wird aktualisiert und Sie sehen Folgendes:

      Browser mit Emojis im Stil einer Liste

      Fügen Sie nun etwas Styling hinzu. Öffnen Sie den CSS-Code in Ihrem Texteditor:

      Fügen Sie den folgenden hervorgehobenen Code hinzu, um den Standard-Hintergrund und die Ränder der Buttons zu entfernen und um die Schriftgröße zu erhöhen:

      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 diesem Code haben Sie font-size, border und andere Parameter verwendet, um das Aussehen Ihrer Buttons anzupassen und die Schriftart zu ändern. Sie haben auch den Listenstil entfernt und display:flex in das <ul>-Element eingefügt, um eine horizontale Ausführung zu erhalten.

      Speichern und schließen Sie die CSS-Datei. Ihr Browser wird aktualisiert und Sie sehen Folgendes:

      Liste mit Standardstilen entfernt

      Sie haben nun mit mehreren JSX-Elementen gearbeitet, die wie reguläres HTML aussehen. Sie haben Klassen, IDs und aria-Tags eingefügt sowie mit Daten als Zeichenfolgen und Variablen gearbeitet. React verwendet aber auch Attribute, um zu definieren, wie Ihre Elemente auf Benutzerereignisse reagieren sollen. Im nächsten Schritt beginnen Sie, die Seite interaktiver zu machen, indem Sie dem Button Ereignisse hinzufügen.

      Schritt 3 — Hinzufügen von Ereignissen zu Elemente

      In diesem Schritt fügen Sie mit speziellen Attributen Ereignisse zu Elementen hinzu und erfassen ein Klick-Ereignis auf einem Button-Element. Sie lernen, wie Sie Informationen von dem Ereignis erfassen, um eine andere Aktion zu senden oder andere Informationen im Rahmen der Datei zu verwenden.

      Sie haben nun eine grundlegende Seite mit Informationen und können nun einige Ereignisse zu diesen hinzufügen. Es gibt zahlreiche Event-Handler, die Sie zu HTML-Elementen hinzufügen können. Mit React können Sie auf all diese zugreifen. Da Ihr JavaScript-Code mit Ihrem Markup gekoppelt ist, können Sie die Ereignisse schnell einfügen und gleichzeitig Ihren Code gut organisiert halten.

      Zunächst fügen Sie den Event Handler onclick hinzu. Dadurch können Sie einen JavaScript-Code direkt in Ihr Element einfügen, anstatt einen Event-Listener anzufügen:

      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;
      

      Da es sich um JSX handelt, haben Sie onclick mit einer Binnenmajuskel versehen, d. h. Sie haben es als onClick eingefügt. Das Attribut onClick verwendet eine anonyme Funktion, um Informationen über das Element abzurufen, das angeklickt wurde.

      Sie haben eine anonyme Pfeilfunktion hinzugefügt, die das Ereignis von dem angeklickten Button abruft. Das Ereignis wird als Ziel das <span>-Element haben. Die Information, die Sie benötigen, ist im id-Attribut, auf das Sie mit event.target.id zugreifen können. Sie können den Hinweis mit der Funktion alert() auslösen.

      Speichern Sie die Datei. Klicken Sie in Ihrem Browser auf ein Emoji und Sie erhalten einen Hinweis mit dem Namen.

      Hinweis für Party Popper

      Sie können Wiederholungen reduzieren, indem Sie die Funktion einmal deklarieren und sie an jede onClick-Aktion übergeben. Da die Funktion nur auf Ein- und Ausgaben angewiesen ist, können Sie sie außerhalb der Hauptkomponentenfunktion deklarieren. Mit anderen Worten, die Funktion muss nicht auf den Anwendungsbereich der Komponente zugreifen. Der Vorteil einer Auseinanderhaltung besteht darin, dass Ihre Komponentenfunktion etwas kürzer ist und Sie die Funktion später in eine separate Datei verschieben können, wenn Sie möchten.

      Erstellen Sie in Ihrem Texteditor eine Funktion namens displayEmojiName, die das Ereignis nimmt und die Funktion alert() mit einer ID aufruft. Dann übergeben Sie die Funktion an jedes onClick-Attribut:

      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;
      

      Speichern Sie die Datei. Klicken Sie in Ihrem Browser auf ein Emoji und Sie werden den gleichen Hinweis sehen.

      In diesem Schritt haben Sie jedem Element Ereignisse hinzugefügt. Sie haben auch gesehen, wie JSX leicht abweichende Namen für Elementereignisse verwendet und begonnen, wiederverwendbaren Code zu schreiben, indem Sie die Funktion genommen und in mehreren Elementen erneut verwendet haben. Im nächsten Schritt schreiben Sie eine wiederverwendbare Funktion, die JSX-Elemente ausgibt, anstatt jedes Element per Hand zu schreiben. Dadurch werden Wiederholungen noch weiter reduziert.

      Schritt 4 — Mapping von Daten zur Erstellung von Elementen

      In diesem Schritt gehen Sie über die Verwendung von JSX als einfaches Markup hinaus. Sie lernen, es mit JavaScript zu kombinieren, um dynamisches Markup zu erstellen, das Code reduziert und die Lesbarkeit verbessert. Sie gestalten Ihren Code in ein Array um, über das Sie eine Schleife ausführen, um HTML-Elemente zu erstellen.

      JSX beschränkt Sie nicht auf eine HTML-ähnliche Syntax. Es bietet Ihnen auch die Möglichkeit, JavaScript direkt in Ihrem Markup zu verwenden. Das haben Sie bereits ausprobiert, indem Sie Funktionen an Attribute übergeben haben. Sie haben auch Variablen zur Wiederverwendung von Daten verwendet. Nun können Sie JSX direkt aus Daten unter Verwendung von Standard-JavaScript-Code erstellen.

      Sie müssen in Ihrem Texteditor ein Array der Emoji-Daten in der Datei src/App.js erstellen. Öffnen Sie die Datei, falls Sie diese geschlossen haben:

      Fügen Sie ein Array ein, das Objekte enthält, die das Emoji und den Namen des Emojis beinhalten. Beachten Sie, dass Emojis von Anführungszeichen umgeben sein müssen. Erstellen Sie dieses Array über der App-Funktion:

      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;
      

      Nachdem Sie nun über die Daten verfügen, können Sie eine Schleife über diese ausführen. Um JavaScript innerhalb von JSX zu verwenden, müssen Sie es mit geschweiften Klammern umschließen: {}. Es ist das Gleiche wie bei den Funktionen, die Sie in Attribute eingefügt haben.

      Um React-Komponenten zu erstellen, müssen Sie die Daten in JSX-Elemente konvertieren. Dazu führen Sie ein Mapping der Daten aus und geben ein JSX-Element aus. Es gibt ein paar Dinge, die Sie beim Schreiben des Codes beachten müssen.

      Erstens muss eine Gruppe von Elementen von einem <div>-Container umgeben sein. Zweitens benötigt jedes Element eine spezielle Eigenschaft namens key – Schlüssel. Der key muss ein eindeutiges Datenstück sein. Mit diesem kann React die Elemente verfolgen und dadurch erfahren, wann die Komponente aktualisiert werden muss. Der Schlüssel wird aus dem kompilierten HTML ausgelassen, da er nur internen Zwecken dient. Wann immer Sie mit Schleifen arbeiten, müssen Sie eine einfache Zeichenfolge als Schlüssel einfügen.

      Hier ist ein vereinfachtes Beispiel, das eine Liste von Namen auf ein enthaltendes <div> abbildet:

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

      Das resultierende HTML würde so aussehen:

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

      Die Konvertierung der Emoji-Liste ist ähnlich. Das <ul> ist der Container. Sie führen ein Mapping von Daten aus und geben ein <li> mit einem Schlüssel des Kurznamens des Emojis aus. Sie ersetzen die hartcodierten Daten in den Tags <button> und <span> durch Informationen aus der Schleife.

      Fügen Sie Folgendes in Ihrem Texteditor ein:

      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;
      

      Im Code haben Sie über das emojis-Array im <ul>-Tag gemappt und ein <li> ausgegeben. In jedem <li> haben Sie den Namen des Emojis als key-Prop verwendet. Der Button wird die gleiche Funktion wie normalerweise haben. Ersetzen Sie im Element <span> das aria-label und id mit dem name. Der Inhalt des <span>-Tags sollte das Emoji sein.

      Speichern Sie die Datei. Ihr Fenster wird aktualisiert und Sie sehen die Daten. Beachten Sie, dass der Schlüssel nicht in dem generierten HTML vorhanden ist.

      Browser mit Entwickler-Tools, die das aktualisierte HTML ohne key-Props zeigen

      Das Kombinieren von JSX mit Standard JavaScript bietet Ihnen eine Menge Werkzeuge, um Inhalte dynamisch zu erstellen, und Sie können jedes gewünschte Standard-JavaScript verwenden. In diesem Schritt haben Sie hartkodiertes JSX durch ein Array und eine Schleife ersetzt, um HTML dynamisch zu erstellen. Im nächsten Schritt zeigen Sie Informationen bedingt an, indem Sie die Kurzschlussevaluierung anwenden.

      Schritt 5 — Bedingtes Anzeigen von Elementen mit Kurzschlussevaluierung

      In diesem Schritt verwenden Sie die Kurzschlussevaluierung, um bestimmte HTML-Elemente unter bestimmten Bedingungen anzuzeigen. Auf diese Weise können Sie Komponenten erstellen, die HTML auf der Grundlage zusätzlicher Informationen aus- oder einblenden können, wodurch Ihre Komponenten flexibel auf verschiedene Situationen reagieren können.

      In einigen Situationen kann es notwendig sein, dass eine Komponente Informationen in bestimmten Fällen anzeigt und in anderen nicht. Beispielsweise möchten Sie vielleicht nur dann eine Hinweismeldung für den Benutzer anzeigen, wenn bestimmte Fälle zutreffen, oder Sie möchten eventuell einige Account-Informationen für einen Admin anzeigen, die ein normaler Benutzer nicht sehen soll.

      Dazu verwenden Sie die Kurzschlussevaluierung. Das bedeutet, dass Sie eine Bedingung verwenden, und wenn der erste Teil zutrifft, werden die Informationen im zweiten Teil ausgegeben.

      Hier folgt ein Beispiel. Wenn Sie nur dann einen Button anzeigen wollen, wenn der Benutzer eingeloggt ist, umschließen Sie das Element mit geschweiften Klammern und fügen die Bedingung davor ein.

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

      In diesem Beispiel verwenden Sie den &&-Operator, der den letzten Wert ausgibt, wenn alles zutrifft. Andernfalls gibt es false aus, was React anweist, kein zusätzliches Markup auszugeben. Wenn isLoggedIn zutrifft ist, zeigt React den Button. Wenn isLoggedIn nicht zutrifft, wird der Button nicht angezeit.

      Fügen Sie zum Ausprobieren die folgenden hervorgehobenen Zeilen ein:

      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;
      

      Sie haben in Ihrem Texteditor eine Variable namens displayAction mit einem Wert von false erstellt. Dann haben Sie das <p>-Tag mit geschweiften Klammern umschlossen. Am Anfang der geschweiften Klammern haben Sie displayAction && eingefügt, um die Bedingung zu erstellen.

      Speichern Sie die Datei und Sie sehen, dass das Element in Ihrem Browser verschwindet. Wichtig ist auch, dass es auch nicht in dem generierten HTML erscheint. Dies ist nicht dasselbe wie das Ausblenden eines Elements mit CSS. Es wird im endgültigen Markup überhaupt nicht vorhanden sein.

      Browser mit Entwickler-Tools, die kein Paragrafenelement anzeigen

      Im Moment ist der Wert von displayAction hartkodiert, aber Sie können diesen Wert auch als einen State speichern oder als Prop aus einer übergeordneten Komponente übergeben.

      In diesem Schritt haben Sie gelernt, wie man bedingt Elemente anzeigt. Dadurch können Sie Komponenten erstellen, die auf der Grundlage anderer Informationen anpassbar sind.

      Zusammenfassung

      Bis hierher haben Sie eine benutzerdefinierte Anwendung mit JSX erstellt. Sie haben gelernt, wie man HTML-ähnliche Elemente in Ihre Komponente einfügt, diesen Elementen ein Styling gibt, Attribute übergibt, um semantisches und barrierefreies Markup zu erstellen, und Events in die Komponenten eingefügt. Dann haben Sie JavaScript in Ihr JSX gemischt, um Wiederholungen im Code zu verringern und um Elemente bedingt ein- und auszublenden.

      Das ist die Grundlage, die Sie benötigen, um zukünftige Komponenten zu erstellen. Mit einer Kombination aus JavaScript und HTML können Sie dynamische Komponenten erstellen, die flexibel sind und es Ihrer Anwendung ermöglichen, zu wachsen und sich zu verändern.

      Wenn Sie mehr über React erfahren möchten, besuchen Sie unsere Themenseite React.



      Source link

      Создание элементов React с помощью JSX


      Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.

      Введение

      В этом обучающем руководстве вы узнаете, как описать элементы с помощью JSX. JSX — это абстракция, которая позволяет использовать синтаксис HTML внутри вашего кода JavaScript и с помощью которой вы можете создавать компоненты React, которые выглядят как стандартная HTML-разметка. JSX — это язык шаблонов для элементов React, поэтому он служит основой для любой разметки, которую React будет отображать в вашем приложении.

      Поскольку JSX позволяет вам использовать JavaScript в вашей разметке, вы можете воспользоваться преимуществами функций и методов JavaScript, включая сопоставление массива и сокращенное вычисление для условных конструкций.

      В рамках этого руководства вы должны будете захватывать события нажатия кнопки мыши по кнопкам непосредственно в разметке и искать случаи, когда синтаксис не соответствует стандартному HTML, например в случае с классами CSS. В конце этого обучающего руководства у вас будет рабочее приложение, которое использует самые разные функции JSX для отображения списка элементов, который имеет встроенный обработчик нажатий кнопки мыши. Это обычная практика для приложений React, которую вы часто будете использовать при изучении фреймворка. Также вы можете смешивать стандартные HTML-элементы с JavaScript, чтобы посмотреть, как React предоставляет возможность создавать небольшие куски кода, пригодные для повторного использования.

      Предварительные требования

      Шаг 1 — Добавление разметки в элемент React

      Как упоминалось ранее, React поддерживает специальный язык разметки JSX. Он представляет собой смесь синтаксиса HTML и JavaScript, которая выглядит примерно следующим образом:

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

      Вы узнаете ряд функций JavaScript, таких как .filter и .map, а также ряд стандартных HTML-тегов, таких как <div>. Но есть другие элементы, которые выглядят как HTML и JavaScript, такие как <Card> и className.

      Это JSX, специальный язык разметки, который делает компоненты React похожими на HTML, но обеспечивает возможности JavaScript.

      На этом шаге вы узнаете, как добавить базовый синтаксис HTML в существующий элемент React. Для начала нам нужно добавить стандартные HTML-элементы в функцию JavaScript, а затем посмотреть скомпилированный код в браузере. Вам также придется группировать элементы, чтобы React смог скомпилировать их с минимальной разметкой, оставляя чистый HTML-вывод.

      Создайте новый проект. В командной строке запустите следующий скрипт для установки нового проекта с помощью create-react-app:

      • npx create-react-app jsx-tutorial

      После завершения создания проекта перейдите в его директорию:

      В новой вкладке или окне терминала запустите проект, используя скрипт start Create React App​​​. Браузер будет выполнять автообновление при изменениях, поэтому вы должны оставить этот скрипт работающим все время при работе:

      Вы получите запущенный локальный сервер. Если проект не был открыт в браузере, вы можете перейти на страницу http://localhost:3000/. Если вы запустили приложение на удаленном сервере, приложение можно открыть по адресу http://your_IP_address:3000.

      Ваш браузер будет загружать приложение React, добавленное в Create React App.

      Шаблон проекта React

      Вы должны будете создать абсолютно новый набор компонентов, поэтому вам нужно начать с удаления определенного шаблонного кода, чтобы получить пустой проект. Откройте App.js в текстовом редакторе. Это корневой компонент, который встраивается в страницу. Все компоненты будут запускаться отсюда.

      В новом окне терминала перейдите в папку проекта и откройте src/App.js с помощью следующей команды:

      Вы увидите следующий файл:

      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;
      

      Теперь удалите строку import logo from './logo.svg и все содержимое после оператора return в функции. Измените ее, чтобы функция возвращала null. Окончательный код будет выглядеть следующим образом:

      jsx-tutorial/src/App.js

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

      Сохраните изменения и закройте текстовый редактор.

      В заключение удалите логотип. В окне терминала введите следующую команду:

      Вы не будете использовать этот файл SVG в вашем приложении. Кроме того, вам нужно удалить неиспользуемые файлы, которые не пригодятся вам в работе. Это позволит более оптимально организовать ваш код в долгосрочной перспективе.

      Теперь, когда эти части вашего проекта удалены, вы можете перейти к изучению аспектов JSX. Этот язык разметки компилируется React и в результате становится HTML-кодом, который вы видите на странице. Если не слишком углубляться в детали, React принимает JSX и создает модель того, как ваша страница будет выглядеть, затем создает необходимые элементы и добавляет их на страницу.

      Это означает, что вы можете написать что-то, что выглядит как HTML, и ожидать, что созданный HTML будет выглядеть аналогичным образом. Однако существует несколько моментов, которые необходимо прояснить.

      Во-первых, если вы посмотрите на вкладку или окно, где запущен ваш сервер, то увидите следующее:

      Output

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

      Это инструмент статического анализа, который сообщает, что вы не используете импортированный код React. При добавлении строки import React from 'react'​​​​​ в ваш код, вы импортируете код JavaScript, который конвертирует JSX в код React. Если JSX отсутствует, то нет и необходимости в импорте.

      Давайте изменим это, добавив немного JSX. Начните с замены null на Hello, World:

      jsx-tutorial/src/App.js

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

      Сохраните файл. Если вы посмотрите в терминал, где запущен сервер, то увидите, что предупреждение исчезло. Если вы перейдете в браузер, то увидите сообщение в виде элемента h1.

      экран браузера с надписью "Hello, World"

      Далее под тегом <h1> добавьте тег параграфа, который содержит строку I am writing JSX. Код будет выглядеть следующим образом:

      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;
      

      Поскольку код JSX занимает несколько строк, вам нужно будет обернуть выражение в скобки.

      Сохраните файл. После этого вы увидите ошибку в терминале, где запущен ваш сервер:

      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 |

      Когда вы возвращаете JSX из функции или оператора, необходимо вернуть один элемент. Этот элемент может иметь вложенные дочерние элементы, но на верхнем уровне должен быть один элемент. В этом случае вы возвращаете два элемента.

      Чтобы устранить эту проблему, потребуется внести небольшие изменения в код. Оберните код в пустой тег. Пустой тег — это элемент HTML без каких-либо слов. Он выглядит следующим образом: <></>.

      Откройте ./src/App.js в редакторе и добавьте пустой тег:

      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;
      

      Пустой тег создает один элемент, но когда код компилируется, он не добавляется в итоговую разметку. Это позволит сохранить чистый код, но при этом предоставив React один элемент.

      Примечание. Вы также могли обернуть код в div вместо пустого тега, если код возвращает один элемент. В этом примере пустой тег имеет преимущество, так как он не добавляет дополнительную разметку в получаемый вывод.

      Сохраните код и закройте файл. Ваш браузер обновит и отобразит обновленную страницу с элементом в виде параграфа. Кроме того, когда код конвертируется, пустые теги отбрасываются:

      Браузер, демонстрирующий разметку и инструменты разработчика, показывающие разметку без пустых тегов

      Вы добавили базовый код JSX для вашего компонента и узнали, что нужно, чтобы включить JSX в отдельный компонент. На следующем шаге мы добавим несколько стилей в ваш компонент.

      Шаг 2 — Добавление стилей в элемент с помощью атрибутов

      На этом шаге вы начнете использование стилей для элементов в вашем компоненте, чтобы узнать, как HTML-атрибуты работают с JSX. В React есть много вариантов использования стилей. Некоторые из них подразумевают использование CSS в Javascript, а другие — предпроцессоров. В этом обучающем руководстве вы будете работать с импортируемыми CSS и классами CSS.

      Теперь, когда у вас есть ваш код, пришло время добавить несколько стилей. Откройте файл App.css в предпочитаемом текстовом редакторе:

      Поскольку вы начинаете с нового JSX, текущий CSS относится к элементам, которые больше не существуют. Поскольку вам не требуется CSS, вы можете удалить ненужный код.

      После удаления кода вы получите пустой файл.

      Далее вам нужно добавить несколько стилей для выравнивания текста по центру. В src/App.css добавьте следующий код:

      jsx-tutorial/src/App.css

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

      В этом блоке кода вы создали селектор класса CSS с именем .container и использовали его для выравнивания содержимого по центру с помощью display: flex.

      Сохраните файл и закройте его. Браузер обновит страницу, но изменений вы не увидите. Прежде чем вы сможете увидеть изменения, вам нужно добавить класс CSS в ваш компонент React. Откройте код компонента JavaScript:

      Код CSS уже импортирован с помощью строки import '. /App.css. Это означает, что webpack будет загружать код для получения окончательной таблицы стилей, но для применения CSS в ваших элементах вам нужно добавить классы.

      Во-первых, в текстовом редакторе замените пустые теги <> на <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;
      

      В этом коде вы заменили пустые теги <>​​​ на теги div. Пустые теги полезны для группировки кода без добавления дополнительных тегов, но здесь вам нужно использовать div, поскольку пустые теги не принимают HTML-атрибутов.

      Далее вам нужно добавить имя класса. Именно здесь JSX начинает отклоняться от HTML. Если вы хотите добавить класс в обычный элемент HTML, вы должны сделать это следующим способом:

      <div class="container">
      

      Но поскольку JSX — это JavaScript, он имеет ряд ограничений. Одно из ограничений состоит в наличии в JavaScript зарезервированных ключевых слов. Это означает, что вы не можете использовать определенные слова в любом коде JavaScript. Например, вы не можете создать переменную с именем null, поскольку это слово зарезервировано.

      Еще одно зарезервированное слово — это class. React обходит это ограничение, внося небольшие изменения в ключевые слова. Вместо добавления атрибута class вы будете использовать атрибут className. Как правило, если атрибут не работает ожидаемым образом, попробуйте добавить версию в «верблюжьем» стиле. Еще один атрибут, который несколько отличается, — это атрибут for, который вы будете использовать для меток. Есть несколько других случаев, но, к счастью, список довольно короткий.

      Примечание. В React атрибуты часто называют свойствами. Свойства — это элементы данных, которые вы можете передавать в другие пользовательские компоненты. Они выглядят как атрибуты, но не соответствуют ни одному из элементов HTML-разметки. В этом обучающем руководстве мы будем называть их атрибутами, поскольку они чаще всего используются как стандартные HTML-атрибуты. Это позволит отличать их от свойств, которые ведут себя отличным от HTML-атрибутов образом. Этот момент будет отражен в будущем в рамках этой серии обучающих материалов.

      Теперь, когда вы знаете, как используется атрибут class в React, вы можете обновить ваш код для добавления стилей. В текстовом редакторе добавьте className="container​​​" в открывающий тег div:

      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;
      

      Сохраните файл. После этого страница будет перезагружена, а содержимое будет выровнено по центру.

      Выровненные по центру элементы html в браузере.

      Атрибут className является уникальным для React. Вы можете добавить большинство атрибутов HTML в JSX без изменений. В качестве примера вернитесь в текстовый редактор и добавьте id greeting​​ в элемент <h1>. Он будет выглядеть как стандартный 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;
      

      Сохраните страницу и обновите окно браузера. Страница не изменится.

      Пока что JSX выглядит как стандартная разметка, но преимущество JSX состоит в том, что хотя он и выглядит как HTML, но имеет функционал JavaScript. Это означает, что вы можете назначать переменные и ссылаться на них в ваших атрибутах. Для использования атрибута оберните его в фигурные скобки — {} — вместо кавычек.

      В текстовом редакторе добавьте следующие выделенные строки, чтобы сослаться на атрибут:

      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;
      

      В этом коде вы создали переменную над оператором return с названием greeting и значением "greeting", а затем указали переменную в атрибуте id вашего тега <h1>.

      Сохраните и закройте файл. Страница будет выглядеть так же, но будет иметь тег id.

      Страница с тегом id, выделенным в инструментах для разработчиков

      До текущего момента вы работали с несколькими элементами отдельно, но вы можете также использовать JSX для добавления множества элементов HTML и внедрять их для создания сложных страниц.

      Чтобы продемонстрировать это, вы создадите страницу со списком эмодзи. Эти эмодзи будут обернуты в элемент <button>. При нажатии на эмодзи вы получите его краткое имя CLDR.

      Для начала вам нужно добавить несколько дополнительных элементов на страницу. Откройте файл src/App.js​​​ в предпочитаемом текстовом редакторе. Держите файл открытым в течение всего шага.

      Вначале добавьте список эмодзи, вставив следующие выделенные строки:

      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;
      

      Здесь вы создали тег <ul> для хранения списка эмодзи. Каждый эмодзи находится внутри отдельного элемента <li> и окружен элементом <button>. На следующем шаге вы должны будете добавить событие для этой кнопки.

      Вы также окружили эмодзи тегом <span>, который имеет несколько атрибутов. Каждый тег span имеет атрибут role, для которого указано значение img. Это будет служить сигналом для программного обеспечения о том, что элемент выступает в качестве изображения. Кроме того, каждый тег <span> имеет атрибуты aria-label и id с именем эмодзи. Атрибут aria-label будет сообщать посетителям, использующим экранный диктор, что отображается на экране. Вы будете использовать атрибут id при создании событий на следующем шаге.

      Когда вы будете писать код таким образом, вам придется использовать семантические элементы, которые помогут сделать страницу доступной и удобной для парсинга для экранного диктора.

      Сохраните и закройте файл. После обновления страницы в браузере вы увидите следующее:

      браузер со списком эмодзи

      Теперь добавим несколько стилей. Откройте CSS-код в вашем текстовом редакторе:

      Добавьте следующий выделенный код для удаления фона и границы по умолчанию для кнопок, а также увеличения размера шрифта:

      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;
      }
      

      В этом коде вы использовали font-size, border и прочие параметры для изменения внешнего вида ваших кнопок и шрифта. Вы также удалили стили списка и добавили display: flex в элемент <ul>, чтобы сделать список горизонтальным.

      Сохраните и закройте файл CSS. После обновления страницы в браузере вы увидите следующее:

      список с удаленными стилями по умолчанию

      Вы поработали с нескольким элементами JSX, которые выглядят как стандартный HTML. Вы добавили классы, идентификаторы и теги, а также использовали данные в качестве строк и переменных. Но React также использует атрибуты для определения того, как ваши элементы должны реагировать на пользовательские события. На следующем шаге мы начнем делать страницу интерактивной, добавляя события для кнопки.

      Шаг 3 — Добавление событий в элементы

      На этом шаге вы должны будете добавить события для элементов, используя особые атрибуты и захватывая события нажатия кнопки мыши на элементе кнопки. Вы узнаете, как получить информацию из этого события, чтобы вывести дополнительные действия, или использовать другую информацию внутри файла.

      Теперь, когда у вас есть базовая страница с информацией, пришло время добавить несколько событий для страницы. Существует множество обработчиков событий, которые вы можете добавить в элементы HTML. React предоставляет доступ ко всем этим возможностям. Поскольку ваш код JavaScript связан с вашей разметкой, вы можете быстро добавить события, сохраняя оптимальную организацию вашего кода.

      Для начала добавьте обработчик события onclick. Это позволяет вам добавить код JavaScript прямо в ваш элемент, вместо того чтобы подключать обработчика событий:

      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;
      

      Поскольку это JSX, вам нужно использовать onclick в «верблюжьем» стиле, что означает, что вы должны добавить его как onClick. Этот атрибут onClick использует анонимную функцию для получения информации об элементе, на который нажимает пользователь.

      Вы добавили анонимную стрелочную функцию, которая получит событие от нажатой кнопки, а событие будет иметь цель, которая представляет собой элемент <span>. Информация, которая вам нужна, содержится в атрибуте id, который вы можете получить с помощью event.target.id​​​. Вы можете запустить сигнал с помощью функции alert().

      Сохраните файл. В браузере нажмите одно из эмодзи, после чего вы получите сигнал с именем.

      Сигнал для party popper

      Вы можете уменьшить количество дублирующего кода, объявив функцию один раз и передавая ее в каждое действие onClick. Поскольку функция не зависит ни от чего, кроме вводимых данных и вывода, вы можете объявить ее за пределами основной функции компонента. Другими словами, функции не требуется доступа к области видимости компонента. Преимущество такого отделения состоит в том, что функция компонента несколько короче, и вы можете перенести функцию в отдельный файл позже, если захотите.

      В текстовом редакторе создайте функцию displayEmojiName, которая получает событие и вызывает функцию alert() с идентификатором. Затем передайте функцию каждому атрибуту 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;
      

      Сохраните файл. В браузере нажмите на эмодзи, после чего вы увидите тот же сигнал.

      На этом шаге вы добавили событие для каждого элемента. Вы также увидели, как JSX использует немного отличающиеся имена для событий элементов, а также начали писать многократно используемый код, принимая функцию и используя ее для нескольких элементов. На следующем шаге вы будете писать функцию для многократного использования, которая возвращает элементы JSX, вместо того, чтобы писать каждый элемент вручную. Это позволит дополнительно уменьшить количество дублирующего кода.

      Шаг 4 — Сопоставление данных для создания элементов

      На этом шаге мы перейдем к дальнейшему знакомству с использованием JSX в качестве простой разметки. Вы научитесь совмещать его с JavaScript для создания динамической разметки, которая позволяет сократить код и повысить удобочитаемость. Вы выполните рефакторинг кода в массив, по которому вы пройдетесь в цикле для создания HTML-элементов.

      JSX не ограничивается использованием синтаксиса в стиле HTML. Он позволяет также использовать JavaScript непосредственно в вашей разметке. Вы уже попробовали сделать это, передавая функции в атрибуты. Вы также использовали переменные для повторного использования данных. Теперь пришло время создать JSX прямо из данных, используя стандартный код JavaScript.

      В текстовом редакторе вам потребуется создать массив данных эмодзи в файле src/App.js. Откройте файл снова, если вы закрыли его:

      Добавьте массив, который будет содержать объекты, которые содержат эмодзи и имя эмодзи. Обратите внимание, что эмодзи должны быть окружены кавычками. Создайте этот массив над функцией 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;
      

      Теперь у вас есть данные, по которым вы можете пробегаться в цикле. Чтобы использовать JavaScript внутри JSX, вам нужно поместить его в круглые скобки: {}. Это аналогично тому, как вы добавляли функции для атрибутов.

      Для создания компонентов React вам нужно будет преобразовать данные в элементы JSX. Чтобы сделать это, вам нужно будет выполнить сопоставление данных и вернуть элемент JSX. Существует несколько проблем, которые вам нужно учитывать при написании кода.

      Во-первых, группа элементов должна быть окружена контейнером <div>. Во-вторых, каждый элемент нуждается в специальном свойстве key. key должен представлять собой уникальный набор данных, которые React сможет использовать для отслеживания элементов, что позволит ему узнать, когда нужно обновить компонент. Ключ будет отделен от скомпилированного HTML, поскольку он предназначен только для внутренних целей. Когда вы работаете с циклами, вам нужно будет добавить простую строку в качестве ключа.

      Здесь представлен упрощенный пример, который осуществляет сопоставление списка имен в <div>:

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

      Получаемый в результате HTML будет выглядеть следующим образом:

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

      Конвертация списка эмодзи будет выглядеть аналогичным образом. <ul> будет служить контейнером. Вы должны будете выполнить сопоставление данных и вернуть <li> с ключом короткого имени эмодзи. Вы будете использовать жестко заданные данные в тегах <button> и <span>​​ на информацию из цикла.

      В текстовом редакторе добавьте следующее:

      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;
      

      В коде вы выполнили сопоставление для массива эмодзи в теге <ul> и вернули <li>. В каждом элементе <li> вы использовали имя эмодзи в качестве свойства key. Кнопка будет иметь ту же функцию, что и обычно. В элементе <span> замените aria-label​​​ и id на name. Внутри тега <span>​​ должен быть эмодзи.

      Сохраните файл. После обновления окна браузера вы увидите данные. Обратите внимание, что ключ отсутствует в сгенерированном HTML.

      Браузер с инструментами разработчика, демонстрирующий обновленный HTML без свойств ключей

      Совмещение JSX со стандартным JavaScript позволяет использовать множество инструментов для создания динамического контента и может использовать любой стандартный код JavaScript, который захотите. На этом шаге вы заменили жестко заданный JSX на массив и цикл для динамического создания HTML. На следующем шаге мы будем при определенных условиях показывать информацию, используя сокращенное вычисление.

      Шаг 5 — Условное представление элементов с сокращенным вычислением

      На этом шаге мы будем использовать сокращенное вычисление для демонстрации определенных элементов HTML при определенных условиях. Это позволит вам создавать компоненты, которые смогут скрывать или показывать HTML на основе дополнительной информации, обеспечивающей гибкость для ваших компонентов при разных ситуациях.

      Существуют ситуации, когда компонент должен в определенных ситуациях отображать информацию, а в других — нет. Например, вы можете показать пользователю сообщение с сигналом при соблюдении одних условий, либо вы можете вывести информацию об учетной записи для администратора, которая не должна быть доступна обычному пользователю.

      Чтобы сделать это, вам нужно будет использовать сокращенное вычисление. Это означает, что вы будете использовать условные операторы, и если первая часть условия будет выполняться, оператор будет возвращать информацию во второй части.

      Ниже представлен пример. Если вы хотите показать кнопку только для пользователя, выполнившего вход, необходимо окружить элемент круглыми скобками и добавить перед ним условие.

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

      В этом примере вы используете оператор &&, который возвращает последнее значение, если все условия являются истинными. В ином случае он возвращает false, что служит для React сигналом о том, что возвращать дополнительную разметку не нужно. Если isLoggedIn​​​ имеет значение true, React будет отображать кнопку. Если isLoggedIn имеет значение false, кнопка не будет отображаться.

      Чтобы сделать это, добавьте следующие выделенные строки:

      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;
      

      В текстовом редакторе вы создали переменную с именем displayAction и значением false. Затем вы окружили тег <p> фигурными скобками. Перед фигурными скобками вы добавили displayAction && для создания условного оператора.

      Сохраните файл, после чего вы увидите, как элемент исчез в браузере. Что более важно, он не появляется в сгенерированном HTML. Это не то же самое, что сокрытие элемента в CSS. Он не существует вообще в итоговой разметке.

      Браузер с инструментами для разработчиков, демонстрирующий отсутствие элемента

      Теперь значение displayAction жестко задано, но вы можете хранить это значение в виде состояния или передавать его в качестве свойства из родительского компонента.

      На этом шаге вы научились отображать элементы при определенных условиях. Это дает возможность создавать компоненты, которые настраиваются в зависимости от другой информации.

      Заключение

      К данному моменту мы создали пользовательское приложение с помощью JSX. Вы узнали, как добавить в компонент элементы в стиле HTML, добавить стили для этих элементов, передавать атрибуты для создания семантической и доступной разметки, а также добавить события в компоненты. Затем вы научились совмещать JavaScript с JSX, чтобы сократить количество дублирующего кода и показывать или скрывать элементы в зависимости от условий.

      Это основа для создания будущих компонентов. Используя комбинацию JavaScript и HTML, вы можете создавать динамичные компоненты, которые обладают гибкостью и позволяют вашим приложениям расти и изменяться.

      Если вы хотите узнать больше о React, ознакомьтесь с нашей страницей, посвященной React.



      Source link

      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