ReactJS - Prvi koraci

Prethodno popularne biblioteke: jQuery

Iako zanimljiv i veoma koristan, sintaksa JS-a nije bila jednostavna za učenje, pa su developeri probali da tu sintaksu pojednostave i učine lakšom - ne samo za učenje, nego i za korišćenje. Jedna od prvih, masovno popularnih biblioteka je bila jQuery. Naročito je bio popularan medju dizajnerima, koji su zahvaljujući jednodstavnijoj sintaksi, uz minimalan napor i učenje postizali zadovoljavajuće rezultate.

Vanilla JS:

var demo = document.getElementById(“demo”);

jQuery:

var demo = $(‘#demo’);

“Single page” web aplikacije

Sa ciljem smanjenja vremena učitavanja web strane, krenuo je i trend Single Page aplikacija, koji je podrazumevao učitavanje cele web strane sa svim njegovim stranama i sekcijama u jedan HTML dokument. U početku je ceo sadržaj bio vidljiv, i navigacija u glavnom meniju bi samo “scroll”-ovala korisnika na dno strane (npr., kada bi kliknuo na “kontakt”). Čak su kreativci sa akcijom scrollovanja napravili različite efekte sa providnim fotografijama, na ovaj način kreirajući vrlo interesantno iskustvo.

Kasnijim razvojem biblioteka za JS smo dobili i kompletno iskustvo navigacije:  sakrivanje strane na kojoj smo i prikazivanje strane čiji smo link kliknuli, samo mnogo brže i efikasnije u poređenju sa standardnim učitavanjem svake strane posebno i svih njenih pratećih fajlova (kojih može poprilično: stilovi, js, fotografije, i sl)

Server side: NodeJS i Mobile JS

Danas, JS nije namenjen samo poboljšavanju interaktivnosti web strane, već su to kompletne aplikacije, koje mogu raditi na serverima kao API ili različiti servisi (NodeJS) ili čak kao mobilne aplikacije, i za Android i za iOS (React Native).

Savremeni JS - ES5+

Popularnost jQuery-ja nam je pokazala da ljudima više odgovara ako je jezik lakši i pristupačniji, kao i da to dramatično utiče na popularnost jezika. Zato je Ecma International nastavila da unapredjuje JS sintaksu, i do sada su usvojili nekoliko novih standarda, koji su doneli jednostavniju i efikasniju sintaksu.

Standard za JS se zove ECMAScript i neki od njih su:

• ES6 ili ES2015: ECMAScript 2015 (Jun 2015)
• ES7 ili ES2016: ECMAScript 2016 (Jun 2016)
• ES8 ili ES2017: ECMAScript 2016 (Jun 2017)
• ES9 ili ES2018: ECMAScript 2016 (Jun 2018)

Nove verzije sintakse se usvajaju svake godine (pa i prošle), ali od trenutka usvajanja do primene u praksi je potrebno da prođe neko vreme. Razlog ovom su implementacije podrške konkretne verzije u browser-ima, kao i popularizacija i primena od strane developera.

Primeri sintakse:

• VanillaJS

function greetings (name) {

return ‘hello ‘ + name

}

• ES6

const greetings = (name) => {

 return ``hello ${name}``;

}

• ES7 const

greetings = name => ``hello ${name}``;

Šta je ReactJS?

ReactJS je JS biblioteka, bazirana na savremenoj sintaksi ES6 i novije, namenjena generisanju korisničkog interfejsa (UI). Razvijen je prvobitno u Facebook-u, 2012, sa ciljem kreiranja alata koji bi im olakšao menadžment Facebook Ads-a. 2013. promenili su licencu ReactJS-a u OpenSource, što je u velikoj meri ubrzalo njegovu popularnost i njegov razvoj.

ReactJS alternative

Naravno, ReactJS nije jedina JS biblioteka. Neke od njih su i obimnije i kompleksnije po strukturi i mogućnostima, tako da svaka firma i svaki developer uzimaju u obzir nekoliko karakteristika kada se odlučuju koju JS da koriste.

Koliko je popularan ReactJS?

Sudeći po broju otvorenih pozicija na oglasima za posao iz decembra 2019, ReactJS je jedan do 3 najpopularnija JS frameworka/biblioteke:

• ReactJS - 44.3%
• AngularJS - 29.4%
• jQuery - 19.7%
• VueJS - 6.6

Osnovni elementi ReactJS-a

Struktura ReactJS je bazirana na komponentama, poput malih puzzle slagalica. Svaka od komponenti može biti minimalna i maksimalno jednostavna, poput input polja ili dugmeta, tzv “Functional” komponenta, ali takođe može u sebi objediniti i veliki broj komponenti i tako graditi složenu strukturu.

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

Ovo je detaljno objašnjeno i u “Atomic Design” procesu.

Kao osnovna gradivna celina, komponenta poseduje sledeće karakteristike:

“Lifecycle” metode - funkcije:

Funkcije koje se dešavaju prilikom inicijalizacije komponente, npr. i služe nam da prosledimo određene podatke ili da primenimo drugačiji stil na toj komponenti.

Stanje u komponenti:

Stanje u komponenti se ogleda u posedovanju varijabli, vidljivih samo u lokalnom scope-u aktivne komponente. Ovo može biti string koji će biti u dugmetu ili boja pozadine, ‘default’-na vrednost input polja i sl. 

Svaka promena vrednosti varijabli koje su u state-u pokrenuće ponovno renderovanje te komponente, tako da će promene odmah biti vidljive.

Nasleđeni atributi - props

Obzirom da neke od vrednosti lokalnih varijabli moramo nekad da prosledimo u njene podkomponente, potreban nam je način kako to možemo da uradimo. Props ili atributi komponente su custom defined karakteristike komponente koje mi definišemo, a kojima kasnije možemo pristupiti prilikom pozivanja te komponente.

U ovom primeru, name je custom property koja smo mi definisali pri kreiranju Welcome komponente.

JSX format - Javascript XML

JSX je template format sintakse koji na jednostavan način spaja HMTL sa JS, bez potrebe korišćenja komplikovanog koda spajanja varijabli i HTML-a (što je u JS-u statičan string).

Primer iz VanilaJS-a:

var html = ‘<div><h1>Hello ’ + userName + ’!</h1><h2>Good to see you here.</h2></div>

JSX za isti kod bi izgledao ovako:

const element = ( <div> <h1>Hello {userName}!</h1> <h2>Good to see you here.</h2> </div> );

Složićemo se da je jednostavnije.

Virtual DOM**

Šta je DOM? DOM ili Document Object Model - predstavlja reprezentaciju HTML strukture jedne strane (koja je originalno string) u RAM-u organizovanu u strukturu čvorova - nods.

Pretraživanje i manipulacija DOM-a uglavnom može biti skupa i spora operacija, jer DOM može da sadrži ogroman broj nodova (HTML elemenata) na strani. Pristup svakom od njih u JSu zato nekad može da zablokira ne samu stranu u browser-u nego i čitav računar, ako se ne tretira pažljivo.

Virtual Dom je programski koncept gde se “virtuelni” DOM čuva u radnoj memoriji (RAM) i sinhronizuje za “pravim” DOM-om u biblioteci ReactDOM u procesu zvanom Reconciliation (pomirenje). Ovo nam donosi nekoliko benefita, a najveći je brzina renderovanja strane i njenih elemenata.

Ukratko, process izgleda ovako: - prilikom svakog promena stanja komponente pokreće se re-rendering te komponente - koristeći VirtualDOM, svaka komponenta upoređuje svoje novo stanje sa prethodnim i po potrebi, ponovo se renderuje. Ako je stanje identično, re-render process se preskače.

Kada ne bismo koristili VirtualDOM, cela strana i sve njene komponente bi se renderovale svaki put pri najmanjoj promeni.

Protok podataka i događaja u ReactJS-u

Prosleđivanje podataka u komponentama ide u smeru ka dole: - osnovna komponenta prosleđuje podatke svojim kompomentama koristeći props - svaka od podkomponenti, prilikom dobijanja novih property-ja iste prosledi svojim podkomponentama - isti proces se ponavlja dokle god postoje podkompomente.

Sa druge strane, interakcija sa određenom komponentom (npr. dugmetom) će proizvesti event u komponenti koja je poslednja u nizu ili na dnu hijerarhije. Kada se to desi, event se može proslediti svojoj nadređenoj komponenti.

DEMO

Kreirali smo za vas mali primer kako ReactJS aplikacija može da izgleda: https://codesandbox.io/s/semos-education-reactjs-prvi-koraci-i5mzo

Ovde možete kreirati i svoju komponentu i testirati kako RectJS struktura i sintaksa izgledaju.

Happy coding! 😊

Autor: Predrag Jevtić