React JS

‍Kas ir React?

React JS ir atvērtā pirmkoda (open-source) JavaScript bibliotēka, kas tiek izmantota, lai izveidotu lietotāju saskarni (user interface) gan priekš tīmekļa (web), gan mobilajām lietotnēm. React ir ātrs, mērogojams, elastīgs, jaudīgs un tam ir nemitīgi augoša kopiena. React pamatsastāvdaļas ir JSX (JavaScript XML, kas ļauj izmantot HTML iekš React), klases un funkciju komponentes, props (latviskojot rekvizīti), state (stāvokļi), lifecycle methods (cikla metodes), and hooks (āķi). Pārzinot šos, Tu varēsi izveidot savu lietotāju saskarni. React ļauj izstrādātājiem izveidot lielas tīmekļa lietotnes, kurās var mainīt datus, nepārlādējot lapu. To var izmantot kopā ar citām JavaScript bibliotēkām vai ietvarstruktūrām, piemēram, Angular vai ASP.NET MVC.

‍Kā radās React?

React tika izveidots 2011. gadā priekš Facebook vajadzībām. Pēc gada to sāka izmantot Instagram. Pēc tam, kad Facebook jau divus gadus iekšēji izmantoja React, 2013. gadā Facebook publiskoja React. Sākotnēji daļa to noraidīja, jo React bija pretrunā ar vispārpieņemtām praksē. Taču ar laiku lietotāji pieņēma jauno, uz komponentēm orientēto filozofiju. Ar laiku React popularitāte ievērojami pieauga, un to sāka lietot daudzi ievērojami uzņēmumi ārpus Facebook, piemēram Amazon, Airbnb, PayPal un Netflix. Drīz vien tika radīts arī React Native - tā ir saistīta bibliotēka, kas ļauj izveidot mobilās lietotnes. Vēl joprojām pastāv Facebook React izstrādes komanda, kura regulāri publicē kļūdu labojumus, uzlabojumus, bloga ierakstus un dokumentāciju. Pašlaik tiek gaidīta jau 18. React versija.

‍

Kādas ir React JS priekšrocības?

Viena no React galvenajām priekšrocībām ir tā elastīgums. Ar to ir iespējams veidot lietotāju saskarnes dažādām platformām un vajadzībām. Daļēji tas ir skaidrojams ar to, ka React ir bibliotēka, nevis ietvars. Tas nozīmē, ka, lai sasniegtu visus vēlamos mērķus ar React, Tev ir papildu jāpieliek sev nepieciešamie rīki. Šī iemesla dēļ ar React var izveidot tīmekļa lietojumprogrammu komponentes un statiskas vietnes, izmantojot tādus rīkus kā Gatsby un Phenomic (mobilās lietojumprogrammas izmantojot React Native). Izmantojot tādus rīkus kā Electron, Tu vari izveidot instalējamas darbvirsmas lietojumprogrammas, kas darbojas Mac un Windows operētājsistēmās. React atbalsta arī servera atveidošanu jau gatavā versijā, un populāri ietvari, piemēram, Next.js, ļauj to patiešām viegli iestatīt. Īsumā, iemācaties React vienu reizi, un varēsi rakstīt lietojumprogrammas gandrīz visur. Vairāk par to, ko var paveikt ar React, atradīsi šeit: https://github.com/chentsulin/awesome-react-renderer .

Sākot lietot React, iespējams pamazām aizstāt loģiku esošās lietotnēs, kas tiek renderēta servisa pusē. Tieši šādi Facebook integrēja React - Facebook izmantoja React, lai pamazām aizstātu servera pusē renderētu PHP lietojumprogrammu. Iespējams sākt ar mazām lapas daļām, pēc tam pāriet uz nedaudz lielākām, un galu galā pārbūvēt visu lapu, lēnām aizstājot lielākas daļas ar React. Tas ir zema riska veids, kā migrēt esošo lietojumprogrammu uz React vai izmantot React vietās, kur tas ir visvērtīgākais.

Iespējams šobrīd izklausās, ka React ir sarežģīts, bet patiesībā ir tieši pretēji - React ir iekarojis savas pozīcijas dēļ tā, ka tas ir vieli apgūstams un vienkārš. Apskatīsim piemēru,  kuram būtu jābūt JS failā.

Ar šo pietiek, lai izvadītu: Hello, User!

Mēs izmantojam standarta JavaScript funkciju, kas atgriež to, kas izskatās kā HTML.

Funkcija saņem mainīgo, izmantojot objektu, ko sauc par props. React komponentes var deklarēt arī, izmantojot standarta JavaScript klases. Tagad Tu prāto, kas notiek šajā renderēšanas funkcijā - tas izskatās kā HTML, bet atrodas JavaScript failā. Kā tas darbojas? To sauc par JSX. Tagad JSX tiek kompilēts līdz JavaScript un tas kļūst par ReactDOM.render izsaukumu.

Tradicionālie ietvari, piemēram, Angular, Vue un Ember, cenšas uzlabot HTML iespējas, izgudrojot savu sintaksi tādām vienkāršām operācijām kā cilpu veidošana. Piemēram, Angular programmā Tu saki “*ngFor=let user of users"”. Lietotnē Vue saki “v-for="user in users"”, bet lietotnē Ember - “#each user in users”. React tas notiek citādāk - tā vietā, lai mēģinātu HTML padarīt jaudīgāku, React vienkārši apstrādā HTML ar JavaScript. Tev nav jāmācās jauni, tikai kādam konkrētam ietvaram raksturīgi atslēgvārdi, noteikumi un sintakses nosacījumi, cilpas un tamlīdzīgi. Vienkārši izmanto JavaScript - tur jau ir iebūvēta funkcija masīva iterēšanai, ko sauc par map. Būtībā tradicionālās bibliotēkas un ietvari HTML iestrādā viltus JavaScript, bet React dara tieši pretējo. React mudina Tevi labāk apgūt JavaScript, un, to darot, Tu apgūsti arī React.

React tiek padarīts elastīgs, pateicoties tā atomārajām komponentēm. Tas nozīmē, ka ar katru komponentu var strādāt izolēti - katru reizi, kad tiek saglabātas izmaiņas, tās nekavējoties tiek atspoguļotas pārlūkprogrammā.

Runājot par React, bieži vien tiek pieminēts Facebook un savā ziņā tas ir ļoti labi - kamēr pastāvēs Facebook, tikmēr React tiks uzturēts un uzlabots. Facebook izstrādes komanda uztur aktīvu blogu, kurā pastāvīgi tiek izklāstītas katras versijas detaļas un nākotnes plāni. Tā kā Facebook ir cieši apņēmies nodrošināt React lietošanu ražošanā, kad React tiek veiktas izmaiņas, Facebook konsekventi nodrošina kodēšanas moduli, kas automatizē izmaiņas - codemod (https://github.com/reactjs/react-codemod). Tādējādi, izmantojot React codemod, Tu vari automātiski atjaunināt vecākās React komponentes atbilstoši jaunākajām specifikācijām. Šodien, rakstot React komponentes, varam justies droši. Facebook lielais ieguldījums React kodā nozīmē, ka viņiem ir jāpaļaujas uz codemod, ko viņi paši rada, lai atjauninātu savu kodu un Codemods pastāv tāpēc, ka tas ir nepieciešams Facebook. Facebook pārvaldībā ir vairāk nekā 50 000 komponentes - tā ir React izmantošanas priekšrocība. Ir maz ticami, ka nākotnē būs būtiskas izmaiņas, kas varētu radīt traucējumus esošajā React kodā. Tas palīdz nodrošināt projekta ilgtermiņa stabilitāti.

Kā jau iepriekš minējām, React kopiena ātri aug, tā ir aktīva un tas ir vēl viens iemesls, kas liek iemīlēt React. Pašlaik React ir viena no populārākajām GitHub krātuvēm (https://gitstar-ranking.com/). Šī ieraksta laikā React npm pakete katru nedēļu tiek lejupielādēta vairāk nekā 12 miljonus reižu (https://www.npmjs.com/package/react). Vietnē StackShare, kurā uzņēmumi var dalīties ar savām izmantotajām tehnoloģijām, vairāk nekā 10000 uzņēmumu ir ziņojuši, ka izmanto React (https://stackshare.io/react). Un vietnē Stack Overflow ir vairāk nekā 351000 jautājumu ar birku ReactJS. Tas nozīmē, ka ir iespējams atrast gandrīz jebkurua sev interesējoša koda piemēru tiešsaistē. Ir pieejamas arī ļoti daudz gatavas komponentes un bibliotēkas, ko vari izmantot savā kodā (https://github.com/brillout/awesome-react-components). Ja patīk Microsoft Office, vari lietot komponenšu bibliotēku - MUI, kas ļaus pēc izskata radīt kaut ko ļoti līdzīgu (https://mui.com/getting-started/faq/).

Vēl viens React pluss ir performance - kad tas pirmo reizi tika izlaists, tā veiktspēja bija pārsteidzoša un palīdzēja to atšķirt no konkurentiem. React komanda atzina, ka JavaScript ir ātrs, bet DOM (Dokumenta objekta modelis) ir tas, kas to padara lēnu. Viņi saprata, ka DOM atjaunināšana ir dārga un konstatēja, ka DOM atjaunināšana visefektīvākajā veidā palīdzētu uzlabot veiktspēju. Tāpēc aizkulisēs, mainot datus, React inteliģenti nosaka visefektīvāko veidu, kā atjaunināt DOM. Kad pirms vairākiem gadiem tika radīta React, šis bija jauns dizains, kas daudzos gadījumos nodrošināja React ievērojamu veiktspējas priekšrocību. Pirms React vairums bibliotēku neinteliģenti atjaunināja DOM, lai atspoguļotu jauno stāvokli. Tas bieži noveda pie ievērojamas lapas daļas pārzīmēšanas pat tad, ja bija notikušas tikai nelielas izmaiņas. Turpretī React uzrauga katra komponenta stāvokļa vērtības - kad mainās komponenta stāvoklis, React salīdzina esošo DOM stāvokli ar to, kādam jābūt jaunajam DOM stāvoklim. Pēc tam tiek noteikts vislētākais veids, kā atjaunināt DOM. Tas izklausās sarežģīti, taču viss tiek veikts automātiski aizkulisēs. Un šī pieeja sniedz vairākas priekšrocības - tā palīdz izvairīties no izkārtojuma sagrūšanas, kad, mainoties DOM elementam, pārlūkprogrammai ir jāpārrēķina visu elementu pozīcijas. Pasaulē, kurā daudzi cilvēki izmanto mobilās ierīces, efektivitāte kļūst arvien svarīgāka. Mobilo ierīču procesora jauda ir ļoti atšķirīga, un svarīgi ir saglabāt arī akumulatora darbības laiku. Tas arī ļauj izmantot React vienkāršo programmēšanas modeli. Kad mainās dati, React efektīvi un automātiski atjaunina DOM. Kad atjaunini sastāvdaļas stāvokli, tas notiek automātiski. Salīdzināšana notiek atmiņā, tāpēc tas notiek ļoti ātri. Mūsdienās dažādas citas bibliotēkas izmanto līdzīgu pieeju, taču React veiktspēja joprojām ir diezgan konkurētspējīga. Protams, arī bibliotēkas lielums ietekmē veiktspēju.

Programmēšanā nozīmīgu lomu ieņem ne tikai koda rakstīšana, bet arī kode testēšana. React oficiālajā mājslapā ieteiktie testēšanas rīki ir Jest (https://jestjs.io/) un React testēšanas bibliotēka (https://testing-library.com/docs/react-testing-library/intro/). Jest ir JavaScript testu rīks, kas ļauj piekļūt DOM, izmantojot jsdom. Lai gan jsdom ir tikai aptuvens pārlūka darbības modelis, tas bieži vien ir pietiekami labs React komponentu testēšanai. Jest nodrošina lielu iterācijas ātrumu apvienojumā ar dažādiem rīkiem, kas ļauj kontrolēti un izolēti notestēt nepieciešamo loģiku. React testēšanas bibliotēka ir palīgu kopums, kas ļauj testēt React komponentes, bet tas nenodrošina tādu testu izolāciju, kā to dara Jest.

‍

Kas jāņem vērā, ja esi nolēmis lietot React.

React ir tikai bibliotēka, nevis pilnībā patstāvīgs ietvars. Tādiem kā Vue JS un Angular nav tik daudz iespēju, kā arī ir skaidri pozicionēti viedokļi par to, kas un kādās situācijās ir labāks, tas nozīmē, ka ir daudz vieglāk pieņemt lēmumu, ko un kā darīt. Ar React tā īsti nav, ja nu vienīgi tiek izmantotas sagataves (boiler plates), piemēram, create‑react‑app. Ar React ir arī grūtāk ievērot konsistensi, jo visu laiku ir jāpieņem daudz dažādi lēmumi. Bet arī bibliotēkām ir savas priekšrocības - tās ir daudz mazākas, ātrākas un vieglāk integrējamas. Piemēram, Tu vari iekļaut React komponenti jau esošā projektā, neatkarīgi no tā, vai tas būtu .NET, Java, Ruby, PHP vai Python projekts. Tieši šadā veidā Facebook pārgāja no servera puses renderētas PHP lietojumprogrammas uz React. Tā kā React ir koncentrēta komponenšu bibliotēka, tad pašā React nav iestrādātas daudz un dažādas funkcijas, kā tas ir Angular vai citos ietvaros. Tas nozīmē, ka Tev būs vēl atsevišķi jāpieliek klāt nepieciešamās funkcijas, lai pilnībā sasniegtu savus mērķus ar React. Kā arī projektā nebūs nekā lieka - tikai tas, ko Tu izmanto.

React pamatā nav nepārprotamība un paredzamība, bet gan kodolīgums. Tev manuāli būs jāsavieno dažādas komponentes, bet tajā pašā laikā tās būs stabilas un Tu zināsi, kas par ko atbild. Tādi ietvari kā Knockout un Angular popularizēja divvirzienu sasaisti kā veidu, kā izvairīties no rakstīšanas, automātiski sinhronizējot veidlapas ievades ar pamatā esošajiem datiem. Šī pieeja bija ļoti populāra, līdz parādījās React. Izmantojot divvirzienu sasaisti, JavaScript vērtības un ievades tiek automātiski sinhronizētas. Turpretī React izmanto vienvirziena sasaisti un tā prasa nedaudz vairāk koda. Izmantojot React, Tu deklarējat nepārprotamu izmaiņu apstrādātāju un atsauciet uz to savā ievadē. Šim papildu darbam ir dažas priekšrocības - Tev ir lielāka kontrole, jo vari precīzi deklarēt, kas notiks katrā notikumā. Tas nozīmē, ka vari pārveidot un pārbaudīt ievades datus pirms stāvokļa atjaunināšanas un pēc vajadzības veikt veiktspējas optimizāciju. React prasa vairāk rakstīšanas, lai to īstenotu, nekā tradicionālās divvirzienu sasaistes pieejas, taču ieguvums ir vieglāka uzturēšana, lielāka skaidrība, uzticamība un veiktspēja.

React sastāv no patstāvīgām un izolētām komponentēm un tas nozīmē, ka komponentes loģika un HTML elementi tiek definēti vienā failā. Piemēram, ASP.NET sastāv no 3 lieliem modeļiem, kur atsevišķi ir visi skati, loģika (kontrolieri, kas kontrolē mijiedarbību ar modeļiem) un modeļi (dati priekš skata).

Daudzi populāri atvērtā koda JavaScript projekti ir kopienas virzīti. React ir atvērtā koda projekts, bet to atbalsta un aktīvi uztur Facebook. Tas nozīmē, ka React tiek veidots saskaņā ar Facebook vajadzībām. Tāpēc, ja Tavas lietojumprogrammas krasi atšķiras no tām, ko veido Facebook, React var nebūt ideāli piemērots Tavām vajadzībām. Taču React korporatīvais atbalsts sniedz acīmredzamas priekšrocības - Facebook nodrošina React pilnas slodzes izstrādes personālu, kas rūpīgi plāno jaunās versijas, raksta dokumentāciju un bloga ierakstus, kā arī nodrošina pastāvīgu atbalstu problēmu risināšanai GitHub un bieži pat sociālajos plašsaziņas līdzekļos. Neatkarīgi no tā, ka React pārsvarā izstrādā un uztur Facebook darbinieki, aktīvi iesaistās arī daudzi interesanti, kas React kopienu padara dinamisku.

‍

Nav tā, ka React ir perfekts. Ir lietas, kas to  padara mazāk pievielcīgu.

React izmanto JSX, kas ir ļoti līdzīgs, bet ne identisks HTML. Ir dažas atsķirības, kas ir jāņem vērā, piemēram, htmlFor vietā tiek lietots for un className vietā - class. Kā arī HTML elementi iekš JSX tiek rakstīti, izmantojot camelCase, piemēram, “onclick” kļūst par “onClick”, bet “onmouseover” par - “onMouseOver”. Lai lietotu JS iekš JSX, pietiek vien ar { Tavs kods }, bet iekš HTML ir jāpievieno papildu <script> birka un tikai tad ir iespējams izmantot JS. Patiesībā šo pat nevar uzskatīt par īstu apgrūtinājumu, jo ir pieejami tiešsaistes kompilatori un npm pakas, kuras pārvēš HTML par JSX.

Iepriekš minējām, ka tiešaistē var atrast jau gatavus koda paraugus, kā arī informāciju par dažādām papildu bibliotēkām, kuras var izmantot, strādājot ar React. Tika minēts arī, ka React plašākai sabiedrībai ir pieejams jau no 2013. gada, tas nozīmē, ka ne viss, ko ir iespējams atrast tiešaistē vēl ir aktuāls - liela daļa informācijas var būt novecojusi. Šī iemesla dēļ var nākties biežāk lasīt React dokumentāciju.

Par vēl vienu apgrūtinājumu var uzskatīt nepieciešamību regulāri pieņemt lēmumus par to, kādas papildus bibliotēkas ir nepieciešamas. Protams, ir iespējams arī atrast gana daudz ieteikumus, ko labāk izvēlēties. Piemēram, lai sāktu veidot React lietotni, var pats veidot savu vidi vai arī izmantot create-react-app (https://create-react-app.dev/), kas ir oficiālā izstrādes vide, kuru atbalsta Facebook.

Kā deklarēt komponentes - izmantojot klases vai funkcijas? Ar abām pieejām var panākt vienu un to pašu, un katram ir savi plusi, par ko ir iespējams izlasīt vairākos blogos.

React tiek regulāri atjaunināts un drīzumā gaidāma jau 18. versija - kad jaunā versija būs izlaista, tajā būs ietverti uzlabojumi, kas tiks ieviesti jau sākotnēji (piemēram, automātiskā pakešu veidošana), jaunas API (piemēram, startTransition) un jauns straumēšanas servera renderētājs ar iebūvētu React.lazy atbalstu.

Šīs funkcijas ir iespējamas, pateicoties jaunam izvēles mehānismam. To sauc par "vienlaicīgu renderēšanu", un tas ļauj React vienlaicīgi sagatavot vairākas lietotāja saskarnes. Šīs izmaiņas lielākoties notiek aizkulisēs, taču tās paver jaunas iespējas, lai uzlabotu gan reālo, gan šķietamo lietotnes veiktspēju. React apgalvo, ka eksistējošām aplikācijām nebūs grūtību pāriet uz jaunāko versiju un to varēšot izdarīt vien dažu stundu laikā. Vairāk par to var lasīt https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html.

Ja esi nolēmis izmēģināt React, to vari darīt dažādās tiešsaistes platformās, piemēram, CodePen, CodeSandbox vai Stackblitz un tiešsaistes kursos  https://reactjs.org/community/courses.html .

Taču, ja vēlies React apgūt padziļināti un profesionāli, gaidīsim Tevi Codelex kursos!

Šeit tika apkopta tikai neliela informācija par React, lai uzzinātu vairāk, ieskaties diskusiju forumos https://reactjs.org/community/support.html