Hoe React-elementen te maken met JSX

Introductie

In deze zelfstudie leert u hoe u elementen met JSX kunt beschrijven. JSX is een abstractie waarmee je HTML-achtige syntaxis in je JavaScript-code kunt schrijven en waarmee je React-componenten kunt bouwen die eruitzien als standaard HTML-opmaak. JSX is de sjabloontaal van React-elementen en vormt daarom de basis voor elke opmaak die React in uw applicatie zal weergeven.

Aangezien JSX u in staat stelt om ook JavaScript in uw opmaak te schrijven, kunt u profiteren van JavaScript-functies en -methoden, waaronder array-mapping en kortsluitevaluatie voor voorwaardelijke waarden.

Als onderdeel van de zelfstudie legt u klikgebeurtenissen op knoppen rechtstreeks vast in de opmaak- en opvanggevallen waarin de syntaxis niet exact overeenkomt met standaard HTML, zoals bij CSS-klassen. Aan het einde van deze zelfstudie hebt u een werkende toepassing die gebruikmaakt van verschillende JSX-functies om een lijst weer te geven met elementen met een ingebouwde kliklistener. Dit is een veelvoorkomend patroon in React-applicaties dat je vaak zult gebruiken tijdens het leren van het framework. Je kunt ook standaard HTML-elementen combineren met JavaScript om te zien hoe React je de mogelijkheid geeft om kleine, herbruikbare stukjes code te maken.

Voorwaarden

• Je hebt een ontwikkelomgeving nodig die draait Node.js; Deze zelfstudie is getest op Node.js versie 10.19.0 en NPM versie 6.13.4. Om dit op macOS of Ubuntu 18.04 te installeren, volgt u de stappen in Een Node.js lokale ontwikkelomgeving installeren en een lokale ontwikkelomgeving maken op macOS of het gedeelte Installeren met behulp van een PPA van Hoe Node.js te installeren op Ubuntu 18.04.

• Je moet apps kunnen maken met de Create React-app. Instructies voor het installeren van een applicatie met de Create React-app vindt u op Een React-project instellen met de Create React-app.

• Je hebt ook een basiskennis van JavaScript nodig, die je kunt vinden in Hoe te coderen in JavaScript, samen met een basiskennis van HTML en CSS. Een goede bron voor HTML en CSS is het Mozilla Developer Network.

Stap 1 - Markup toevoegen aan een React-element

Zoals eerder vermeld, heeft React een speciale opmaaktaal genaamd JSX. Het is een mix van HTML- en JavaScript-syntaxis die er ongeveer zo uitziet:

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

U zult enkele JavaScript-functionaliteit herkennen, zoals .filter en .map, evenals enkele standaard HTML zoals <div>. Maar er zijn andere onderdelen die eruitzien als zowel HTML als JavaScript, zoals <Card> en className.

Dit is JSX, de speciale opmaaktaal die React-componenten het gevoel van HTML geeft met de kracht van JavaScript.

In deze stap leer je hoe je eenvoudige HTML-achtige syntaxis toevoegt aan een bestaand React-element. Om te beginnen voegt u standaard HTML-elementen toe aan een JavaScript-functie en bekijkt u vervolgens de gecompileerde code in een browser. Je groepeert ook elementen zodat React ze kan compileren met minimale opmaak, waardoor er schone HTML-uitvoer overblijft.

Maak om te beginnen een nieuw project. Voer op uw opdrachtregel het volgende script uit om een nieuw project te installeren met behulp van create-react-app:

npx create-react-app jsx-tutorial

Nadat het project is voltooid, wijzigt u de map in de map:

cd jsx-tutorial

Start in een nieuw terminaltabblad of -venster het project met behulp van het startscript van de Create React App. De browser wordt automatisch vernieuwd bij wijzigingen, dus laat dit script de hele tijd dat u werkt actief zijn:

npm start

U krijgt een draaiende lokale server. Als het project niet in een browservenster is geopend, kunt u het vinden op http://localhost:3000/. Als u dit vanaf een externe server uitvoert, is het adres http:// your_IP_address:3000.

Uw browser wordt geladen met een React-applicatie die deel uitmaakt van de Create React-app.

Je gaat een compleet nieuwe set aangepaste componenten bouwen, dus je moet beginnen met het opruimen van wat standaardcode, zodat je een leeg project kunt hebben. Om te beginnen open App.js in een tekstverwerker. Dit is de hoofdcomponent die in de pagina wordt geïnjecteerd. Alle componenten beginnen vanaf hier.

Ga in een nieuwe terminal naar de projectmap en open src/App.js met het volgende commando:

nano src/App.js

U ziet een bestand als dit:

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;

Verwijder nu het logo voor het importeren van regels van './logo.svg en alles na de return-instructie in de functie. Wijzig het in null. De uiteindelijke code ziet er als volgt uit:

import React from 'react';
import './App.css';

function App() {
  return null;
}

export default App;

Sla op en sluit de tekstverwerker af.

Verwijder ten slotte het logo. Typ in het terminalvenster de volgende opdracht:

rm src/logo.svg

U gebruikt dit SVG-bestand niet in uw toepassing en u moet ongebruikte bestanden verwijderen terwijl u werkt. Het zal uw code op de lange termijn beter organiseren.

Nu deze onderdelen van uw project zijn verwijderd, kunt u verder gaan met het verkennen van de facetten van JSX. Deze opmaaktaal wordt gecompileerd door React en wordt uiteindelijk de HTML die je op een webpagina ziet. Zonder al te diep in te gaan op de interne aspecten, neemt React de JSX en maakt een model van hoe uw pagina eruit zal zien, maakt vervolgens de benodigde elementen en voegt deze toe aan de pagina.

Dat betekent dat u kunt schrijven wat op HTML lijkt en verwachten dat de weergegeven HTML vergelijkbaar zal zijn. Er zijn echter een paar addertjes onder het gras.

Als u eerst naar het tabblad of venster kijkt waarop uw server draait, ziet u dit:

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

Dat is de linter die je vertelt dat je de geïmporteerde React-code niet gebruikt. Wanneer je de regel import React van 'react' toevoegt aan je code, importeer je JavaScript-code die de JSX converteert naar React-code. Als er geen JSX is, is de import niet nodig.

Laten we daar verandering in brengen door een kleine hoeveelheid JSX toe te voegen. Begin met het vervangen van null door een voorbeeld van Hello, World:

import React from 'react';
import './App.css';

function App() {
  return <h1>Hello, World</h1>;
}

export default App;

Sla het bestand op. Als je naar de terminal kijkt terwijl de server draait, is het waarschuwingsbericht verdwenen. Als u uw browser bezoekt, ziet u het bericht als een h1-element.

Voeg vervolgens onder de tag <h1> een alineatag toe die de tekenreeks bevat die ik JSX schrijf. De code ziet er als volgt uit:

import React from 'react';
import './App.css';

function App() {
  return(
    <h1>Hello, World</h1>
    <p>I am writing JSX</p>
  )
}

export default App;

Aangezien de JSX meerdere regels beslaat, moet u de uitdrukking tussen haakjes plaatsen.

Sla het bestand op. Als je dat doet, zie je een foutmelding in de terminal waarop je server draait:

./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 |

Wanneer u JSX retourneert vanuit een functie of instructie, moet u één element retourneren. Dat element kan geneste kinderen hebben, maar er moet één element op het hoogste niveau zijn. In dit geval retourneert u twee elementen.

De oplossing is een kleine codewijziging. Omring de code met een lege tag. Een lege tag is een HTML-element zonder woorden. Het ziet er als volgt uit: <></>.

Ga terug naar ./src/App.js in je editor en voeg de lege tag toe:

import React from 'react';
import './App.css';

function App() {
  return(
    <>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </>
  )
}

export default App;

De lege tag maakt een enkel element, maar wanneer de code wordt gecompileerd, wordt deze niet toegevoegd aan de uiteindelijke opmaak. Dit houdt je code schoon terwijl React toch een enkel element krijgt.

Sla de code op en sluit het bestand af. Uw browser wordt vernieuwd en toont de bijgewerkte pagina met het alinea-element. Bovendien worden bij het converteren van de code de lege tags verwijderd:

Je hebt nu wat basis JSX aan je component toegevoegd en geleerd hoe alle JSX in één component genest moet worden. In de volgende stap voeg je wat styling toe aan je component.

Stap 2 - Styling toevoegen aan een element met attributen

In deze stap gaat u de elementen in uw component opmaken om te leren hoe HTML-attributen werken met JSX. Er zijn veel stylingopties in React. Sommigen van hen hebben betrekking op het schrijven van CSS in Javascript, andere gebruiken preprocessors. In deze tutorial ga je aan de slag met geïmporteerde CSS en CSS-klassen.

Nu je je code hebt, is het tijd om wat styling toe te voegen. Open App.css in je tekstverwerker:

nano src/App.css

Aangezien je met nieuwe JSX begint, verwijst de huidige CSS naar elementen die niet meer bestaan. Omdat je de CSS niet nodig hebt, kun je deze verwijderen.

Nadat je de code hebt verwijderd, heb je een leeg bestand.

Vervolgens voeg je wat styling toe om de tekst te centreren. Voeg in src/App.css de volgende code toe:

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

In dit codeblok hebt u een CSS-klasseselector gemaakt met de naam .container en die gebruikt om de inhoud te centreren met behulp van display: flex.

Sla het bestand op en sluit af. De browser wordt geüpdatet, maar er verandert niets. Voordat je de wijziging kunt zien, moet je de CSS-klasse toevoegen aan je React-component. Open de JavaScript-code van het onderdeel:

nano src/App.js

De CSS-code is al geïmporteerd met de regel import './App.css'. Dat betekent dat webpack de code zal binnenhalen om een definitieve stylesheet te maken, maar om de CSS op je elementen toe te passen, moet je de klassen toevoegen.

Verander eerst in je tekstverwerker de lege tags, <>, in <div>.

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 deze code hebt u de lege tags (<> vervangen door div-tags. Lege tags zijn handig om je code te groeperen zonder extra tags toe te voegen, maar hier moet je een div gebruiken omdat lege tags geen HTML-attributen accepteren.

Vervolgens moet u de naam van de klas toevoegen. Dit is waar JSX zal beginnen af te wijken van HTML. Als je een klasse aan een gewoon HTML-element wilt toevoegen, doe je dat als volgt:

<div class="container">

Maar aangezien JSX JavaScript is, heeft het een paar beperkingen. Een van de beperkingen is dat JavaScript gereserveerde trefwoorden heeft. Dat betekent dat je bepaalde woorden niet in JavaScript-code mag gebruiken. U kunt bijvoorbeeld geen variabele met de naam null maken omdat dat woord al is gereserveerd.

Een van de gereserveerde woorden is klasse. React omzeilt dit gereserveerde woord door het iets te veranderen. In plaats van de attribuutklasse toe te voegen, voegt u het attribuut className toe. Als een attribuut niet werkt zoals verwacht, probeer dan in de regel de versie van de camel case toe te voegen. Een ander kenmerk dat iets anders is, is het for-attribuut dat u voor labels zou gebruiken. Er zijn nog een paar andere gevallen, maar gelukkig is de lijst vrij kort.

Nu je weet hoe het class attribuut wordt gebruikt in React, kun je je code bijwerken om de stijlen op te nemen. Voeg in je tekstverwerker className="container" toe aan je opening div tag:

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;

Sla het bestand op. Wanneer u dat doet, wordt de pagina opnieuw geladen en wordt de inhoud gecentreerd.

Het kenmerk className is uniek in React. U kunt de meeste HTML-attributen zonder enige wijziging aan JSX toevoegen. Ga bijvoorbeeld terug naar je tekstverwerker en voeg een begroetings-ID toe aan je <h1>-element. Het ziet eruit als standaard HTML:

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;

Sla de pagina op en laad de browser opnieuw. Het zal hetzelfde zijn.

Tot nu toe ziet JSX eruit als standaardopmaak, maar het voordeel van JSX is dat het, hoewel het eruitziet als HTML, de kracht van JavaScript heeft. Dat betekent dat u variabelen kunt toewijzen en ernaar kunt verwijzen in uw attributen. Als u naar een kenmerk wilt verwijzen, plaatst u het tussen accolades ({}) in plaats van aanhalingstekens.

Voeg in uw tekstverwerker de volgende gemarkeerde regels toe om naar een kenmerk te verwijzen:

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 deze code hebt u een variabele gemaakt boven de retourinstructie met de naam begroeting met de waarde 'begroeting' en vervolgens verwezen naar de variabele in het id-kenmerk van uw <h1>-tag.

Sla het bestand op en sluit het af. De pagina is hetzelfde, maar met een id-tag.

Tot nu toe heb je met een paar elementen op zichzelf gewerkt, maar je kunt JSX ook gebruiken om veel HTML-elementen toe te voegen en ze te nesten om complexe pagina's te maken.

Om dit te demonstreren, maak je een pagina met een lijst met emoji. Deze emoji worden omhuld met een <knop> element. Als je op de emoji klikt, krijg je hun CLDR-korte naam.

Om te beginnen moet je nog een paar elementen aan de pagina toevoegen. Open src/App.js in je tekstverwerker. Houd het tijdens deze stap open.

nano src/App.js

Voeg eerst een lijst met emoji's toe door de volgende gemarkeerde regels toe te voegen:

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;

Hier heb je een <ul>-tag gemaakt om een lijst met emoji's te bevatten. Elke emoji zit in een apart <li> element en is omgeven door een <knop> element. In de volgende stap voeg je een evenement toe aan deze knop.

Je hebt de emoji ook omringd met een <span>-tag die nog een paar attributen heeft. Voor elke span is het rolkenmerk ingesteld op de img-rol. Dit geeft de toegankelijkheidssoftware het signaal dat het element zich gedraagt als een afbeelding. Daarnaast heeft elke <span> ook een aria-label en een id-attribuut met de naam van de emoji. Het aria-label vertelt bezoekers met schermlezers wat er wordt weergegeven. Je gaat de id gebruiken bij het schrijven van events in de volgende stap.

Wanneer u op deze manier code schrijft, gebruikt u semantische elementen, die helpen de pagina toegankelijk en gemakkelijk te parseren te houden voor schermlezers.

Sla het bestand op en sluit het af. Uw browser wordt vernieuwd en u ziet dit:

Voeg nu een beetje styling toe. Open de CSS-code in je tekstverwerker:

nano src/App.css

Voeg de volgende gemarkeerde code toe om de standaardachtergrond en rand voor de knoppen te verwijderen en tegelijkertijd de lettergrootte te vergroten:

.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 deze code hebt u de lettergrootte, de rand en andere parameters gebruikt om het uiterlijk van uw knoppen aan te passen en het lettertype te wijzigen. Je hebt ook de lijststijlen verwijderd en display: flex toegevoegd aan het element <ul> om het horizontaal te maken.

Sla het CSS-bestand op en sluit het. Uw browser wordt vernieuwd en u ziet dit:

Je hebt nu gewerkt met verschillende JSX-elementen die eruitzien als gewone HTML. U hebt klassen, id's en aria-tags toegevoegd en met gegevens gewerkt als tekenreeksen en variabelen. Maar React gebruikt ook attributen om te definiëren hoe je elementen moeten reageren op gebruikersgebeurtenissen. In de volgende stap begin je de pagina interactief te maken door evenementen aan de knop toe te voegen.

Stap 3 — Gebeurtenissen toevoegen aan elementen

In deze stap voegt u gebeurtenissen toe aan elementen met behulp van speciale kenmerken en legt u een klikgebeurtenis vast op een knopelement. U leert hoe u informatie van de gebeurtenis kunt vastleggen om een andere actie te verzenden of andere informatie in het bereik van het bestand kunt gebruiken.

Nu je een basispagina met informatie hebt, is het tijd om er een paar evenementen aan toe te voegen. Er zijn veel event handlers die je aan HTML-elementen kunt toevoegen. React geeft je toegang tot al deze dingen. Omdat uw JavaScript-code is gekoppeld aan uw opmaak, kunt u snel de gebeurtenissen toevoegen terwijl uw code overzichtelijk blijft.

Voeg om te beginnen de onclick-gebeurtenishandler toe. Hiermee kunt u wat JavaScript-code rechtstreeks aan uw element toevoegen in plaats van een gebeurtenislistener toe te voegen:

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;

Aangezien dit JSX is, heb je onclick gekameeld, wat betekent dat je het hebt toegevoegd als onClick. Dit onClick-attribuut maakt gebruik van een anonieme functie om informatie op te halen over het item waarop is geklikt.

U hebt een anonieme pijlfunctie toegevoegd die de gebeurtenis ophaalt van de aangeklikte knop, en de gebeurtenis heeft een doel dat het element <span> is. De informatie die u nodig heeft, staat in het id-attribuut, dat u met event.target.id kunt openen. U kunt de waarschuwing activeren met de functie alert().

Sla het bestand op. Klik in je browser op een van de emoji's en je krijgt een alert met de naam.

U kunt duplicatie verminderen door de functie één keer te declareren en door te geven aan elke onClick-actie. Aangezien de functie niet afhankelijk is van iets anders dan in- en uitgangen, kunt u deze buiten de functie van de hoofdcomponent declareren. Met andere woorden, de functie hoeft geen toegang te hebben tot het bereik van de component. Het voordeel van ze gescheiden houden is dat je componentfunctie iets korter is en dat je de functie later naar een apart bestand kunt verplaatsen als je dat wilt.

Maak in uw teksteditor een functie met de naam displayEmojiName die de gebeurtenis uitvoert en de functie alert() aanroept met een id. Geef vervolgens de functie door aan elk onClick-attribuut:

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;

Sla het bestand op. Klik in je browser op een emoji en je krijgt dezelfde melding te zien.

In deze stap heb je gebeurtenissen aan elk element toegevoegd. Je zag ook hoe JSX iets andere namen gebruikt voor elementgebeurtenissen, en je begon herbruikbare code te schrijven door de functie over te nemen en opnieuw te gebruiken op verschillende elementen. In de volgende stap schrijft u een herbruikbare functie die JSX-elementen retourneert in plaats van elk element met de hand te schrijven. Dit zal dubbel werk verder verminderen.

Stap 4 — Gegevens in kaart brengen om elementen te maken

In deze stap gaat u verder dan het gebruik van JSX als eenvoudige opmaak. Je leert het te combineren met JavaScript om dynamische opmaak te maken die code vermindert en de leesbaarheid verbetert. U herstructureert uw code in een array die u overheen loopt om HTML-elementen te maken.

JSX beperkt je niet tot een HTML-achtige syntaxis. Het geeft je ook de mogelijkheid om JavaScript rechtstreeks in je opmaak te gebruiken. Je hebt dit al een beetje geprobeerd door functies door te geven aan attributen. Je hebt ook variabelen gebruikt om gegevens te hergebruiken. Nu is het tijd om JSX rechtstreeks uit gegevens te maken met behulp van standaard JavaScript-code.

In je tekstverwerker moet je een array maken van de emoji-gegevens in het src/App.js-bestand. Open het bestand opnieuw als u het hebt gesloten:

nano src/App.js

Voeg een matrix toe die objecten bevat met de emoji en de emoji-naam. Houd er rekening mee dat emoji's tussen aanhalingstekens moeten staan. Maak deze array boven de App-functie:

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;

Nu je de gegevens hebt, kun je er overheen lussen. Om JavaScript binnen JSX te gebruiken, moet je het omringen met accolades: {}. Dit is hetzelfde als toen je functies aan attributen toevoegde.

Om React-componenten te maken, moet je de gegevens converteren naar JSX-elementen. Om dit te doen, brengt u de gegevens in kaart en retourneert u een JSX-element. Er zijn een paar dingen waar je rekening mee moet houden bij het schrijven van de code.

Eerst moet een groep items worden omgeven door een container <div>. Ten tweede heeft elk item een speciale eigenschap nodig die sleutel wordt genoemd. De sleutel moet een uniek stuk gegevens zijn dat React kan gebruiken om de elementen bij te houden, zodat het weet wanneer het onderdeel moet worden bijgewerkt. De sleutel wordt uit de gecompileerde HTML verwijderd, omdat deze alleen voor interne doeleinden is. Wanneer je met loops werkt, moet je een eenvoudige snaar als sleutel toevoegen.

Hier is een vereenvoudigd voorbeeld dat een lijst met namen toewijst aan een bevattende <div>:

...
const names = [
    "Atul Gawande",
    "Stan Sakai",
    "Barry Lopez"
];

return(
    <div>
        {names.map(name => <div key={name}>{name}</div>)}
    </div>
)
...

De resulterende HTML ziet er als volgt uit:

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

Het converteren van de emoji-lijst is vergelijkbaar. De <ul> zal de container zijn. Je brengt gegevens in kaart en retourneert een <li> met een sleutel van de korte emoji-naam. U vervangt de hardgecodeerde gegevens in de tags <knop> en <span> door informatie uit de lus.

Voeg in je tekstverwerker het volgende toe:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: '😀',
    name: "test grinning face"
  },
  {
    emoji: '🎉',
    name: "party popper"
  },
  {
    emoji: '💃',
    name: "woman dancing"
  }
];

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

In de code heb je de emoji-array in de tag <ul> toegewezen en een <li> geretourneerd. In elke <li> gebruikte je de emoji-naam als het belangrijkste rekwisiet. De knop heeft dezelfde functie als normaal. Vervang in het element <span> het aria-label en de id door de naam. De inhoud van de tag <span> moet de emoji zijn.

Sla het bestand op. Uw venster wordt vernieuwd en u ziet de gegevens. Merk op dat de sleutel niet aanwezig is in de gegenereerde HTML.

Door JSX te combineren met standaard JavaScript heb je veel tools om dynamisch inhoud te creëren, en je kunt elke standaard JavaScript gebruiken die je maar wilt. In deze stap hebt u de hardgecodeerde JSX vervangen door een array en een lus om dynamisch HTML te maken. In de volgende stap geeft u voorwaardelijk informatie weer met behulp van kortsluiting.

Stap 5 - Voorwaardelijk tonen van elementen met kortsluiting

In deze stap gebruikt u kortsluiting om bepaalde HTML-elementen voorwaardelijk weer te geven. Hiermee kunt u componenten maken die HTML kunnen verbergen of weergeven op basis van aanvullende informatie, waardoor uw componenten flexibel zijn om met meerdere situaties om te gaan.

Er zijn momenten waarop u in sommige gevallen een component nodig heeft om informatie weer te geven en in andere gevallen niet. U wilt bijvoorbeeld alleen een waarschuwingsbericht voor de gebruiker weergeven als bepaalde gevallen waar zijn, of u wilt bepaalde accountgegevens voor een beheerder weergeven waarvan u niet wilt dat een normale gebruiker ze ziet.

Om dit te doen, gebruikt u korte circuleren. Dit betekent dat u een voorwaardelijke taal gebruikt, en als het eerste deel waarheidsgetrouw is, wordt de informatie in het tweede deel geretourneerd.

Hier is een voorbeeld. Als u een knop alleen wilt tonen als de gebruiker is ingelogd, plaatst u het element eromheen met accolades en voegt u de voorwaarde eerder toe.

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

In dit voorbeeld gebruik je de operator &&, die de laatste waarde teruggeeft als alles waar is. Anders retourneert het false, wat React zal vertellen om geen extra opmaak te retourneren. Als isLoggedIn waarheidsgetrouw is, geeft React de knop weer. Als isLoggedIn is nep, zal het de knop niet tonen.

Om dit uit te proberen, voegt u de volgende gemarkeerde regels toe:

import React from 'react';
import './App.css';

...

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

export default App;

In uw teksteditor hebt u een variabele gemaakt met de naam displayAction met de waarde false. Vervolgens heb je de <p> tag omcirkeld met accolades. Aan het begin van de accolades heb je displayAction && toegevoegd om de voorwaardelijke te maken.

Sla het bestand op en je ziet het element verdwijnen in je browser. Cruciaal is dat het ook niet voorkomt in de gegenereerde HTML. Dit is niet hetzelfde als het verbergen van een element met CSS. Het zal helemaal niet bestaan in de uiteindelijke opmaak.

Op dit moment is de waarde van displayAction hard-coded, maar je kunt die waarde ook opslaan als een status of doorgeven als een prop van een bovenliggende component.

In deze stap hebt u geleerd hoe u elementen voorwaardelijk kunt weergeven. Dit geeft u de mogelijkheid om componenten te maken die aanpasbaar zijn op basis van andere informatie.

Conclusie

Op dit punt heb je een aangepaste applicatie gemaakt met JSX. U hebt geleerd hoe u HTML-achtige elementen aan uw component kunt toevoegen, styling aan die elementen kunt toevoegen, attributen kunt doorgeven om semantische en toegankelijke opmaak te maken en gebeurtenissen aan de componenten kunt toevoegen. Vervolgens heb je JavaScript in je JSX gemengd om dubbele code te verminderen en elementen voorwaardelijk te tonen en te verbergen.

Dit is de basis die je nodig hebt om toekomstige componenten te maken. Met een combinatie van JavaScript en HTML kunt u dynamische componenten bouwen die flexibel zijn en uw applicatie laten groeien en veranderen.

Als je meer wilt weten over React, kijk dan op onze React topic pagina.

De auteur selecteerde Creative Commons om een donatie te ontvangen als onderdeel van het Write for DOnations-programma.