Merkintäkoodin kirjoittaminen JSX:llä

JSX on lisäsyntaksi JavaScriptille, jonka avulla voit kirjoittaa HTML:n tyylistä merkintäkoodia JavaScript tiedoston sisällä. Vaikka on muita tapoja kirjoittaa komponentteja, useimmat React kehittäjät pitävät JSX:n tiiviydestä ja iso osa koodipohjista käyttää sitä.

Tulet oppimaan

Miksi React sekoittaa merkintäkoodia ja renderöintilogiikkaa
Miten JSX poikeeaan HTML:stä
Miten dataa voidaan näyttää JSX:llä

JSX: Laitetaan merkintäkoodi JavaScriptiin

Verkkosivut on rakennettu HTML:n, CSS:n ja JavaScriptin varaan. Monien vuosien ajan web-kehittäjät pitivät sisällön HTML:ssä, suunnittelun CSS:ssä ja logiikan JavaScriptissä - usein erillisissä tiedostoissa! Sisältö merkittiin HTML:ään, kun taas sivun logiikka oli erikseen JavaScriptissä:

HTML-merkki, jossa on violetti tausta ja div, jossa on kaksi alatunnistetta: p ja form. — HTML

Kolme JavaScript-käsittelijää keltaisella taustalla: isLoggedIn, onClick ja onSubmit. — JavaScript

Mutta kun verkkosivuista tuli interaktiivisempia, logiikka enimmäkseen määräsi sisällön. JavaScript vastasi HTML:stä! Tästä syystä Reactissa renderointilogiikka ja merkintä asuvat yhdessä samassa paikassa - komponenteissa.

React komponentti, jossa on HTML- ja JavaScript koodia aiemmasta esimerkistä sekoitettuna. Funktion nimi on Sidebar, joka kutsuu isLoggedIn funktiota, korostettuna keltaisella. Sisennettynä ja violetilla korostettuna funktiossa on p tagi edellisestä esimerkistä ja Form tagi, joka viittaa komponenttiin seuraavassa kaaviossa. — `Sidebar.js` React komponentti

React komponentti, jossa on HTML- ja JavaScript koodia edellisistä esimerkeistä sekoitettuna. Funktion nimi on Form, joka sisältää kaksi tapahtumakäsittelijää, onClick ja onSubmit korostettuna keltaisella. Tapahtumakäsittelijöiden jälkeen on HTML korostettuna violetilla. HTML sisältää lomakkeen ja syöttöelementin sisennettynä, kullakin elementillä onClick propsi. — `Form.js` React komponentti

Pitämällä painikkeen renderointilogiikka ja merkintäkoodi yhdessä voidaan varmistua siitä, että ne pysyvät synkronoituina keskenään jokaisen muokkauksen yhteydessä. Toisiinsa liittymättömät yksityiskohdat, kuten painikkeen ja sivupalkin merkintäkoodi on erillään toisistaan, tehden molempien muuttamisesta yksinään turvallisempaa.

Jokainen React komponentti on JavaScript funktio, joka saattaa sisältää merkintäkoodia, jonka React renderöi selaimeen. React komponentit käyttävät syntaksilisäosaa nimeltään JSX edustamaan merkintäkieltä. JSX näyttää lähes samalta kuin HTML, mutta se on hieman tiukempaa ja voi näyttää dynaamista sisältöä. Parhain tapa ymmärtää tämä on kääntää vähän HTML koodia JSX:ksi.

Huomaa

JSX ja React ovat kaksi eri asiaa. Niitä usein käytetään yhdessä, mutta voit käyttää niitä itsenäisesti toisistaan. JSX on syntaksilisä, kun taas React on JavaScript kirjasto.

Muunnetaan HTML koodi JSX koodiksi

Oletataan, että sinulla on vähän (täysin validia) HTML:ää.

<h1>Hedy Lamarrin tehtävälista</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Keksi uusi liikennevalo
    <li>Harjoittele elokuvakohtausta
    <li>Paranna spektritekniikkaa
</ul>

Ja haluat laittaa sen komponenttiisi:

export default function TodoList() {
  return (
    // ???
  )
}

Jos kopioit ja liität sen sellaisenaan, se ei toimi:

Forkkaa

export default function TodoList() {
  return (
    // Tämä ei ihan toimi
    <h1>Hedy Lamarrin tehtävälista</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      class="photo"
    >
    <ul>
        <li>Keksi uusi liikennevalo
        <li>Harjoittele elokuvakohtausta
        <li>Paranna spektritekniikkaa
    </ul>

Tämä tapahtuu siksi, koska JSX on tiukempaa ja siinä on muutama sääntö enemmän kuin HTML:ssä. Jos luet virheviestin yllä, se ohjeistaa korjaamaan merkintäkoodin tai voit seurata ohjetta alla.

Huomaa

Usein Reactin virheviestit helpottavat löytämään ongelman sijainnin. Kannattaa lukaista ne, jos jäät jumiin!

JSX koodin säännöt

1. Palauta yksi juurielementti

Palauttaaksesi useita elementtejä komponentista, kääri ne yhden tagin sisään.

Esimerkiksi, voit käyttää <div>:

<div>
  <h1>Hedy Lamarrin tehtävälista</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

Jos et halua lisätä ylimääräistä <div> tagia merkintäkoodiisi, voit kirjotitaa <> ja </> sen sijaan:

<>
  <h1>Hedy Lamarrin tehtävälista</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

Tätä tyhjää tagia kutsutaan Fragmentiksi. Fragmenttien avulla voit ryhmittää asioita jättämättä jälkiä selaimen HTML puuhun.

Syväsukellus

Miksi useat JSX tagit täytyy kääriä

JSX näyttää samalta kuin HTML, mutta pellin alla se muunnetaan tavallisiksi JavaScript-olioiksi. Et voi palauttaa kahta oliota funktiosta käärimättä niitä taulukkoon. Tämä selittää miksi et voi palauttaa kahta JSX tagia käärimättä niitä yhteen tagiin tai Fragmenttiin.

2. Sulje kaikki tagit

JSX edellyttää tagien eksplisiittistä sulkemista: itsestään sulkeutuvat tagit, kuten <img> täytyy muuttua <img /> muotoon, ja tagit kuten <li>oranges täytyy kirjoittaa <li>oranges</li> muodossa.

Tältä näyttää Hedy Lamarrin kuva ja listan kohteet suljettuina:

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>Keksi uusi liikennevalo</li>
    <li>Harjoittele elokuvakohtausta</li>
    <li>Paranna spektritekniikkaa</li>
  </ul>
</>

3. camelCase:a kaikki useimmat asiat!

JSX muuttuu JavaScriptiksi ja attribuutit kirjoitettuna JSX:ssä muuttuvat JavaScript olioiden avaimiksi. Komponenteissasi saatat useasti haluta lukea nuo attribuutit muuttujiin. Mutta JavaScriptissa on omia rajoitteitaan muuttujien nimeämisessä. Esimerkiksi, nimet eivät voi sisältää viivoja tai varattuja sanoja kuten class.

Tämän takia Reactissa monet HTML ja SVG attribuutit kirjoitetaan camelCase muodossa. Esimerkiksi, sen sijaan, että kirjoittaisit stroke-width käytät strokeWidth. Kerta class on varattu sana, Reactissa kirjoitat className, joka on nimetty vastaavan DOM ominaisuuden mukaan:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

Voit löytää kaikki nämä attribuutit Reactin DOM Elementseistä. Jos muistat jonkun väärin, älä huoli. React viestii mahdollisia korjauksia selaimen konsoliin.

Sudenkuoppa

Historiallisista syistä, aria-* sekä data-* attribuutit kirjoitetaan kuten HTML:ssä, viivoilla.

Pro-tip: Käytä JSX muunninta

Kaikkien näiden attribuuttien muuttaminen olemassa olevassa merkintäkoodissa on työlästä! Suosittelemme käyttämään muunninta kääntääksesi olemassa olevan HTML:n ja SVG:n JSX:ksi. Muuntimet ovat käteviä käytännössä, mutta on silti kannattavaa ymmärtää mitä tapahtuu, jotta voit viihtyisästi kirjoittaa itse JSX:ää.

Tässä lopullinen tulos:

Forkkaa

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarrin tehtävälistä</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>Keksi uusi liikennevalo</li>
        <li>Harjoittele elokuvakohtausta</li>
        <li>Paranna spektritekniikkaa</li>
      </ul>
    </>
  );
}

Kertaus

Nyt tiedät miksi JSX on olemssa ja miten sitä käytetään komponenteissa:

React komponentit ryhmittää renderöintilogiikan merkintäkoodin kanssa, sillä ne liittyvät toisiinsa.
JSX on samanlaista kuin HTML, muutamin poikkeuksin. Voit käyttää muunninsta jos tarvitset.
Virheviestit usein ohjeistavat oikeaan suuntaan merkintäkoodin korjaamiseksi.

Kokeile haasteita

Haaste 1 / 1:
Muunna vähän HTML koodia JSX koodiksi

Tämä HTML liitettiin komponenttiin, mutta se ei ole validia JSX:ää. Korjaa se:

Forkkaa

export default function Bio() {
  return (
    <div class="intro">
      <h1>Tervetuloa verkkosivuilleni!</h1>
    </div>
    <p class="summary">
      Löydät ajatukseni täältä.
      <br><br>
      <b>Ja <i>kuvia</b></i> tutkijoista!
    </p>
  );
}

On oma päätöksesi käytätkö muunninta tai teetkö muunnoksen käsin!

PreviousImporting and Exporting Components NextJavaScript in JSX with Curly Braces

Merkintäkoodin kirjoittaminen JSX:llä

Tulet oppimaan

JSX: Laitetaan merkintäkoodi JavaScriptiin

Huomaa

Muunnetaan HTML koodi JSX koodiksi

Huomaa

JSX koodin säännöt

1. Palauta yksi juurielementti

Syväsukellus

Miksi useat JSX tagit täytyy kääriä

2. Sulje kaikki tagit

3. camelCase:a kaikki useimmat asiat!

Sudenkuoppa

Pro-tip: Käytä JSX muunninta

Kertaus

Kokeile haasteita

Haaste 1 / 1: Muunna vähän HTML koodia JSX koodiksi

Haaste 1 / 1:
Muunna vähän HTML koodia JSX koodiksi