Išsamus pradedančiųjų vadovas reaguoti

Alexander Andrews nuotrauka „Unsplash“

Noriu grįžti prie daugiau techninio turinio rašymo. „React“ yra viena iš mano mėgstamiausių technologijų, todėl galvojau sukurti „React“ įvadą! Šis pranešimas reikalauja HTML ir „JavaScript“ žinių. Esu tvirtai įsitikinęs, kad prieš pereidami į tokias bibliotekas kaip „React“, turėtumėte tai žinoti.

Kas yra reaguoti

„React“ yra „JavaScript“ biblioteka, 2013 m. Sukurta „Facebook“ kūrimo komandos. Reaktyvas norėjo, kad vartotojo sąsajos būtų labiau modulinės (arba daugkartinio naudojimo) ir lengviau prižiūrimos. Anot „React“ tinklalapio, jis naudojamas „Sukurti kapsuliuotus komponentus, kurie valdo savo būseną, tada juos komponuoti, kad sudarytų sudėtingas vartotojo sąsajas“.

Šiame pranešime naudosiuosi daugybe „Facebook“ pavyzdžių, nes jie pirmiausia rašė „Reaguoti“!

Prisimeni, kai „Facebook“ iš mėgstamų reakcijų persikėlė? Užuot mėgę pranešimus, dabar į bet kurį įrašą galite reaguoti širdimi, šypsenomis ar pan. Jei tos reakcijos pirmiausia būtų susijusios su HTML, tai būtų milžiniškas darbas, norint pakeisti visus tuos, kurie mėgsta reakcijas, ir įsitikinti, kad jie veikia.

Čia ateina „React“. Vietoj „rūpesčių atskyrimo“ mes turime kitokią „React“ architektūrą. Ši architektūra padidina moduliavimą, atsižvelgiant į komponento struktūrą.

Šiandien CSS mes atskirtume, bet jūs netgi galite nustatyti, kad tas komponentas būtų konkretus!

Reaguokite prieš „Vanilla JavaScript“

Kai mes kalbame apie „vanilinį“ „JavaScript“, mes paprastai kalbame apie „JavaScript“ kodo rašymą, kuris nenaudoja papildomų bibliotekų, tokių kaip „JQuery“, „React“, „Angular“ ar „Vue“. Jei norėtumėte daugiau sužinoti apie tuos dalykus ir apie tai, kas yra sistema, turiu įrašą apie internetines sistemas.

Pora trumpų pastabų prieš pradedant

  • Kad ši instrukcija būtų šiek tiek trumpesnė, kai kurie kodų pavyzdžiai yra ... prieš juos arba po jų. Tai reiškia, kad praleidome kai kuriuos kodus.
  • Aš naudoju „Git diffs“ kai kuriose vietose, norėdamas parodyti kodo eilutes, kurios keisis. Jei nukopijavote ir anksčiau buvote, eilutės pradžioje turite ištrinti +.
  • Turiu pilną „CodePens“ su užbaigtomis kiekvienos sekcijos versijomis - taigi jūs galite jas naudoti žaisdami pasivijimą!
  • Sudėtingesnės sąvokos, kurios nėra būtinos mokymo programai, yra rašomosios eilutės. Tai yra faktai, kurie yra įdomūs!

Nustatykite

Jei kuriate „React“ programą, norėsite naudoti kūrimo įrankį, pvz., „Webpack“. „Webpack“ susieja jūsų kodą, nes „React“ naudoja kai kuriuos šablonus, kurie pagal nutylėjimą neveikia naršyklėje. Kurti „React“ programą yra labai naudinga šiais tikslais, nes ji atlieka didžiąją dalį konfigūracijos už jus!

Kol kas mes naudosime „React CDN“, kuris yra skirtas tik plėtros tikslais! Taip pat naudosime „Babel“ CDN, kad galėtume naudoti kai kurias nestandartines „JavaScript“ funkcijas (apie tai plačiau kalbėsime vėliau!).

 
 

Aš taip pat padariau „Codepen“ šabloną, kurį galite naudoti!

Visame „React“ projekte aš suskaidyčiau savo komponentus į skirtingus failus. Mokymosi tikslais dabar „JavaScript“ sujungsime į vieną failą.

Komponentai

Šiam mokymui sukursime „Facebook“ būsenos valdiklį, nes „Facebook“ visų pirma parašė „React“!

Pagalvokite, kiek vietų „Facebook“ rodomas panašus valdiklis. Jums gali patikti būsena, nuorodos įrašas, vaizdo įrašas arba nuotrauka! Arba net puslapis! Kiekvieną kartą, kai „Facebook“ pažiūri ką nors panašaus į funkcionalumą, jie nenori to daryti visose tose vietose. Taigi, ten yra komponentai! Visi pakartotinai naudojami tinklalapio fragmentai yra sudedami į komponentą. Tas komponentas gali būti naudojamas vėl ir vėl. Ee turės pakeisti kodą tik vienoje vietoje, kad jį atnaujintų.

Pažvelkime į „Facebook“ būsenos paveikslėlį ir suskirstykime įvairius jo komponentus.

Pati būsena bus komponentas. „Facebook“ laiko juostoje yra daugybė būsenų. Mes tikrai norime, kad būtų galima pakartotinai naudoti būsenos komponentą.

Tame komponente turėsime papildomus komponentus arba pagrindiniame komponente esančius komponentus. Jie taip pat bus pakartotinai naudojami. Panašus mygtuko komponentas gali būti „PhotoStatus“ ir „LinkStatus“ komponentų vaikas.

Gal mūsų komponentai atrodytų maždaug taip:

Mes netgi galime turėti komponentus jų sudedamosiose dalyse! Taigi grupė „Patinka“, „Komentuoti“ ir „Dalytis“ galėtų būti jos „ActionBar“ komponentas. Jame būtų komponentų, kurie patinka komentuoti ir dalintis jame!

Yra daugybė būdų, kaip galite suskaidyti šiuos komponentus ir jų komponentus, atsižvelgiant į tai, kur dar kartą naudosite savo programos funkcijas.

Darbo pradžia

Norėjau pradėti šią pamoką su „Reaktyvus pasaulis“ - juk tai jau tradicija! Tada pereisime prie šiek tiek sudėtingesnės būklės pavyzdžio.

Į savo HTML failą įtrauksime tik vieną elementą - dalyką su ID. Pagal susitarimą paprastai matysite, kad div turi „root“ id, nes tai bus mūsų „React“ programos šaknis!

Jei rašote kodą „CodePen“ šablone, šią „JavaScript“ galite parašyti tiesiogiai „js“ skyriuje. Jei vietoj to rašote savo kompiuteryje, turėsite pridėti scenarijaus žymą su tekstu / jsx, taigi:

Dabar pateiksime mūsų „React“ kodą!

klasė „HelloWorld“ praplečia „React.Component“ {
  pateikti () {
    // Nurodo Reaguoti, kokį HTML kodą pateikti
    grįžti 

labas pasaulis

  }
}
// Nurodo Reaguoti, kad „HelloWorld“ komponentą pridėtų prie „šakninio“ HTML skyriaus
„ReactDOM.render“ (, document.getElementById („root“))

Viskas, kas atsitinka, yra tas, kad „Sveikas pasaulis“ puslapyje rodomas kaip H1!

Pažiūrėkime apie tai, kas vyksta čia.

Pirma, mes naudojame ES6 klasę, kurią paveldime iš klasės „React.Component“. Tai yra modelis, kurį naudosime daugumai mūsų „React“ komponentų.

Be to, mūsų klasėje yra metodas - ir specialus metodas, vadinamas renderu. React ieško atvaizdavimo metodo, kad nuspręstų, ką atvaizduoti puslapyje! Pavadinimas turi prasmę. Nesvarbu, kas bus grąžinta iš to pateikimo metodo, bus atvaizduotas tas komponentas.

Šiuo atveju mes grąžiname H1 su „Sveikas pasaulis“ tekstu - būtent tai, kas paprastai būtų HTML faile.

Galiausiai turime:

„ReactDOM.render“ (, document.getElementById („root“))

Mes naudojame „ReactDOM“ funkciją, norėdami prijungti reagavimo komponentą prie DOM.

„React“ naudoja tai, kas vadinama virtualiu DOM, kuris yra virtualus DOM vaizdas, su kuriuo paprastai bendrautumėte „Vanilla JavaScript“ ar „JQuery“. Šis reactDOM.render padaro šį virtualų DOM tikruoju DOM. Užkulisiuose „React“ daug dirba, kad efektyviai redaguotų ir iš naujo pateiktų DOM, kai kažkas sąsajoje turi pasikeisti.

Mūsų komponentas atrodo kaip HTML žyma! Ši sintaksė yra JSX dalis, kuri yra „JavaScript“ plėtinys. Negalite jo natūraliai naudoti naršyklėje. Prisimenate, kaip mes naudojame „Babel“ savo „JavaScript“? „Babel“ perkels (arba konvertuos) mūsų JSX į įprastą „JavaScript“, kad naršyklė suprastų.

„JSX“ iš tikrųjų yra pasirenkamas „React“, tačiau jūs pamatysite, kad jis naudojamas daugeliu atvejų!

Tada mes naudojame „JavaScript“ įmontuotą „document.getElementById“, kad patrauktume savo pagrindinį elementą, kurį sukūrėme savo HTML.

Apskritai, šiame „ReactDOM.render“ sakinyje mes pridedame savo „HelloWorld“ komponentą prie div, kurį sukūrėme savo HTML faile.

Pradinis kodas

Gerai - dabar, kai mes sukūrėme „Sveikas pasaulis“, galime pradėti naudotis savo „Facebook“ komponentu.

Pirmiausia noriu, kad jūs pažaistumėte su šiuo demonstraciniu vaizdu. Mes tai nagrinėsime visą likusią mokymo programą. Maloniai žiūrėkite ir į kodą, tačiau nesijaudinkite dėl jo nesupratimo! Štai kam skirta visa kita instrukcija!

Pradėkime nuo „griežto kodavimo“ valdiklio HTML:

Pridėjus CSS, tai atrodo taip:

Štai „Codepen“ su visu pradžios kodu.

Siekdami šio vadovo, mes sukursime keturis komponentus: būsenos komponentą, kuris bus pirminis, panašų komponentą, apimantį patinkančią logiką, ir komentaro komponentą, kuriame bus logika įvesti komentarą. „Panašus“ komponentas taip pat turės antrinį „LikeIcon“, kuris bus rodomas arba paslėptas, kai paspausite mygtuką „Patinka“.

Komponentų architektūra

Pabandykime padalinti mūsų parašytą HTML kodą į tuos komponentus.

Pradėsime nuo komponento apvalkalo ir jį taip pat pateiksime, kad įsitikintume, jog jis veikia!

Įdomi pastaba apie tai, kad turėjome pakeisti „class“ atributus į „className“. Klasė jau reiškia ką nors „JavaScript“ - ji skirta ES6 klasėms! Kai kurie atributai JSX pavadinti skirtingai nei HTML.

Taip pat galime ištrinti savo HTML turinį, palikdami tik elementą su ID šaknimi - pagrindinė „turinio“ div dalis skirta tik stiliui!


  
    
  

Štai HTML, kuris bus naudojamas būsenos komponente. Atminkite, kad kai kurių originalaus HTML dar nėra - jis pateks į mūsų komponentus!

Sukurkime antrą komponentą, tada mes jį įtraukime į būsenos komponentą.

klasės komentaras išplečia React.Component {
  pateikti () {
    grįžti (