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.

ponuda

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Video

Svi su gubitnici u bitci za i protiv paušalnih obrta: Tvrtke, radnici – i sami “paušalci”

Zato što se IT scena razjedinila oko teme paušalnih obrta, zato će svi iz nje izaći i poraženi. No, koja je perspektiva svih uključenih strana? Ivan i ja smo provjerili u drugoj epizodi Netokracija Podcasta.

SEO i tražilice

Velika analiza online sadržaja o cijepljenju pokazuje da HZJZ olakšava posao – antivakserima

SEO koji život znači. To bi mogao biti alternativni naslov ove analize, iako ovdje nije riječ o samoj optimizaciji sadržaja za tražilice, nego optimizaciji za - korisnika. Jer u vrijeme kad procijepljenost pada, optimiziran i korisniku prilagođen sadržaj na stranicama HZJZ-a i drugih zdravstvenih institucija mogao bi doista značiti razliku između života i smrti.

Startupi i poslovanje

Hubbig Dragane Lipovac kreće u nove pobjede s milijunskom investicijom i novom savjetnicom

Bili vi mali ili veliki uvoznik, naručivali iz Kine ili SAD-a, Hubbig vam može olakšati život, a da to ovom mladom startupu ide dobro potvrdila je i nedavna milijunska investicija koju je orkestrirala Monika Mikac, bivša operativna direktorica u Rimac Automobilima.

Što ste propustili

Vodič

Što je esport i zašto bi vas za njega trebalo biti briga?

Čuli ste za esport, ali samo u prolazu? Ne brinite, na jednom mjestu donosimo sve važne informacije o ovom globalnim fenomenu koji danas prati više od 400 milijuna ljudi.

SEO i tražilice

Velika analiza online sadržaja o cijepljenju pokazuje da HZJZ olakšava posao – antivakserima

SEO koji život znači. To bi mogao biti alternativni naslov ove analize, iako ovdje nije riječ o samoj optimizaciji sadržaja za tražilice, nego optimizaciji za - korisnika. Jer u vrijeme kad procijepljenost pada, optimiziran i korisniku prilagođen sadržaj na stranicama HZJZ-a i drugih zdravstvenih institucija mogao bi doista značiti razliku između života i smrti.

Internet marketing

Prvi Euro Effie za hrvatsku agenciju! Imago Ogilvy nagrađen za kampanju Boranka

Sinoć su u Bruxellesu dodijeljene najprestižnije europske nagrade za marketinšku učinkovitost – Euro Effie. Zlatna Effie nagrada po prvi put pristiže i u Hrvatsku, zahvaljujući reklamnoj agenciji Imago i kampanji Boranka, osmišljenoj za Savez izviđača Hrvatske.

Kultura 2.0

Formalno obrazovanje, neformalni klub: Čemu kultni KSET već 43 godine uči svoje članove?

Što znači sudjelovati u nečem većem od nas samih? KSET je klub koji je u odajama bivše kotlovnice okupio desetke generacija, dajući im prostor da šire svoje vidike kroz nova poznanstva, hobije i aktivnosti. Ususret Tech Consultant meetupu u KSET-u otkrivamo što studentima to iskustvo zapravo donosi u profesionalnom smislu.

Izrada web stranica

Novi Tomato web: Poslovni ciljevi, korisničke potrebe i agile, ruku pod ruku

Na ovogodišnjoj dodjeli nagrada SoMo Borac najboljim web projektom u protekloj godini proglašen je redizajn web stranice Tomato.com.hr, koji su za A1 razvili Netgen i Locastic u suradnji s OptimIT-om i CROZ-om.

Video

Svi su gubitnici u bitci za i protiv paušalnih obrta: Tvrtke, radnici – i sami “paušalci”

Zato što se IT scena razjedinila oko teme paušalnih obrta, zato će svi iz nje izaći i poraženi. No, koja je perspektiva svih uključenih strana? Ivan i ja smo provjerili u drugoj epizodi Netokracija Podcasta.