Vi människor tenderar att blanda ihop saker. Denna förvirring kan uppstå på grund av olika aspekter av sakerna, men det vanligaste är att förväxla dem baserat på deras namn.
Människor lär sig i regel namnet på något nytt först. Oavsett om det handlar om en person, ett djur, en produkt eller en programvara, så börjar sökandet oftast med namnet. Efter det följer information om olika funktioner, användningsområden, historik och så vidare.
Men vad handlar allt det här om?
Jo, det är vanligt att människor förväxlar termerna (namnen) React och React Native. En person utan teknisk bakgrund skulle förmodligen se React Native som en utökning av React. Även personer med viss teknisk kunskap kan resonera på samma sätt om de inte har någon erfarenhet av dessa verktyg.
Men vad är dessa saker egentligen? Och varför är det just dessa namn som ofta skapar förvirring?
React och React Native är två separata ramverk. Namnen liknar varandra med ett extra ord emellan, vilket leder till att många blir förvirrade vid första anblicken. Om du känner igen dig i denna förvirring, har du kommit till rätt ställe för att reda ut mysteriet bakom dem.
Låt oss undersöka saken närmare.
React
React är ett JavaScript-bibliotek som används för att utveckla webbapplikationer med en enda sida. Det är ett av de mest populära biblioteken för att skapa gränssnitt (frontend) för webben, och kanske till och med det allra populäraste just nu. Det utvecklas och underhålls av Facebook och är även känt som ReactJS.
Baserat på min erfarenhet av React kan jag konstatera att det är ett smidigt och enkelt verktyg att lära sig och bygga med. Det är ett bibliotek, vilket innebär att vi kan bygga vad vi vill, hur vi vill, genom att använda dess funktioner. Det finns inga strikta regler att följa när man utvecklar applikationer med React, vilket ger stor frihet.
React har en mängd intressanta funktioner. Låt oss ta en titt på några av dem.
#1. Komponenter
I React är allting en komponent. Det är som en byggsten i webbapplikationen. Stora komponenter skapas genom att kombinera mindre. Varje komponent har sitt eget tillstånd och styrning. Komponenterna styr användargränssnittet och bestämmer vad som ska visas för användarna utifrån sitt tillstånd.
Komponenter är centrala i React och är dessutom återanvändbara. Skriv en gång, använd överallt.
Det är viktigt att skriva komponenter med omsorg. Det gör underhållet enkelt när applikationen växer. Om en komponent innehåller för mycket kod blir den svårare att underhålla. Reakt-komponenter bör vara små och hanterbara. De kan göra utvecklarnas liv antingen till en dröm eller en mardröm.
#2. Virtuella DOM
Du har säkert sett laddningsikoner inuti knappar. Och på sociala medieplattformar ökar antalet gilla-markeringar direkt efter att du tryckt på knappen. Förr i tiden behövde man ladda om hela sidan för att få uppdaterad information, men nu uppdateras bara det som faktiskt behöver uppdateras. Vad beror det på?
Som vi nämnde tidigare är allting i React en komponent. Webbläsare använder en DOM-struktur för att hantera elementen i en webbapplikation. När en del av applikationen behöver uppdateras måste vi göra det via DOM-manipulationer. React utför samma sak på ett effektivt sätt.
React skapar en virtuell DOM (en kopia av DOM) för alla sina komponenter. För att uppdatera något i en applikation jämför React den riktiga DOM med den virtuella. Om ändringar finns, triggas en uppdatering av komponenten.
#3. Envägsdataflöde
Det går inte att dela upp en stor komponentuppsättning i mindre komponenter utan dataflöde. Det måste finnas ett sätt för data att flöda mellan komponenterna.
React tillåter dataöverföring från en komponent till en annan i en enda riktning. Data flödar från överordnade komponenter till underordnade. Underordnade komponenter kan inte direkt uppdatera data. Det finns inget sätt att skicka tillbaka data till den överordnade komponenten, eftersom dataflödet är envägs.
Inledningsvis kan detta verka begränsande. Men ett envägsdataflöde ger mer kontroll över dataflödet.
Översikt
Det finns många andra funktioner, som JSX, villkorlig rendering och så vidare, men de är av mindre betydelse. Vi har gått igenom de primära funktionerna i React-biblioteket. Med React kan man bygga i princip vilken typ av webbapplikation som helst. Reacts community är stort och det finns många paket tillgängliga.
React Native
React Native är ett JavaScript-ramverk som används för att utveckla plattformsoberoende mobilapplikationer. Det är också utvecklat och underhållet av Facebook.
Många blir nog förvånade över det här påståendet.
Är det verkligen möjligt att skapa mobilapplikationer för både Android och iOS med ett enda ramverk?
Om du inte följer de senaste tekniska trenderna är det inte säkert att du känner till det. Ja, vi kan utveckla applikationer som fungerar på flera plattformar (både Android och iOS) med hjälp av React Native. Och det finns även andra ramverk för detta.
React Native är ett av de mest populära verktygen för just detta ändamål. Det är inte det mest populära ramverket på grund av begränsningar i JavaScript för inbyggda applikationer, men det är ändå ett utmärkt verktyg för utvecklingsändamål. Stora företag som Facebook, Instagram och Flipkart använder det. Det betyder inte att alla borde använda det, men det visar att vi kan bygga produktionsfärdiga applikationer för flera plattformar med React Native.
Jag använde tidigare termen ”inbyggda applikationer”. Vad innebär det? Det handlar inte om någon ny typ av applikation. En inbyggd applikation är specifikt skapad för en viss plattform. Android-appar för Android-mobiler, iOS-appar för iPhones och Windows-applikationer för Windows, och så vidare.
Vad är då ”native” i React Native? Jo, React Native skapar en inbyggd applikation som passar både Android och iOS baserat på våra önskemål. De applikationer som utvecklas med React Native blir inbyggda på samma sätt som de som skapas med Android Studio för Android eller liknande utvecklingsverktyg för iOS.
Kanske var det därför skaparna kallade det för React Native. Men det är inte säkert.
React Native har en rad användbara funktioner. Låt oss titta på några av de viktigaste.
#1. Plattformsövergripande
Vi kan skapa mobilapplikationer för både Android och iOS samtidigt med en enda kodbas. Det sparar mycket tid och pengar för företagen.
#2. Live Reload eller Hot Reload
Om du har erfarenhet av React eller React Native, känner du förmodligen till den här funktionen. Den laddar om hela applikationen med nya uppdateringar när vi ändrar koden. Vi behöver inte trycka på omladdningsknappen varje gång vi gör en ändring. Uppdatera koden och se förändringarna direkt. Det är allt. Vi behöver inte vänta, såvida det inte finns en bugg.
Det kanske verkar vara en mindre funktion, men om du har erfarenhet av Android-utveckling utan ramverk, kommer du verkligen att uppskatta det värde som denna funktion tillför i React Native.
#3. UI-bibliotek och community
React Native har många inbyggda komponenter. Vi kan använda dem direkt utan extra installationer. Dessa komponenter ger applikationen ett plattformsenligt utseende. Gränssnittet för React Native-applikationer matchar både det ursprungliga gränssnittet för iOS och Android. React Native har komponenter som liknar de i React.
Dessutom är communityn stor och ständigt växande. Du kan enkelt få hjälp från communityn om du stöter på problem.
Översikt
Det finns många andra funktioner i React Native som du kan hitta information om på internet. Läs gärna om dem om du funderar på att utveckla mobilapplikationer. En frontend-utvecklare kan även utveckla inbyggda applikationer med hjälp av React Native. Det gör utvecklingen av plattformsoberoende mobilapplikationer enklare.
React vs. React Native
Det finns likheter och skillnader mellan React och React Native. Låt oss titta på dem.
När det gäller tillämpningarna av React och React Native så skiljer de sig åt, men principerna är desamma. Både React och React Native använder komponenter och följer liknande principer.
Båda ramverken använder JavaScript för utveckling. Låt oss se ett enkelt ”Hello, World”-exempel i båda.
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 använder båda React-paketet. Syntaxen ser likadan ut i båda applikationerna, eftersom de använder ett speciellt märkspråk som kallas JSX. Men när det gäller rendering så använder de olika metoder. React använder virtuell DOM medan React Native använder Native API för gränssnittsrendering.
Det finns externa paket, som Redux och MobX, för tillståndshantering av React-applikationer. Samma paket kan även användas i React Native-applikationer.
Både React och React Native använder JavaScript. Därför kan vi använda nästan alla JavaScript-paket i båda ramverken. Det ger tillgång till en stor mängd paket i biblioteken.
React och React Native är relaterade, men de används för olika ändamål.
Slutsats
React och React Native skiljer sig åt när det gäller slutprodukten och applikationsplattformen. Men de använder liknande principer vid utvecklingen av respektive applikation. Om du kan lära dig ett av ramverken, React eller React Native, kommer du ha lättare att lära dig det andra. För utveckling av React Native-applikationer krävs dock kunskap om React. Men det räcker inte. Du behöver även kunskap om utveckling av inbyggda applikationer eftersom stödet är begränsat i React Native.
Låt oss hoppas att stödet kommer att utvecklas fullt ut i framtiden.
Om du funderar på att börja med webb- eller mobilapplikationsutveckling kommer det definitivt att vara fördelaktigt att välja React eller React Native. Men det är inget måste.
Det är ganska enkelt att lära sig begreppen i React om du kan JavaScript. Den officiella dokumentationen är en bra resurs för att komma igång med React eller React Native.
Kul att lära sig 🙂