Prvi koraci: ReactJS - #UčiOdKuće

ReactJS - Prvi koraci

reactghost

Još od samih početaka interneta, JavaScript (JS) je bio jedan od ključnih elemenata u kreiranju korisničkog iskustva. Zahvaljujući JS-u, prethodno statične i dosadne strane bi postale žive i interaktivne, što je dramatično menjalo korisničko iskustvo i donosilo popularnost web strani.

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.

react1

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.

react2

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.

react3

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.

dom

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.

reacthierarchy

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ć

Bonus: Kuda dalje?

Inicijativa #DigitalnaSolidarnost

Za vreme trajanje pandemije Covid-19, Semos Education će držati besplatna predavanja u okviru projekta Kancelarije za IT i eUpravu Vlade Republike Srbije pod nazivom Digitalna Solidarnost.

Kalendar besplatnih obuka možete pronaći na sledećem linku.

Redovna ReactJS obuka

Za vreme trajanje pandemije Covid-19, Semos Education održava sve obuke isključivo putem virtuelnih učionica. 

Više o redovnoj React obuci možete pronaći ovde.

  • Možete izabrati bilo koju temu koja Vas zanima, sve obuke su apsolutno prilagođene online načinu izvođenja
  • Možete slušati obuke iz udobnosti Vašeg doma, ili sa bilo koje lokacije po Vašem izboru
  • Datumi su zagarantovani, uz mogućnost fleksibilnijeg održavanja treninga prema Vašim zahtevima
  • Trening se odvija uživo, uz potpunu interakciju sa trenerom i grupom
  • Naši treneri su završili posebnu obuku za održavanje obuka u virtuelnom okruženju
  • Lab-ovi su Vam dostupni 24h/7
  • Potrebna Vam je samo osnovna oprema - računar i internet konekcija