Vi mennesker vil forveksle med en masse ting. Forvirringen kan opstå baseret på forskellige egenskaber ved ting. Den mest almindelige måde at blive forvekslet med forskellige ting er deres navne.
Folk vil først lære navnene på en ny ting at kende. Enten er det en anden person, dyr, produkt, software osv.., De vil søge med deres navne, og så vil de blive klogere på forskellige funktioner, applikationer, historie osv..,
Hvorfor handler det her om?
Ja, folk bliver ofte forvirrede med udtrykkene (navnene) React og React Native. Hvis ikke-teknologiske fyre ser navnene React og React Native, vil de antage Reactive Native som en forlængelse af React i de fleste tilfælde. Selv nogle tech-fyre kan tænke på samme måde, hvis de har 0% viden på disse områder.
Hvad er de ting egentlig? Hvorfor bliver folk ofte forvirrede med dem, ikke andre?
Reagere og Reager Native er to rammer. Navnene ligner hinanden med et ekstra ord mellem dem. Så folk forvirrer ofte på grund af deres navne ved første øjekast. Hvis du har den samme forvirring, så er du på det rigtige sted til at pakke mysteriet bag dem.
Lad os finde ud af det.
Indholdsfortegnelse
Reagere
React er et JavaScript-bibliotek, der bruges til at bygge enkeltsidede webapplikationer. Det er et af de mest populære biblioteker til at bygge brugergrænseflader (frontend) til nettet. Måske kan vi sige, at det er det mest populære bibliotek lige nu. Det er oprettet og vedligeholdt af Facebook. Det er også kendt som ReactJS.
Da jeg har erfaring med React, kan jeg sige, at det er smukt og ligetil at lære og bygge. Det er et bibliotek. Så vi kan bygge, hvad vi vil, og hvordan vi vil, ved at bruge dets funktioner. Der er ingen strenge regler, der skal følges under udvikling af applikationer med React. Så vi vil have frihed.
React har så mange fede funktioner. Lad os se på dem.
#1. Komponenter
I React er alt en komponent. Det er som en byggesten i webapplikationen. Vi kan danne store komponenter ved at kombinere de små komponenter. Hver komponent har sin egen tilstand og kontrol. Komponenter styrer brugergrænsefladen og bestemmer, hvad der skal vises til brugerne baseret på dens tilstand.
Komponenter er alt i React. Og de er genbrugelige. Skriv én gang og brug det overalt.
Vi skal skrive komponenter med største omhu. Det gør tingene nemme at vedligeholde, når vores applikation vokser. Hvis vi skriver masser af kode i en enkelt komponent, bliver det en byrde for os at vedligeholde til sidst. Reaktionskomponenterne skal være små og søde. De gør udviklernes liv til himmel og helvede.
#2. Virtuelt DOM
Du skulle have set noget som en læsser inde i en knap. Og på sociale medieplatforme stiger likes-antallet, så snart du trykker på det. I de tidligere dage af nettet, er vi nødt til at genindlæse alt for at få informationen. Men nu vil en single, der skal opdateres, opdateres for os uden at røre ved andre ting. Hvad handler det her om?
Som vi ser før, er alt i React en komponent. Browsere opretholder DOM-strukturen for elementerne til en webapplikation. Når en del af webapplikationen skal opdateres, skal vi opdatere den ved hjælp af DOM-manipulationerne. React gør det samme effektivt.
React opretter en virtuel DOM (kopi af DOM) for alle dens komponenter. For at opdatere noget i en webapplikation, sammenligner React den rigtige DOM med den virtuelle DOM. Hvis der er ændringer, udløser React opdatering af komponenten.
#3. Envejs dataflow
Vi kan ikke opdele det store sæt af komponenter i mindre komponenter uden dataflow. Der skal være en måde for dataflowet mellem komponenterne.
React giver os mulighed for at videregive data fra én komponent til en anden komponent i en enkelt retning. Dataene flyder fra de overordnede komponenter til de underordnede komponenter. Og underordnede komponenter kan ikke opdatere dataene. Der er ingen måde at sende data tilbage til den overordnede komponent, da datastrømmen er ensrettet.
Du tror måske først, at det ikke flyder flere retninger. Men et dataflow i én retning giver os mere kontrol over datastrømmen i flere retninger.
Oversigt
Der er mange andre funktioner som JSX, Conditional Rendering osv..; de er sekundære. Vi har set de primære funktioner i React-biblioteket. Når det kommer til Reacts applikationer, kan vi bygge næsten enhver form for webapplikation med den. Fællesskabet i React er enormt. Du kan finde en masse pakker til at arbejde med React.
Reager Native
React Native er en JavaScript-ramme, der bruges til at udvikle mobile applikationer på tværs af platforme. Det er også oprettet og vedligeholdt af Facebook.
De fleste af jer vil blive forbavset over ovenstående udtalelse.
Kan vi skabe mobilapplikationer til Android og IOS med et enkelt framework?
Hvis du ikke følger opdateringerne i teknologiverdenen, så er der ingen chance for, at du ved det. Ja, vi kan oprette applikationer på tværs af platforme (både Android og IOS) ved hjælp af React Native. Og der findes andre rammer for applikationsudvikling på tværs af platforme.
React Native er en af de mest populære af slagsen. Ikke den mest populære på grund af JavaScript-begrænsninger i native applikationer. Men det skinner i sine udviklingsområder. Selv store virksomheder som Facebook, Instagram, Flipkart osv., bruger det. Det betyder ikke, at du skal bruge det. Det betyder, at vi kan bygge applikationer på tværs af platforme på produktionsniveau med React Native.
Jeg har brugt en gruppe ord kaldet Native Applications i ovenstående afsnit. Hvad er de? Det er ikke en ny type applikation. En indbygget applikation er specifikt oprettet til en bestemt platform. Android-apps til Android-mobiler, IOS-apps til iPhone-mobiler, Windows-applikationer til Windows osv..,
Hvad er der i vejen med Native i React Native? Når det kommer til det, skaber React Native en native applikation, der passer til både Android og IOS baseret på vores ønske. Applikationerne udviklet med React Native er native som de samme som Android Studio til Android og tilsvarende til IOS.
Måske kaldte skaberne det React Native på grund af det. Ikke et faktum.
Når det kommer til funktionerne i React Native, er der en masse af dem, der venter på os. Lad os se nogle af de primære funktioner fra dem.
#1. Cross-platform
Vi kan oprette mobilapplikationer til både Android og IOS på samme tid med en enkelt kodebase. Det sparer meget tid og penge for virksomhederne.
#2. Hot eller Live Genindlæs
Hvis du har erfaring med React eller React Native applikationer, så kender du sikkert til det. Denne funktion genindlæser hele applikationen med nye opdateringer, når vi ændrer koden. Vi behøver ikke trykke på genindlæsningsknappen hver gang vi ændrer koden. Opdater koden og se ændringerne. Det er det. Vi behøver ikke vente på noget, medmindre der er en fejl.
Det kan virke som en sekundær funktion for dig. Men hvis du kommer fra Android-udvikling uden nogen ramme, vil du forstå værdien af denne funktion i React Native.
#3. UI biblioteker og samfund
Der er mange indbyggede native komponenter i React Native. Vi kan bruge dem direkte uden yderligere opsætning eller installation. De native komponenter ser native ud på de respektive platforme. React Native-applikationernes UI matcher med IOS native UI såvel som Android native UI. React Native har komponenter, der ligner React.
Og når det kommer til fællesskabet. Det er stort og bliver ved med at stige. Du kan uden besvær få hjælp fra fællesskabet, når du sidder fast i det.
Oversigt
Du kan finde mange andre funktioner i React Native på internettet. Udforsk dem også, hvis du skal i udvikling af mobilapps. En frontend-udvikler kan også udvikle native applikationer ved hjælp af React Native. Det gør udviklingen af mobile applikationer på tværs af platforme let.
Reager vs. Reager Native
Der er nogle ligheder og forskelle mellem React og React Native. Lad os se på dem.
Når det kommer til anvendelser af React og React Native, er de helt forskellige fra hinanden. Men når det kommer til principperne, ligner de hinanden. Både React og React Native har komponenter. Og de følger de samme principper i den respektive udvikling.
Begge bruger JavaScript-sproget til udvikling. Lad os se en simpel Hello, World-app i dem begge.
Reagere
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;
Reager 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 kan se, bruger de begge React-pakken. Syntaksen ligner i begge apps, da de bruger en speciel markup kaldet JSX. Men når det kommer til renderingsdelen, bruger de begge forskellige ting. React bruger Virtual DOM, og React Native bruger Native API til UI-gengivelse.
Der er nogle eksterne pakker som Redux, MobX osv.., til erklæringsstyring af React-applikationer. De samme pakker kan også bruges i React Native-applikationerne.
Både React og React Native bruger JavaScript. Så vi kan bruge næsten alle JavaScript-pakker med dem begge. Dette tilføjer masser af pakker til begge deres pakkebiblioteker.
React og React Native er relateret til hinanden. Men de bruges til forskellige formål.
Konklusion
React and React Native er anderledes med hensyn til slutproduktet og applikationsplatformene. Men de følger lignende principper i udviklingen af den respektive applikation. Hvis du kan lære en af de to rammer, React eller React Native, kan du fremskynde indlæringen af en anden. React-viden er dog nødvendig for udviklingen af React Native-applikationer. Men det er ikke nok til det. Vi har brug for at vide mere om udviklingen af native applikationer, da support er begrænset i React Native.
Lad os håbe, at det i sidste ende vil udvikle sig til fuld støtte i fremtiden.
Hvis du ønsker at komme i gang med udvikling af web- eller mobilapplikationer, så vil det helt sikkert gavne dig i fremtiden at vælge React eller React Native. Men det er dog ikke obligatorisk.
At lære begreberne React er en cakewalk, hvis du kender JavaScript. De officielle dokumenter vil være en god ressource for dig at komme i gang med React eller React Native.
Godt at vide 🙂