Täydellinen aloittelijan opas reagoimaan

Kuva Alexander Andrews on Unsplash

Haluan palata takaisin teknisen sisällön kirjoittamiseen. React on yksi suosikkitekniikoistani, joten ajattelin luoda React-esittelyn! Tämä viesti vaatii HTML: n ja JavaScriptin tuntemuksen. Olen vakuuttunut siitä, että sinun pitäisi tietää nämä ennen siirtymistä kirjastoihin, kuten React!

Mikä on reagoida

React on JavaScript-kirjasto, jonka Facebook on kehittänyt vuonna 2013. React halusi tehdä käyttöliittymistä modulaarisempia (tai uudelleenkäytettäviä) ja helpommin ylläpidettäviä. Reaktin verkkosivuston mukaan sitä käytetään "rakentamaan kapseloituja komponentteja, jotka hallitsevat omaa tilaaan, sitten säveltää ne monimutkaisten käyttöliittymien tekemiseksi".

Aion käyttää paljon Facebook-esimerkkejä tässä viestissä, koska he kirjoittivat ensin Reaktin!

Muistatko, kun Facebook muutti tykkäämistä reaktioihin? Sen sijaan, että voisit pitää viesteistä, voit nyt reagoida mihin tahansa viestiin sydämellä tai hymiöllä tai vastaavalla. Jos nämä reaktiot tehdään ensisijaisesti HTML-muodossa, olisi valtava työ muuttaa kaikkien niiden tykkää reaktioista ja varmistaa, että ne toimivat.

Tässä kohtaa React tulee sisään. Sen sijaan, että toteuttaisimme "huolenaiheiden erottamisen", meillä on Reaktissa erilainen arkkitehtuuri. Tämä arkkitehtuuri lisää modulaarisuutta komponentin rakenteen perusteella.

Pitämme tänään CSS: n erillisenä, mutta voit jopa tehdä siitä komponentin, jos haluat!

Reaktio vs. Vanilla JavaScripti

Kun puhumme “vanilja” JavaScriptiä, puhumme yleensä JavaScript-koodin kirjoittamisesta, joka ei käytä ylimääräisiä kirjastoja, kuten JQuery, React, Angular tai Vue. Jos haluat lukea lisää niistä ja siitä, mikä on kehys, minulla on viesti kaikista verkkokehyksistä.

Pari nopeaa muistiinpanoa ennen kuin aloitamme

  • Jotta tästä opetusohjelmasta tulisi hieman ytimekäsempi, jotkut koodiesimerkit ovat ... ennen tai jälkeen niiden. Tämä tarkoittaa, että jätimme jonkin koodin pois.
  • Käytän Git-diffiä joissain paikoissa näyttääkseni koodirivit, jotka muuttuvat. Jos kopioit ja ohitat, sinun on poistettava + rivin alussa.
  • Minulla on täydet CodePens-ohjelmat kunkin osan valmiilla versioilla - joten voit käyttää niitä pelaamisen seuraamiseen!
  • Edistyneemmät käsitteet, jotka eivät ole välttämättömiä opetusohjelmassa, ovat lauseissa. Nämä ovat tosiasioita, jotka ovat mielenkiintoisia!

Perustaa

Jos luot tuotanto-React-sovelluksen, haluat käyttää rakennustyökalua, kuten Webpack. Webpack niputtaa koodisi, koska React käyttää joitain malleja, jotka eivät toimi oletusarvoisesti selaimessa. Luo React-sovellus on erittäin hyödyllinen näihin tarkoituksiin, koska se tekee suurimman osan kokoonpanosta puolestasi!

Toistaiseksi käytämme React CDN: tä, joka on tarkoitettu vain kehitystarkoituksiin! Käytämme myös Babel CDN: tä, jotta voimme käyttää joitain epästandardeja JavaScript-ominaisuuksia (puhumme siitä myöhemmin!).

Mennään nyt React-koodiin!

luokka HelloWorld laajentaa React.Component {
  tehdä () {
    // Kertoi reagoivan, mitä HTML-koodi renderöidään
    palaa 

hei maailma

  }
}
// Kehottaa Reaktoria liittämään HelloWorld-komponentin 'root' HTML-div
ReactDOM.render (, document.getElementById ("root"))

Ainoa mitä tapahtuu on, että "Hei maailma" näkyy sivulla H1!

Kävelemme läpi mitä täällä tapahtuu.

Ensinnäkin käytämme ES6-luokkaa, joka perii React.Component-luokalta. Tätä mallia käytämme suurimpaan osaan React-komponentteja.

Seuraavaksi meillä on luokassamme menetelmä - ja sen erityinen menetelmä, nimeltään renderöinti. React etsii renderöintimenetelmää päättääksesi mitä sivulle renderoida! Nimi on järkevää. Mitä tahansa siitä renderöintimenetelmästä palautetaan, se suoritetaan kyseisen komponentin toimesta.

Palautamme tässä tapauksessa H1: n, jonka teksti on "Hello World" - tämä on tarkalleen mitä HTML-tiedostossa normaalisti olisi.

Viimeinkin meillä on:

ReactDOM.render (, document.getElementById ("root"))

Käytämme ReactDOM-toimintoa liittääksesi reagointikomponentimme DOM: iin.

React käyttää jotain, jota kutsutaan virtuaaliseksi DOM: ksi, joka on DOM: n virtuaalinen esitys, jonka kanssa normaalisti toimit Vanilla JavaScriptin tai JQueryn kanssa. Tämä reactDOM.render tekee tämän virtuaalisen DOM: n todelliseksi DOM: ksi. Kulissien takana React tekee paljon työtä DOM-tiedoston tehokkaan muokkaamisen ja uudelleenmuodostuksen puolesta, kun käyttöliittymän jotain täytyy muuttaa.

Komponentimme, , näyttää HTML-tunnisteelta! Tämä syntaksi on osa JSX: ää, joka on JavaScriptin laajennus. Et voi käyttää sitä selaimessa natiivisti. Muistatko kuinka käytämme Babelia JavaScriptiimme? Babel siirtää (tai muuntaa) JSX: n normaaliin JavaScriptiin, jotta selain voi ymmärtää sen.

JSX on itse asiassa valinnainen Reaktissa, mutta näet sen käytettävän suurimmassa osassa tapauksia!

Sitten käytämme JavaScriptin sisäänrakennettua asiakirjaa.getElementById tarttumalla HTML-muotoon luomamme juurelementti.

Kaiken kaikkiaan, tässä ReactDOM.render-lausunnossa liitämme HelloWorld-komponentimme div-osaan, jonka loimme HTML-tiedostoomme.

Käynnistyskoodi

Okei - nyt, kun olemme tehneet "Hello World", voimme aloittaa Facebook-komponentimme kanssa.

Ensinnäkin haluan sinun pelaamaan tätä demoa. Pyrimme käsittelemään tätä koko muun opetusohjelman ajan. Katso myös koodia, mutta älä huolestu siitä, että ymmärrät sitä! Sitä varten on muu opetusohjelma!

Aloitetaan widgetin HTML-koodin kovalla koodaamisella:

Joidenkin lisättyjen CSS-tiedostojen kanssa tämä näyttää seuraavalta:

Tässä on Codepen täydellisellä aloituskoodilla.

Tämän opetusohjelman vuoksi luomme neljä komponenttia: tilakomponentti, joka on vanhempi, Like-komponentti, joka kattaa mieltymyksen logiikan, ja Kommentti-komponentti, joka sisältää logiikan kommentin kirjoittamiseen. Like-komponentissa on myös lapsi LikeIcon, joka tulee näkyviin tai piilotettu, kun vaihdat like-painiketta.

Komponenttiarkkitehtuuri

Mennään eteenpäin ja jaamme kirjoittamasi HTML-koodi näihin komponentteihin.

Aloitamme komponentin kuoresta, ja myös annamme sen varmistaaksemme, että se toimii!

Yksi mielenkiintoinen huomautus edellä mainitusta on, että meidän piti vaihtaa “class” -määritteet “className”. Luokka tarkoittaa jo jotain JavaScriptissä - se on ES6-luokille! Jotkut määritteet on nimetty eri tavalla JSX: ssä kuin HTML: ssä.

Voimme myös poistaa HTML-koodimme sisällön, jättämällä vain elementti ID-juurilla - vanhemman “content” div on tarkoitettu vain muotoilulle!


  
    
  

Tässä on HTML, joka menee Tila-komponenttiin. Huomaa, että osaa alkuperäisestä HTML: stä ei vielä ole - se menee sen sijaan alakomponenteihimme!

Luomme toisen komponentin, ja sitten sisällytetään se tilakomponenttiin.

luokan kommentti laajentaa React.Component {
  tehdä () {
    palata (