Разумевање Реацт вс Реацт Нативе

Ljudska bića se lako mogu zbuniti mnogim stvarima. Do zabune dolazi zbog različitih karakteristika predmeta. Najčešći uzrok zbunjenosti su sama imena.

Kada se susretnemo sa nečim novim, prvo što primetimo je naziv. Bilo da je to nova osoba, životinja, proizvod ili softver, prvo ćemo potražiti informacije po imenu, a zatim ćemo saznati o različitim funkcijama, primenama i istoriji.

Zašto je sve ovo bitno?

Ljudi se često zbune oko pojmova React i React Native. Oni koji nisu iz tehnološkog sveta, kada vide imena React i React Native, uglavnom će pomisliti da je React Native nadogradnja React-a. Čak i neki tehničari mogu slično razmišljati ako nemaju nikakvo prethodno znanje o ovim oblastima.

Šta su zapravo ove stvari? Zašto ih ljudi često mešaju, a ne druge?

React i React Native su dva različita okvira. Njihova imena su slična, sa dodatnom rečju između, što često dovodi do zabune. Ako se i vi zbunjujete, na pravom ste mestu da razjasnimo ovu misteriju.

Hajde da istražimo!

React

React je JavaScript biblioteka koja se koristi za kreiranje jednostraničnih web aplikacija. Jedna je od najpopularnijih biblioteka za izradu korisničkih interfejsa (frontend) za web. Možemo reći da je trenutno najkorišćenija biblioteka. Razvio ju je i održava Facebook, i takođe je poznata pod nazivom ReactJS.

Iz ličnog iskustva sa React-om, mogu reći da je jednostavan za učenje i upotrebu. To je biblioteka, što znači da imamo slobodu da gradimo šta god i kako god želimo koristeći njegove funkcije. Ne postoje striktna pravila kojih se moramo pridržavati tokom razvoja aplikacija sa React-om, što nam daje veliku fleksibilnost.

React poseduje mnoge korisne funkcionalnosti. Pogledajmo neke od njih:

#1. Komponente

U React-u je sve komponenta, kao gradivni blok web aplikacije. Velike komponente možemo kreirati kombinovanjem manjih. Svaka komponenta ima svoje stanje i kontrolu. Komponente upravljaju korisničkim interfejsom i odlučuju šta će se prikazati korisniku na osnovu svog stanja.

Komponente su suština React-a i mogu se ponovo koristiti. Napisane jednom, mogu se koristiti na više mesta.

Neophodno je pažljivo pisati komponente kako bi se olakšalo održavanje aplikacije. Ako se previše koda napiše u jednoj komponenti, to može postati problem. React komponente bi trebalo da budu male i kompaktne. One programerima mogu olakšati ili otežati život.

#2. Virtuelni DOM

Verovatno ste primetili da se prikazuje učitavač unutar dugmeta. Ili na društvenim mrežama, broj lajkova se ažurira odmah nakon klika. U prošlosti, veb-stranice su se morale ponovo učitavati da bi se dobile nove informacije. Sada, samo element koji treba da se ažurira se menja bez uticaja na druge delove stranice. Kako je to moguće?

Kao što je rečeno, sve u React-u je komponenta. Pretraživači održavaju DOM strukturu za elemente web aplikacije. Kada je potrebno ažurirati deo web aplikacije, to se radi putem DOM manipulacija. React to radi efikasnije.

React kreira virtuelni DOM (kopiju DOM-a) za sve komponente. Kada treba da ažurira nešto u web aplikaciji, React upoređuje pravi DOM sa virtuelnim DOM-om. Ako se pronađu promene, React pokreće ažuriranje komponente.

#3. Jednosmerni protok podataka

Veliki skup komponenti ne bi mogao da se podeli na manje komponente bez protoka podataka. Neophodan je mehanizam za prenos podataka između komponenti.

React nam omogućava prenos podataka od jedne komponente ka drugoj u jednom smeru. Podaci se kreću od nadređenih komponenti ka podređenim, a podređene komponente ne mogu da menjaju te podatke. Nema načina da se podaci vrate nazad u roditeljsku komponentu, jer je protok jednosmeran.

Možda deluje da nema kontrole nad tokom podataka. Međutim, jednosmerni protok nam zapravo omogućava bolju kontrolu u odnosu na višesmerni protok.

Pregled

Postoje i druge funkcije kao što su JSX, uslovno prikazivanje, itd., ali one su manje važne. Navedene su primarne funkcije React biblioteke. Sa React-om je moguće razviti gotovo svaku vrstu web aplikacije, a zajednica je velika i nudi brojne pakete za rad sa React-om.

React Native

React Native je JavaScript okvir koji se koristi za razvoj multi-platformskih mobilnih aplikacija. Takođe je razvijen i održavan od strane Facebook-a.

Ova tvrdnja mnoge može iznenaditi.

Da li je moguće kreirati mobilne aplikacije za Android i iOS koristeći jedan okvir?

Ako niste u toku sa tehnološkim novostima, možda niste upoznati sa ovom činjenicom. Da, moguće je razvijati aplikacije za obe platforme (Android i iOS) sa React Native-om. Pored React Native-a, postoje i drugi okviri za razvoj multi-platformskih aplikacija.

React Native je jedan od najpopularnijih okvira ove vrste. Iako JavaScript ima određena ograničenja u izvornim aplikacijama, React Native je odličan u oblastima razvoja koje pokriva. Koriste ga i velike kompanije poput Facebooka, Instagrama i Flipkarta. To ne znači da morate da ga koristite, već da možete kreirati aplikacije na nivou produkcije za više platformi koristeći React Native.

U prethodnom pasusu sam upotrebio izraz „Native Applications“ (izvorne aplikacije). Šta su one? To nisu nove vrste aplikacija. Izvorna aplikacija je ona koja je kreirana posebno za određenu platformu. Android aplikacije za Android mobilne uređaje, iOS aplikacije za iPhone uređaje, Windows aplikacije za Windows itd.

Dakle, šta znači „Native“ u React Native? React Native omogućava kreiranje aplikacija koje su kompatibilne sa Androidom i iOS-om prema vašim potrebama. Aplikacije razvijene sa React Native-om su izvorne, kao da su kreirane sa Android Studio za Android ili slično za iOS.

Verovatno su zato kreatori odabrali ime React Native, mada to nije sigurno.

React Native nudi niz funkcija, a u nastavku su neke od primarnih:

#1. Multi-platformski razvoj

Možete kreirati mobilne aplikacije za Android i iOS istovremeno, koristeći jednu kodnu bazu, što firmama štedi mnogo vremena i novca.

#2. Vruće ili uživo ponovno učitavanje

Ako imate iskustva sa React ili React Native aplikacijama, verovatno ste upoznati sa ovom funkcijom. Kada se napravi izmena u kodu, ova funkcija ponovo učitava celu aplikaciju sa novim izmenama. Nije potrebno pritiskati dugme za ponovno učitavanje svaki put kada promenite kod, već se promene odmah odražavaju. Ne morate čekati ništa osim ako nema grešaka.

Ovo se možda čini kao sporedna funkcija, ali ako dolazite iz Android razvoja bez okvira, shvatićete koliko je ova funkcija korisna u React Native-u.

#3. UI biblioteke i zajednica

React Native ima mnoge ugrađene izvorne komponente, koje se mogu odmah koristiti bez dodatnog podešavanja ili instalacije. Izvorne komponente izgledaju kao izvorne na odgovarajućim platformama. Korisnički interfejs React Native aplikacija se podudara sa izvornim korisničkim interfejsom za iOS i Android. React Native komponente su slične onima u React-u.

Zajednica je velika i neprestano raste, što omogućava da lako dobijete pomoć kada se suočite sa problemom.

Pregled

Na internetu možete pronaći još mnogo drugih funkcija React Native-a. Istražite ih ako se bavite razvojem mobilnih aplikacija. Frontend programeri mogu razvijati izvorne aplikacije pomoću React Native-a, što čini razvoj multi-platformskih mobilnih aplikacija lakšim.

React vs. React Native

Postoje neke sličnosti i razlike između React-a i React Native-a. Pogledajmo ih.

Kada je reč o aplikacijama kreiranim sa React-om i React Native-om, one se potpuno razlikuju. Međutim, njihovi principi su slični. I React i React Native koriste komponente i prate iste principe u razvoju.

Oba koriste JavaScript za razvoj. Pogledajmo jednostavnu „Hello, World“ aplikaciju u oba okvira.

React:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="container">
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default App;

React Native:

import React from 'react';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default App;

Kao što vidite, oba koriste React paket. Sintaksa je slična u obe aplikacije jer koriste posebnu oznaku koja se zove JSX. Međutim, u delu za renderovanje, koriste se različite stvari. React koristi virtuelni DOM, a React Native koristi Native API za UI renderovanje.

Postoje i eksterni paketi kao što su Redux i MobX, koji se koriste za upravljanje stanjem u React aplikacijama. Ovi paketi se mogu koristiti i u React Native aplikacijama.

I React i React Native koriste JavaScript, tako da se skoro svaki JavaScript paket može koristiti u oba okvira. Ovo značajno povećava broj dostupnih paketa za obe biblioteke.

React i React Native su povezani, ali se koriste u različite svrhe.

Zaključak

React i React Native se razlikuju po krajnjem proizvodu i platformama, ali prate slične principe u razvoju aplikacija. Ako naučite jedan od ova dva okvira, React ili React Native, brzo ćete naučiti i drugi. Međutim, za razvoj React Native aplikacija je potrebno znanje React-a, ali to nije dovoljno. Potrebno je poznavati i principe razvoja izvornih aplikacija, jer je podrška u React Native-u ograničena.

Nadamo se da će se ovo poboljšati u budućnosti.

Ako planirate da se bavite razvojem web ili mobilnih aplikacija, React ili React Native će vam svakako biti korisni, iako nisu obavezni.

Učenje React koncepata je lako ako imate znanje JavaScript-a. Zvanična dokumentacija je odličan resurs za početak sa React-om ili React Native-om.

Srećno u učenju! 🙂