React Native est une technologie créée par Facebook pour développer des applications mobiles (Android, iOS).
Le but de ReactNative est d’écrire d’une application mobile tout en réutilisant ses compétence JS.

Quelle est la différence avec Cordova, NativeScript, Xamarin ?

Cordova permet de créer des application hybrides, l’interface graphique est codée en HTML et affichée dans une WebView. Cela donne des applications qui n’ont pas les performances des apps natives ni le look and feel de celles-ci, mais qui sont facilement déclinables sur chaque plateforme.

React native a pris une approche très différente. Il pilote des vues natives via un code Javascript et JSX. L’expérience utilisateur n’en est que meilleure (utilisation de vue natives), et le look and feel de la plateforme est respecté.

Xamarin Platform a une approche différente, il permet aussi de créer des applications en utilisant les API natives de chaque plateforme mais en utilisant toute la puissance de C#. Cela donne des applications plus intégrées à la plateforme, néanmoins la montée en compétence est plus longue que sur Cordova.

Deux autres concurents ont la même approche :

1. NativeScript de Telerik, qui lui aussi pilote des contrôles natif via Javascript.
2. Xamarin Forms qui pilote aussi des contrôles natifs, mais utilise comme langage C#/XAML

JSX mais qu'est-ce que c'est???

JSX est une syntaxe XML / HTML utilisée par React qui étend ECMAScript afin que le texte XML / HTML puisse coexister avec JavaScript / du code React.

Exemple de code pour créer un bouton :

<Button onPress={onPressLearnMore} title="Learn More" color="#841584" accessibilityLabel="Learn more about this purple button" />j

Une feuille de style proche de CSS

ReactNative a un système de style très proche de CSS.

Exemple de style définition d'un style :

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

LiveReloading et HotReloading

Les équipes de ReactNative ont fait le maximum pour que le développeur ait la meilleure expérience de développement possible et aussi la plus productive. Par exemple, au lieu de la recompiler, vous pouvez recharger votre application instantanément. Il y a deux types de rechargement le LiveReloading et le HotReloading.

• Live reloading : recharge et rafraichit toute l’application quand un fichier change. Par exemple si vous êtes sur la seconde page de l’application, le live reloading va recharger l’application et la recharger à la page initiale
• Hot reloading : met à jour uniquement les fichiers qui ont changé et recharge seulement ce qui a changé sans perdre l’état de l’application.

ReactNative et ReactJS

ReactNative est très similaire à son petit frère ReactJS (créé pour faire des sites web). Il reprend l’approche par composant chère à ReactJS. Au lieu du HTML, ReactNative va utiliser une liste de balises qui lui sont propres : Text, Slider, View, Switch,Button, etc...

Exemple de code pour créer une page hello world :

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

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Est-ce une technologie propriétaire ?

React est sous licence BSD 3.0.Cette licence est très permissive, vous pouvez utiliser la technologie en entreprise.

Conclusion

React Native est l'une des solutions idéales pour les développeurs Web voulant créer des apps mobiles performantes et intégrées au look and feel de la plateforme.

Cet article fait partie d'une série d'articles sur ReactNative :

1. Présentation de ReactNative
2. Configurer son environnement de développement ReactNative sur Windows
3. Configurer son environnement de développement ReactNative sur MacOSX

Happy Coding :D

En savoir plus :
Gettings started (anglais)