React Native
In een notendop
React Native is een open-source UI-softwareframework waarmee je applicaties ontwikkelt voor Android, Android TV, iOS, macOS, tvOS, Web, Windows en UWP.
Eerste release: 26 maart 2015
Ontwikkeld door: Meta en de community
Programmeertalen: o.a. JavaScript, Java, Python, C++, Objective-C
Integraties: o.a. Redux, Firebase, Expo, GraphQL, Jest
Officiële website:reactnative.dev
Voorbeeldcode:scroll naar ↓
Voorbeeldapps:scroll naar ↓
Wat is React Native?
React Native is een jong open-source framework voor de ontwikkeling van mobiele apps op basis van JavaScript. De technologie stelt ontwikkelaars in staat om cross-platform ‘native-aanvoelende‘ apps te bouwen voor iOS en Android. Er kan dus worden ontwikkeld vanuit één set broncode voor beide mobiele platformen, terwijl de kwaliteit en prestaties er niet op achteruit gaan.
React Native is bedacht door Facebook en gebaseerd op React, de JavaScript library van Facebook. In tegenstelling tot puur React richt Native zich specifiek op mobiele platformen in plaats van browsers.
Het framework heeft als doel om appdevelopment sneller en overzichtelijker te maken. De mobiele ervaring van Facebook was in 2012 niet optimaal. Vandaar dat oprichter Mark Zuckerberg verbetering beloofde met een mindere focus op HTML en een grotere focus op native. Dit leidde tot een interne hackathon waarbij prototypes werden opgebouwd met een uiteindelijke eerste release in 2015 als gevolg.
Voordelen React Native
Een algemeen voordeel van het werken met een framework is dat ontwikkelaars gebruik kunnen maken van vooraf gebouwde onderdelen om een applicatie te maken. Dit scheelt veel ontwikkeltijd. Het is alsof je een bouwmarkt beschikbaar hebt, in plaats van dat je zelf je planken moet zagen en schuren. Daarbovenop zijn er nog een aantal voordelen die React Native onderscheidt van andere frameworks. Deze zetten we voor je op een rij:
1. Cross-platform mogelijkheden
React Native stelt ontwikkelaars in staat om cross-platform applicaties te bouwen. Dit houdt in dat de geschreven code voor zowel iOS als Android kan worden gebruikt en je geen losse apps voor beide platformen hoeft te ontwikkelen. Dit scheelt natuurlijk veel kosten en ontwikkeltijd wanneer je een app wilt maken die de volledige markt bedient.
2. Mét native feel en prestaties
React Native onderscheidt zich van hybride frameworks dankzij de potentie van ‘native-aanvoelende’ mobiele ontwikkeling. Alternatieve hybride frameworks als Cordova en Ionic gebruiken webviews om een app te renderen. Op deze manier maak je, simpel gezegd, een website in app-vorm. Dit maakt de app inzetbaar op uiteenlopende platformen, maar heeft vaak een negatief effect op performance en de werking van de User Interface (UI) elementen die een app kenmerkend maken. Het gebruik voelt niet altijd even ‘smooth’ en bij de ontwikkeling van complexe apps groeien de prestatieproblemen.
React Native gaat niet uit van webviews. De UI wordt gerenderd op basis van native views. Hierdoor is een React Native-app niet te onderscheiden van apps gemaakt met Swift of Java. Dit biedt veel potentie voor de ontwikkeling van soepele en vlotte gebruikerservaringen. React Native wint op dit terrein dus van de hybride technieken.
3. Makkelijk op te pakken
Voor ontwikkelaars die ervaring hebben met mobiele ontwikkeling is React Native verrassend makkelijk om mee te werken. Het framework is voorzien van krachtige developer tools, handige foutberichten en slimme debugging tools.
React Native is een prettig en flexibel platform. Het helpt mij als ontwikkelaar effectief te werken.
4. Ondersteund door Facebook
De actieve rol van Facebook is voordelig voor de groei van het framework. Facebook geeft ruimte en budget aan ontwikkelaars om React Native verder te ontwikkelen. Daarnaast wordt het natuurlijk ook door Facebook zelf gebruikt, wat een grote use cases en een berg aan relevante testdata oplevert.
Als Facebook kiest om te stoppen met React of React Native, dan is vanwege de MIT-licentie iedereen gemachtigd om het werk voort te zetten. Gezien de huidige populariteit zal dat ook zeker gebeuren. React Native profiteert dus van Facebook, maar is er tegelijkertijd niet van afhankelijk.
React Native in actie
Benieuwd naar een voorbeeld van een React Native-app? Bekijk dan de case van Reclamefolder. Deze app hebben we ontwikkeld in opdracht van DPG Media en voorziet miljoenen gebruikers maandelijks van de nieuwste reclamefolders.
Nadeel React Native?
Naast de voordelen kent het framework ook een mogelijk nadeel waar je rekening mee moet houden.
Met een eerste versie in 2015 is React Native nog een jong framework. Dit betekent logischerwijs dat de community nog moet groeien en in vergelijking kleiner is met frameworks die langer bestaan. De best practices staan dus nog niet vast. Ook de documentatie is minder volledig dan alternatieve frameworks. Kortom, met React Native ben je als ontwikkelaar je meer op jezelf en je collega’s aangewezen. Het is daarom aanbevolen om een ervaren ontwikkelaar het project te laten overzien.
Het jonge aspect komt ook naar voren in de schaalbaarheid. Momenteel is React Native alleen geschikt voor de ontwikkeling van Android en iOS-apps. Gezien de open-source eigenschap, staat er echter niets in de weg voor React Native om in de toekomst ook andere platforms als Windows en tvOS te ondersteunen.
Voorbeeld React Native-code
Bekijk een voorbeeld van een eenvoudige React Native-applicatie die een tekstveld en een knop weergeeft:
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
export default function App() {
const [name, setName] = useState('');
const handlePress = () => {
alert(`Hello, ${name}!`);
};
return (
<View style={styles.container}>
<Text style={styles.title}>Wat is je naam?</Text>
<TextInput
style={styles.input}
placeholder="Typ je naam hier"
onChangeText={setName}
value={name}
/>
<TouchableOpacity style={styles.button} onPress={handlePress}>
<Text style={styles.buttonText}>Verzenden</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 24,
marginBottom: 16,
},
input: {
borderWidth: 1,
borderColor: '#ddd',
padding: 8,
margin: 16,
width: 200,
},
button: {
backgroundColor: 'blue',
padding: 8,
borderRadius: 4,
},
buttonText: {
color: '#fff',
fontSize: 16,
},
});
Een React Native app maken
Bij Linku hebben we veel ervaring in het ontwikkelen met open-source technieken als Ionic, Symfony en WordPress. Ook in het ontwikkelen met React Native zien we veel voordelen. Een React Native app biedt zowel de voordelen van een hybride app, als de hoge kwaliteit van een native app.
React Native is geschikt voor de development van compleet nieuwe apps, maar ook voor het herbouwen van bestaande apps. Als je niet tevreden bent over de prestaties van je huidige app, dan loont het mogelijk om deze opnieuw te laten bouwen op basis van betere technieken.
Groeien met een app?
Linku staat altijd open om met je te sparren over de ontwikkeling van een app. Neem contact op en Klaas vertelt je vrijblijvend over jouw kansen voor groei.
Meer technieken
Ontdek andere technieken die we toepassen in het ontwikkelen van apps, webapplicaties en websites.
Sanity
Open-source headless cms voor het ontwikkelen van websites, apps en applicaties.
OpenAI
Krachtige AI voor diverse toepassingen, van tekst- en beeldgeneratie tot data-analyse.