Pradėkite nuo „React“

Bibliotekos „JavaScript“ kurie yra atsakingi už manipuliavimą vaizdais ir informacijos pateikimo būdą, vis dažniau apima daugiau funkcijų, palengvinančių programų kūrimą kūrėjui ir malonesnes jas naudojančioms vartotojams.

Tarp šių bibliotekų turime Reaguokite, kuri yra biblioteka „JavaScript“ atvirojo kodo, daugiausia dėmesio skiriant vartotojo sąsajų kūrimui vieno puslapio programos arba vieno puslapio programas, kurias naudoja Facebook ir Instagram tvarkyti viską, kas susiję su rodiniais, išspręsti didelių programų problemą, kai vartotojui rodomi duomenys nuolat keičiasi.

Reagavimo ypatybės

Norėdami išspręsti šią problemą, kurią minėjome Reaguokite savo filosofiją grindžia šiomis savybėmis:

PaprastaŠi charakteristika išreiškia tai, kaip mūsų programa turėtų atrodyti tam tikru momentu, kokiu būdu ji daro ir ką ji daro Reaguokite yra tai, kad ji automatiškai tvarko visus vartotojo sąsajos atnaujinimus, kai atliekami esminiai programos pakeitimai.
DeklaratyvusKai informacija pasikeičia mūsų programoje Reaguokite atlieka mūsų puslapio atnaujinimo funkciją, bet tik ten, kur pasikeitė informacija.
Derinamų komponentų konstrukcijaKai kalbame apie Reaguokite, mes daugiausia kalbame apie daugkartinio naudojimo komponentų kūrimą, iš tikrųjų su šia biblioteka dažniausiai darome komponentus ir dėl to, kad jie yra kapsuliuoti, jie labai padeda pakartotinai naudoti kodą, išbandyti ir atskirti funkcijas. paprasta.

Reaguoja

Dabar, kai žinome, iš ko jis susideda Reaguokite ir jos ypatybes, mes įsigysime naujausią bibliotekos versiją ir atliksime paprastą įgyvendinimą, kad parodytume garsųjį „Hello World“.

Norėdami gauti naujausią versiją, atsisiųsime planšetinį kompiuterį su biblioteka, esančia šioje nuorodoje. Atsisiuntę išpakuojame ir įdedame turinį į aplanką pavadinimu Sveiki_React ir viduje sukuriame failą pavadinimu hello_react.html kuriame bus toks turinys:

Kaip matome, tai gana paprastas kodas, leidžiantis mums pateikti tekstą pagrindiniame vaizde, nes jame yra reaguoti.js. Papildomai naudojame JSX kas yra sintaksė XML mūsų viduje „JavaScript“ ir tada atlikite transformaciją naršyklėje, kurią galime naudoti dėka įdiegtos antrosios bibliotekos JSXTransformer.js

Be to, mes galime padaryti savo kodą labiau skaitomą ir modulinį, atskirdami jo logiką, tai galime pasiekti sukurdami du failus, tam mes sukuriame vieną pavadinimą hello_react.js ir mes įdėjome šį kodą:

 React.render (, document.getElementById ('example_react'));

Tada mūsų HTML tai, ką mes darome, yra įtraukti .js failą į scenarijaus žymą ir atliksime tą pačią operaciją:

Pažiūrėkime, kai vykdome savo pavyzdį naršyklėje:

Kaip matome, manipuliavimas duomenimis buvo gana paprastas, tačiau yra geresnis būdas juos įgyvendinti Reaguokite, nes taip, kaip mes tai darome, kodas naudoja transformatorių JSX naršyklės, kaip matysime per konsolę gautame pranešime.

Šis konsolės pranešimas suteikia mums šio mažo įspėjimo sprendimą ir tai yra iš anksto sudaryti mūsų .js kodą, tam mes naudosime paketų tvarkyklę Node.js šiai užduočiai atlikti, taigi, jei neturime šios aplinkos įdiegę savo kompiuteryje, einame į oficialų puslapį ir atsisiųsime ją, jei dirbame sistemoje „Windows“, o tuo atveju, jei dirbame „Linux“, galime atlikti veiksmus ši pamoka.

Iš anksto sukompiliuokite mūsų kodą

Norėdami atlikti šią užduotį, einame į „Node.js“ konsolę ir padedame npm mes įdiegėme įrankį Reaguokite komandų pultas vadinamas reagavimo įrankiai mums reikia tik įvykdyti šią eilutę:

 npm įdiegti -g reagavimo įrankius

Dabar mes verčiame savo kodą į „JavaScript“ grynas taip:

 jsx -žiūrėti hello_react.js

Tai ne tik verčia mūsų kodą, bet ir automatiškai sugeneruoja failą hello_react.js Kiekvieną kartą, kai mūsų programa keičiama, pažiūrėkime konsolės atsakymą, kai vykdysime šią komandą:

Galiausiai pakeičiame savo HTML panaikinti bibliotekos įtraukimą JSXTransformer.js kadangi mums to nereikia ir įtraukiame savo scenarijų įprastu būdu, pažiūrėkime:

 Sveiki, React!

Kaip jau minėjome, paskutinė operacija, kurią atliekame per konsolę, automatiškai sugeneruoja failą kiekvieną kartą, kai keičiame savo programą, taigi, jei atliksime pakeitimus, konsolė praneš mums taip:

Kaip matome, turime du pranešimus apie tai, kad faile buvo atlikti pakeitimai. Tai faktiškai buvo tie, kuriuos padarėme pašalindami biblioteką ir įtraukdami įprastą „JavaScript“ failą.

Taip baigėme šią pamoką, kurioje galėjome žengti pirmuosius žingsnius Reaguokite ir jos diegimas mūsų programose, tai padės mums sudaryti komponentus, skirtus vizualizuoti duomenis pagal mūsų požiūrį, ir įsitikinti, kad tai ne tik paprasta, bet ir suteikia įrankių, kurie labai palengvins mūsų kūrimą.