Započnite s Reactom

Knjižnice u JavaScript koji su zaduženi za manipulaciju pogledima i način na koji prikazuju informacije sve više uključuju više funkcionalnosti koje razvojnim programerima olakšavaju razvoj aplikacija i ugodnije su korisnicima koji ih koriste.

Među tim knjižnicama imamo Reagirati, koja je knjižnica JavaScript otvorenog koda usredotočen uglavnom na stvaranje korisničkih sučelja za aplikacije na jednoj stranici ili aplikacije na jednoj stranici koju koristi Facebook i Instagram za rukovanje svime što se odnosi na prikaze, rješavajući problem velikih aplikacija u kojima se podaci prikazani korisniku stalno mijenjaju.

Reagirajte značajke

Za rješavanje ovog problema koji smo spomenuli Reagirati svoju filozofiju temelji na sljedećim karakteristikama:

JednostavanOva karakteristika izražava kako bi naša aplikacija trebala gledati u određenoj točki te na koji način to radi i što radi Reagirati je da automatski obrađuje sva ažuriranja korisničkog sučelja kada se izvrše temeljite promjene u aplikaciji.
DeklarativnoKad se informacije promijene u našoj aplikaciji Reagirati obavlja funkciju osvježavanja naše stranice, ali samo tamo gdje su se podaci promijenili.
Konstrukcija kombiniranih komponentiKad govorimo o Reagirati, uglavnom govorimo o izgradnji komponenti za višekratnu uporabu, zapravo s ovom knjižnicom ono što najčešće radimo je izgradnja komponenti, a zahvaljujući činjenici da su inkapsulirane, čine ponovnu uporabu koda, testove i razdvajanje funkcionalnosti iznimno jednostavan.

Reagiranje

Sada kada znamo od čega se sastoji Reagirati i njegove karakteristike, dobit ćemo najnoviju verziju knjižnice i izvršit ćemo jednostavnu implementaciju kako bismo prikazali slavni Hello World.

Da bismo dobili najnoviju verziju, preuzimamo tablet s bibliotekom na sljedećoj poveznici. Nakon preuzimanja raspakiramo i smještamo sadržaj u mapu pod nazivom Pozdrav_React a unutra stvaramo datoteku pod nazivom hello_react.html koji će sadržavati sljedeći sadržaj:

Kao što vidimo, to je prilično jednostavan kôd koji nam omogućuje iscrtavanje teksta u našem glavnom prikazu zahvaljujući uključivanju reagirati.js. Dodatno koristimo JSX što je sintaksa XML unutar našeg JavaScript a zatim izvršiti transformaciju u pregledniku, koju možemo koristiti zahvaljujući implementaciji druge biblioteke tzv JSXTransformer.js

Osim toga, naš kôd možemo učiniti čitljivijim i modularnijim odvajanjem njegove logike, to možemo postići stvaranjem dvije datoteke, za to stvaramo jednu tzv. hello_react.js i stavili smo sljedeći kod:

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

Zatim u našem HTML ono što radimo je uključiti našu .js datoteku unutar oznake skripte i imat ćemo istu operaciju:

Pogledajmo onda kada pokrenemo naš primjer u pregledniku njegov odgovor:

Kao što vidimo, manipulacija podacima bila je prilično jednostavna, međutim postoji bolji način za implementaciju Reagirati, budući da način na koji to radimo, kôd koristi transformator JSX preglednika kao što ćemo vidjeti u poruci koju primamo putem konzole.

Ova poruka konzole daje nam rješenje za ovo malo upozorenje, a to je da izvršimo predkompilaciju našeg .js koda, za to ćemo koristiti upravitelja paketa Node.js za ovaj zadatak, pa ako nemamo ovo okruženje instalirano na računalu, idemo na službenu stranicu i preuzimamo ga u slučaju da radimo u sustavu Windows, a u slučaju da radimo u sustavu Linux možemo slijediti korake u ovaj vodič.

Prethodno sastavljanje našeg koda

Da bismo izvršili ovaj zadatak, idemo na konzolu Node.js i uz pomoć npm instalirali smo alat Reagirati za komandnu konzolu koja se zove reagirati-alati za koje samo trebamo izvršiti ovaj redak:

 npm install -g response -tools

Ono što sada radimo je prevesti naš kôd na JavaScript čisto ovako:

 jsx -gledajte hello_react.js

Ovo ne samo da prevodi naš kôd, već i automatski generira datoteku hello_react.js Svaki put kad se izvrši promjena u našoj aplikaciji, pogledajmo odgovor s konzole kada pokrenemo ovu naredbu:

Konačno smo izmijenili naš HTML uklanjanjem uključivanja knjižnice JSXTransformer.js budući da nam to ne treba, a uključivanje našeg skripta radimo na konvencionalan način, da vidimo:

 Pozdrav React!

Kao što smo spomenuli, posljednja operacija koju izvršavamo putem konzole automatski generira datoteku svaki put kada napravimo promjenu u aplikaciji, pa će nas, ako smo izvršili promjene, konzola obavijestiti na sljedeći način:

Kao što vidimo, imamo dvije obavijesti o izmjenama u datoteci, a to su zapravo one koje smo učinili s obzirom na uklanjanje knjižnice i uobičajeno uključivanje JavaScript datoteke.

Ovako smo završili ovaj vodič s kojim smo mogli napraviti prve korake Reagirati i njegovu primjenu u našim aplikacijama, to nam pomaže u izgradnji komponenti za vizualizaciju podataka u našim pogledima, provjeravajući da nije samo jednostavno, već nam pruža alate koji će nam znatno olakšati razvoj.