Mennesker har en tendens til å forveksle mange ting. Forvirringen kan oppstå på bakgrunn av forskjellige karakteristikker ved objekter eller ideer. En vanlig årsak til forveksling er likhet i navn.
Når man støter på noe nytt, er navn ofte det første man blir kjent med. Det være seg en person, et dyr, et produkt eller en programvare. Man bruker gjerne navnet i søk for å lære mer om funksjoner, bruksområder, historie osv.
Hvorfor er dette relevant?
Jo, mange blander ofte sammen begrepene (navnene) React og React Native. For en person uten teknisk bakgrunn, kan det virke som om React Native er en utvidelse av React. Selv teknisk anlagte personer med lite kunnskap innenfor disse områdene, kan falle i samme felle.
Hva er egentlig disse tingene? Og hvorfor er det nettopp disse to som ofte forveksles, og ikke andre?
React og React Native er to rammeverk. Navnene er veldig like, med kun ett ekstra ord imellom. Det er lett å bli forvirret ved første øyekast. Hvis du kjenner deg igjen i denne forvirringen, har du kommet til rett sted for å oppklare mysteriene rundt dem.
La oss se nærmere på dette.
React
React er et JavaScript-bibliotek som brukes til å utvikle enkelt-side applikasjoner (SPA). Det er et av de mest populære verktøyene for å bygge brukergrensesnitt (frontend) for web. Kanskje kan det til og med sies å være det mest populære for tiden. Det er utviklet og vedlikeholdes av Facebook, og er også kjent som ReactJS.
Basert på min erfaring, kan jeg bekrefte at React er elegant, enkelt å lære og praktisk å bruke. Det er et bibliotek, som gir oss friheten til å bygge det vi ønsker, på den måten vi ønsker, ved hjelp av de tilgjengelige funksjonene. Det er ingen rigide regler å følge når man utvikler applikasjoner med React. Denne fleksibiliteten gir stor handlefrihet.
React kommer med mange attraktive funksjoner. La oss ta en titt på noen av dem.
#1. Komponenter
I React er alt en komponent. Tenk på det som en byggekloss i en webapplikasjon. Man kan skape større komponenter ved å kombinere mindre komponenter. Hver komponent har sin egen status og kontroll. Komponentene styrer brukergrensesnittet og bestemmer hva som skal vises til brukeren, basert på den aktuelle statusen.
Komponenter er essensielt i React, og de er gjenbrukbare. Skriv koden en gang, og bruk den hvor som helst.
Man bør skrive komponenter med omhu. Dette gjør det lettere å vedlikeholde applikasjonen når den vokser. Hvis for mye kode samles i en enkelt komponent, vil det bli vanskeligere å vedlikeholde. Komponentene i React skal være små og oversiktlige. De kan gjøre utviklerens liv både enklere og vanskeligere.
#2. Virtuell DOM
Du har sikkert lagt merke til en lasteskjerm i en knapp, eller at antall «likes» på sosiale medier oppdateres umiddelbart når du trykker på «liker»-knappen. Tidligere måtte hele siden lastes på nytt for å få oppdatert informasjon. Nå kan en enkelt komponent oppdateres uten å påvirke resten av siden. Hva er det som ligger bak dette?
Som tidligere nevnt, er alt i React en komponent. Nettlesere vedlikeholder en DOM-struktur for elementene i en webapplikasjon. Når en del av applikasjonen trenger å bli oppdatert, må dette gjøres gjennom DOM-manipulasjoner. React utfører dette på en effektiv måte.
React oppretter en virtuell DOM (en kopi av DOM) for alle komponenter. For å oppdatere noe i en webapplikasjon, sammenligner React den reelle DOM med den virtuelle DOM. Hvis det oppdages endringer, vil React trigge en oppdatering av komponenten.
#3. Enveis dataflyt
Det er viktig med en ordentlig dataflyt for å kunne dele store komponenter inn i mindre enheter. Det må finnes en måte å overføre data mellom komponentene.
React tillater dataoverføring fra en komponent til en annen i én retning. Data flyter fra overordnede komponenter til underordnede komponenter. Underordnede komponenter kan ikke endre dataene. Det er ikke mulig å sende data tilbake til den overordnede komponenten, ettersom dataflyten er ensrettet.
I første omgang kan det virke begrensende med dataflyt i kun én retning, men det gir faktisk bedre kontroll over dataflyten.
Oppsummering
Det finnes mange andre funksjoner, som JSX, betinget gjengivelse osv. Disse er mer sekundære. Vi har sett på hovedfunksjonene til React-biblioteket. Når det gjelder bruksområder, kan vi utvikle de fleste typer webapplikasjoner med det. React har et stort fellesskap, og man finner mange pakker som er tilgjengelige for bruk i React.
React Native
React Native er et JavaScript-rammeverk som brukes til å utvikle mobile applikasjoner på tvers av plattformer. Det er også utviklet og vedlikeholdes av Facebook.
Mange vil kanskje bli overrasket over denne påstanden.
Kan vi virkelig utvikle mobilapplikasjoner for både Android og iOS med ett enkelt rammeverk?
Hvis du ikke følger med på de siste teknologiske utviklingene, er det ikke sikkert du er kjent med dette. Ja, vi kan utvikle applikasjoner på tvers av plattformer (både Android og iOS) ved hjelp av React Native. Det finnes også andre rammeverk for applikasjonsutvikling på tvers av plattformer.
React Native er et av de mest populære i sin kategori. Det er kanskje ikke det mest populære på grunn av begrensninger i JavaScript i forhold til native applikasjoner. Likevel, skinner det i sine utviklingsområder. Selv store selskaper som Facebook, Instagram, Flipkart osv. bruker det. Dette betyr ikke at du må bruke det, men det viser at vi kan utvikle applikasjoner på tvers av plattformer på produksjonsnivå med React Native.
I avsnittet over brukte jeg ordet «Native Applications». Hva betyr det? Det er ikke en ny type applikasjon. En native applikasjon er spesifikt utviklet for en bestemt plattform. Android-apper for Android-mobiler, iOS-apper for iPhone-mobiler, Windows-applikasjoner for Windows osv.
Hva betyr «Native» i React Native? React Native lager en native applikasjon som passer både Android og iOS, avhengig av vårt ønske. Applikasjonene som utvikles med React Native er native, på samme måte som Android Studio for Android, og tilsvarende for iOS.
Kanskje er det derfor skaperne kalte det React Native. Men dette er ikke et faktum.
React Native har mange funksjoner. La oss se på noen av de viktigste.
#1. Kryssplattform
Vi kan utvikle mobilapplikasjoner for både Android og iOS samtidig, med én enkelt kodebase. Dette sparer mye tid og penger for bedrifter.
#2. Hot eller Live Reload
Hvis du har erfaring med React eller React Native-applikasjoner, kjenner du sikkert til denne funksjonen. Den laster inn hele applikasjonen på nytt med de nyeste endringene i koden. Du trenger ikke å trykke på «reload»-knappen hver gang du endrer koden. Oppdater koden, og se endringene. Enkelt og greit. Du trenger ikke å vente, med mindre det oppstår en feil.
For noen kan dette virke som en sekundær funksjon. Men hvis du kommer fra Android-utvikling uten et rammeverk, vil du forstå verdien av denne funksjonen i React Native.
#3. UI-biblioteker og fellesskap
React Native har mange innebygde native komponenter. Du kan bruke dem direkte, uten ekstra installasjon eller konfigurering. De native komponentene ser native ut på de respektive plattformene. Grensesnittet til en React Native applikasjon ligner både iOS og Android native UI. React Native har komponenter som ligner på React.
Fellesskapet er stort og stadig voksende. Du kan enkelt få hjelp fra fellesskapet hvis du står fast.
Oppsummering
Du finner mange andre funksjoner ved React Native på internett. Det er verdt å utforske disse, spesielt hvis du planlegger å utvikle mobilapper. En frontend-utvikler kan også utvikle native applikasjoner med React Native. Dette forenkler utviklingen av mobilapplikasjoner på tvers av plattformer.
React vs. React Native
Det er likheter og forskjeller mellom React og React Native. La oss se på dem.
Når det gjelder applikasjoner, er React og React Native helt forskjellige. Men prinsippene er ganske like. Både React og React Native bruker komponenter, og følger samme prinsipper i utviklingen.
Begge bruker JavaScript for utvikling. La oss se på et enkelt «Hello, World»-eksempel i begge:
React:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="container">
<h1>Hello, Wolrd!</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;
Som du ser, bruker begge React-pakken. Syntaksen ser lik ut, ettersom begge bruker JSX. Men når det gjelder gjengivelse, bruker de forskjellige metoder. React bruker Virtual DOM, mens React Native bruker Native API for UI-gjengivelse.
Det finnes eksterne pakker som Redux og MobX for håndtering av React-applikasjoner. De samme pakkene kan også brukes i React Native-applikasjoner.
Både React og React Native bruker JavaScript, så de fleste JavaScript-pakker kan brukes i begge. Dette gir en stor bredde i tilgjengelige pakker.
React og React Native er relatert, men brukes til forskjellige formål.
Konklusjon
React og React Native er ulike når det gjelder sluttprodukt og plattformer. Men de følger lignende prinsipper for utvikling. Hvis du lærer deg ett av disse rammeverkene, vil det være lettere å lære det andre. Kunnskap om React er likevel nødvendig for å utvikle React Native-applikasjoner. Det er ikke nok i seg selv, ettersom man må lære mer om utvikling av native applikasjoner, da støtten er begrenset i React Native.
La oss håpe at React Native vil utvikle seg og få full støtte i fremtiden.
Hvis du ønsker å starte utvikling av web- eller mobilapplikasjoner, vil det definitivt være en fordel for deg å velge React eller React Native. Men det er ikke obligatorisk.
Å lære seg React-konsepter er enkelt hvis du kan JavaScript. De offisielle dokumentene er en god ressurs for å komme i gang med React eller React Native.
Greit å vite 🙂