Kako je React postao jedan od najpopularnijih 'frameworkova'
WebCamp Zagreb

Kako je React postao jedan od najpopularnijih ‘frameworkova’

Naučiti raditi u novom 'frameworku' može biti izazovno, a kako bismo taj izazov svladali, nekad je potrebno dubinski istražiti kako 'framework' zapravo radi. To se najbolje može napraviti na način da ga rastavimo i raspišemo vlastite metode koje imitiraju funkcionalnosti frameworka, a ovaj smo vikend na WebCampu imali priliku vidjeti kako to izgleda s Reactom.

WebCamp Zagreb

React je danas jedan od najpopularnijih frameworkova, a developeri koji znaju raditi s njim sigurno će biti sve traženiji – vrijeme uloženo u njegovo učenje i proučavanje zasigurno će se isplatiti. 

Building a Poor Man’s React predavanje je koje je održano na kraju ovogodišnje konferencije WebCamp u Zagrebu i na kojem je Krešimir Antolić demistificirao React i pokazao kako funkcionira. Napravio je jednostavan library koji radi na sličan način kao i React i koji svatko može pogledati na GitHubu.

React se koristi kako bi se napravilo sučelje za korisnike na webu, no kada developeri prvi put vide skriptu napisanu u ovom frameworku, prvo pomisle da je to neka čudna mješavina XML-a i JavaScripta. Krešimir je iskreno rekao kako su te skripte “gadne”, ali da ujedno imaju smisla – React je postao nešto što mu se sviđa, a posebice je istaknuo jaku zajednicu koja se oko njega okuplja

Što je Krešimir napravio?

Gornja slika najbolje objašnjava React – developer ‘corniju’ daje podatke, a ‘output’ je čaroban.

Glavni princip rada u Reactu je da se developer brine o podatcima, a React će se pobrinuti za DOMKao prvi primjer, napravio je metodu kojem se može napraviti HTML element. Da bi to uspio, koristio je JavaScript metodu “document.createElement” te je postigao da se pozivanjem njegove metode može dodati klasa novom elementu i tekst koji se dodaje pomoću JavaScript metode “innerHTML”.

React traži da developeri koriste komponente koje rade odvojeno jedna od druge i često se unutar jedne komponente stvaraju potkomponente. Da bi to omogućio u njegovom libraryju, morao je omogućiti da se, osim elementa s tekstom, može stvoriti i element s podelementima. To je napravio tako da je naučio library da razlikuje kada treba koristiti “.innerHTML”, a kada treba dodati podelement, odnosno kada treba koristiti JavaScript metodu “.appendChild”. Sada se pomoću ovog libraryja mogu praviti komponente koje imaju potkomponente.

React radi tako da se sva logika aplikacije sprema u komponente, a da bi se to moglo postići pomoću njegovog libraryja, napravio je metodu s imenom “setState”. Kao drugi primjer, napravio je element s dva podelementa koji su slike cornija te je omogućio da se klikom na jednog od njih promijeni varijabla koja predstavlja stanje svake potkomponente.

Kada se promijeni stanje jedne komponente, potrebno ju je rerenderirati, ali to se nikako ne smije napraviti s cijelim DOM-om. Zato je predstavio virtualni DOM i virtualne elemente.

Prilikom promjene stanja, izgradit će novi virtualni DOM i usporediti ga sa starim i tako će library znati što treba izmijeniti. Isto tako radi i React i to je razlog za brzinu njegovu frameworka.

Dobar framework čine njegova promišljenost, ali i dobra zajednica

Popularnost, dobar community i promišljenost frameworka samo su neki od razloga zašto developeri sve više koriste React i zašto je njegovo poznavanje sve više i više traženo na tržištu rada, a taj trend sigurno neće u dogledno vrijeme prestati. Naučiti raditi s Reactom može koristiti svakom developeru, a zbog predavača poput Krešimira možemo naučiti i kako React radi.

Ako vas zanima React, zavirite u službenu dokumentaciju, a svakako pogledajte i Krešimirov GitHub.

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Startupi i poslovanje

Nemojte se ugledati na ‘lifestyle’, ‘hustle’ i Instagram poduzetnike koji ne kuže biznis (osim onih koji kuže)

Toksična pozitivnost i poslovna naivnost mogu biti katastrofalna kombinacija u doba ekonomske krize. Je li vrijeme da unfollowate sve lifestyle poduzetnike i motivirajuće Instagram profile?

Kultura 2.0

Prva prepreka za elektroničko glasanje je digitalna nepismenost

Kako je situacija s pandemijom koronavirusa digitalizirala i digitalno transformirala dobar dio i privatnog i javnog sektora, aktualiziralo se i pitanje o elektroničkom glasanju. O temi spremnosti na taj oblik glasanja, i s tehnološke i društvene strane, razgovarala sam s osobom koja je razvila jedan takav sustav, Ivanom Hendijom iz FairVotesa.

Kultura 2.0

Kako igrifikacijom poboljšati izlaznost na hrvatskim parlamentarnim izborima?

Čak i prekrižiti listić je bolje nego uopće ne izaći na izbore, a opet, mnogim hrvatskim građanima se za naredne 4 godine ne da izdvojiti ni tih 20-ak minuta na biračkim mjestima. I to je posve razumljivo ako pogledamo da biračima izbori ne nude nikakvu opipljivu nagradu... ako ne potporom za stranke koje će voditi državu u budućnosti, čime nas se onda može motivirati?

Što ste propustili

Intervju

Wirecard je potonuo, je li za sobom povukao Revolut, druge fintechove i – vaše novce?

Hoće li pad Wirecarda značiti gubitak povjerenja korisnika u fintech svijet?

Startupi i poslovanje

Ovo je potpuni plan za sav sadržaj koji uspješan webshop mora imati!

Sadržaj je ključni faktor zbog kojeg korisnici dolaze interaktirati s vašim brendom. Sadržaj je kralj, a eCommerce tu nije iznimka. Od poslovnog plana, općeg sadržaja i opisa proizvoda, ovo su stavke koje svaki uspješan webshop mora pokriti.

Tehnologija

Tenisice, ruž, naočale… Kad ih već ne možemo isprobati u trgovini, zašto ne bismo virtualno?

Unatoč razvoju online prodaje, fizičke trgovine zadržale su svoju glavnu prednost - mogućnost da kupac sam isproba željene proizvode. No, nakon što su se trgovine diljem svijeta zatvorile zbog pandemije, porasla je popularnost virtualnog isprobavanja proizvoda koje pokušava donekle nadomjestiti korisničko iskustvo na kakvo smo navikli u tradicionalnim trgovinama.

Intervju

Nakon investicije od više od 50.000 eura, najveća regionalna CS:GO zajednica, CSadria, postala Esport Adria

Ovaj novi brend okupit će gamere i fanove ne samo esport igara, već i mobilnih i drugih igara koje igra mnogo veći broj ljudi.

Startupi i poslovanje

Email marketing u doba “korone”: 3 greške i 3 trika za bolju učinkovitost

Pomno pripremate i šaljete newslettere, ali učinka nema? Uz Brunu Zagorščaka iz agencije Neuralab, nedavno certificiranog Mailchimp partnera, prolazimo osnovne pogreške i taktike email marketinga.

Tehnologija

S Omoguru widgetom ne čitaju lakše samo disleksičari, već svi mi koji u ekrane buljimo svakodnevno

Za osobe koje imaju poteškoće u čitanju Omoguru je dar s neba, a odnedavno im je njihov alat još dostupniji. Radi se o widgetu koji gotovo svaku stranicu može učiniti čitljivijom.