Изборник
Šta je React?
React (takođe poznat kao React.js ili ReactJS) je open source JavaScript koji pruža pregled podataka napisanih u HTML-u. React pregledi se obično pružaju pomoću komponenti koje sadrže dodatne komponente definisane kao prilagođene HTML oznake. React obezbeđuje programeru model u kojem podkomponente ne mogu direktno da utiču na spoljne komponente, efikasno ažuriranje HTML dokumenta prilikom promene podataka i jasno razdvajanje komponenti u današnjim aplikacijama na jednoj stranici.
ReactJS je nastao kao JavaScript port za XHP, verziju PHP-a koju je Facebook objavio pre četiri godine. XHP je PHP ekstenzija koja povećava sintaksu jezika tako da fragmenti XML dokumenta postaju validni PHP izrazi. Ovo vam omogućava da koristite PHP kao strožiji mehanizam za šabloniranje (template mechanism) i nudi mnogo jednostavniju implementaciju komponenti za višekratnu upotrebu. XHP se prvenstveno bavio minimiziranjem napada na Skriptiranje više lokacija (XSS – Cross-site Scripting). XSS napadi su olakšani kada zlonamerni korisnik uđe u sadržaj koji ima za cilj da nanese štetu gledaocu tog sadržaja. Tipični vektori napada su da se unese sadržaj sa ugrađenim i skrivenim JavaScript-om (jezikom koji radi u svakom veb pretraživaču), a zatim se ugrađeni JavaScript koristi za krađu informacija ili na drugi način kompromituje korisnika koji pregleda sadržaj. XHP takođe smanjuje brigu o brisanju informacija koje su dostavili korisnici.
Ali, XHP-om je postojao poseban problem jer dinamičke veb aplikacije zahtevaju mnogo povratnih putovanja do servera, a XHP nije davao rešenja za ovaj problem. Sumirano, Facebook inženjer je pregovarao sa svojim menadžerom da unese XHP u pretraživač koristeći JavaScript i dobio je šest meseci da ga isproba. Kao rezultat nastao je ReactJS.
Upotreba React.js-a
Ako obraćate pažnju na razvoj JavaScript-a, znaćete da je „manipulacija DOM-om skupa“ postala sveopšta mantra. Drugim rečima, uzimanje podataka vaše JavaScript aplikacije i njihovo „prikazivanje“ u brauzeru je skupa operacija. Stoga je iznenađujuće da je ReactJS prvi framework koji ovo tvrđenje dovodi do njegove očiglednosti. Optimizacija JS-a za DOM manipulaciju dovodi do brze biblioteke, u ovom slučaju biblioteke koja omogućava razvoj veb aplikacija koje zahtevaju vrlo malo koda. ReactJS funkcioniše tako što interno čuva stanje vaše aplikacije i iznova prikazuje vaš sadržaj u brauzeru (DOM manipulacija), ali samo kada se stanje promeni. Naime, vi stupate u interakciju sa ReactJS-om tako što mu kažete kada se stanje promenilo i ReactJS upravlja svim vizuelnim promenama vaše aplikacije umesto vas. Ova apstrakcija je korisna i briljantna. Implementacija je slična AngularJS-u koji upravlja DOM manipulacijom za vas putem dvosmernog povezivanja podataka (two-way data connection), ali ReactJS ide korak dalje jer zna kada su se stvari promenile, a kada nisu, što čini ogromno razliku prilikom izgradnje velikih aplikacija. AngularJS se oslanja na prljavu proveru (dirty check) i sažetu petlju, a moje lično iskustvo je da AngularJS interfejs nema sposobnost da bude toliko inteligentan u određivanju kada je promena DOM-a nepotrebna i da preskoči neželjenu DOM manipulaciju. Za velike aplikacije, verujem da ovo pravi ogromnu razliku.
Ako ste računarski stručnjak, biće vam fascinantan način na koji ReactJS dokumentuje korake za izgradnju efikasnog algoritma za „razlikovanje“, algoritma koji razume kada se stablo stanja promenilo. Naime, početni pristupi imaju O(n3) algoritamsku složenost. Svako ko je ikada intervjuisan za poziciju računarskog inženjera zna da je ovo skup algoritam koji treba izbegavati u radu sa bilo čim drugim osim sa sitnim skupovima podataka. Možemo konstatovati da bi sa velikom veb aplikacijom sa 10.000 DOM čvorova to značilo da bi za detektovanje razlike na stablima bilo potrebno 17 minuta na CPU od 1 GHz. Kako su Facebook inženjeri dalje radili na ReactJS-u, uspeli su da optimizuju algoritam kako bi prvo postigli O(n2) složenost, što je ogromno poboljšanje, ali su potom uspeli da postignu O(n) složenost korišćenjem heš mape (HashMap) DOM elemenata koji sadrže jedinstvene ključeve. Ovo je ujedno bila i fascinantna ulazna tačka u prave osnove CS-a na kojima se temelji ova divna biblioteka.
Poznavanje koraka koji se koriste za postizanje naznačene algoritamske složenosti pomaže da se objasni zašto ova biblioteka ima specifičan interfejs. Kada određuje šta da se prikaže, ReactJS se oslanja na „batch“ korak (“batch” step) i korak „orezivanja“ (“pruning” step). Ovi koraci, za koje vaša aplikacija može da ponudi nagoveštaje, upućuju na razumevanje algoritma koji dejstvuje iza kulisa. Postoji kriva učenja sa ReactJS-om u kojoj obično morate da razmenjujete podatke napred-nazad između pogleda i modela koje je Facebook napravio da on obrađuje za vas (AngularJS je revolucionirao ovaj korak). API za naznačene funkcije u ReactJS-u ima više smisla kada se razume zašto on od vas traži da date nagoveštaje u vreme kada se ova razmena odvija.
U suštini, ReactJS interfejs se razlikuje od drugih JS biblioteka koje su imperativnije, što znači da im direktno govorite kada da promene DOM. Na primer, jQuery tako funkcioniše. ReactJS je više kao: evo mog stanja, a evo kako treba da tumačite moje stanje i kako će se ono promeniti. Tako možemo da sednemo i pustimo ReactJS da se nosi sa skupim i komplikovanim zadatkom da novo stanje učini vidljivim korisniku u pretraživaču.
Probajte React
React je od samog početka dizajniran za postepeno usvajanje, i možete koristiti onoliko malo ili koliko React-a vam je potrebno. Bez obzira da li želite da probate React, dodate malo interaktivnosti na jednostavnu HTML stranicu ili pokrenete složenu aplikaciju koja pokreće React, komentari u ovom odeljku će vam pomoći da počnete.
Ako ste zainteresovani da se igrate sa React-om, možete da koristite različite kodove dostupne onlajn. Isprobajte Hello Vorld šablon na CodePen-u, CodeSandbok-u ili Stackblitz-u.
Ako više volite da koristite sopstveni uređivač teksta, možete preuzeti ovu HTML datoteku, urediti je i otvoriti je iz lokalnog sistema datoteka u vašem pretraživaču. Zbog spore transformacije koda tokom izvršavanja, preporuka je da se ovo koristi samo za jednostavnije demonstracije.
Kako vaša aplikacija raste, možete razmotriti integrisanija podešavanja. Postoji nekoliko JavaScript alata koje preporučujemo za veće aplikacije. Svaki od njih može da radi sa malo ili bez konfiguracije i omogućava vam da u potpunosti iskoristite bogati React ekosistem. O ovome će biti reči u nekom od narednih postova.
React komponenta
Od strukturnih stvari vezanih za ReactJS ostaje samo da objasnimo šta je komponenta, koje su njene osnovne vrste i kako se ona može koristiti.
React komponenta je jedan od osnovnih gradivnih blokova React aplikacija. Svaka aplikacija koju ćete razviti u React-u će biti sastavljena od delova koji se nazivaju komponente. Komponente znatno olakšavaju zadatak izgradnje korisničkog interfejsa.
Svaka komponenta vraća/renderuje neki JSX kod i definiše koji HTML kod React treba da prikaže u pravom DOM-u na kraju. JSX nije HTML, ali veoma liči na njega. U React-u uglavnom imamo dve vrste komponenti: funkcionalne komponente i komponente klase.
– Funkcionalne komponente:
Jednostavno rečeno, funkcionalne komponente su JavaScript funkcije. Pisanjem JavaScript funkcije možemo kreirati funkcionalnu komponentu u React Apps. Da bismo aplikaciju učinili efikasnom, koristimo funkcionalnu komponentu samo kada smo sigurni da naša komponenta ne zahteva interakciju sa bilo kojom drugom komponentom. Funkcionalne komponente ne zahtevaju podatke iz drugih komponenti. Evo jedan primer funkcionalne komponente u React-u:
function Title()
{
return <h1>I am Title</h1>;
}– Komponenete klase:
Komponente klase su slične funkcionalnoj komponenti, ali imaju neke dodatne karakteristike koje čine komponentu klase malo složenijom od funkcionalnih komponenti. Funkcionalne komponente ne mare za druge komponente u vašoj aplikaciji, dok komponente klase mogu da rade jedna sa drugom. Možemo preneti podatke iz jedne komponente klase u drugu komponentu klase. Primer komponente klase u React-u:
class Title extends React.Component
{
render(){
return <h1>I am Title</h1>;
}
}
Zaključak
React čini bezbolnim stvaranje interaktivnih korisničkih interfejsa. Dizajnirajte jednostavne prikaze za svako stanje u vašoj aplikaciji, a React će efikasno ažurirati i prikazati odgovarajuće komponente kada se vaši podaci promene. Deklarativni prikazi u React-u čine vaš kod predvidljivijim i lakšim za otklanjanje grešaka.
React vam omogućava povezivanje sa drugim bibliotekama i okvirima (frameworks). On takođe može da renderuje na serveru koristeći Node, ili da pokreće mobilne aplikacije upotrebljavajući React Native.
Uživajte u React-u!
