Qu’est-ce que React Native ?

React Native est un framework mobile hybride développé par Facebook depuis début 2015. Il continue d’évoluer avec le soutient de nombreux contributeurs sur Github.

« Learn once, write everywhere »

Le but de React Native est de pouvoir réutiliser le maximum de code entre les différentes plateformes (iOS et Android). Il offre un gain de temps considérable par rapport à du développement spécifique, tout en étant aussi performant.

L’écriture en javascript permet aux développeurs web de construire une application mobile native, contrairement à Cordova qui encapsule l’application dans une webview.

React Native utilise le moteur JavaScriptCore avec le transpileur Babel, il est compatible ES5, ES6 ou ES7 sans problème.

Spécificités

  • Pas de DOM, inutile de faire appel à window ou document, React Native n’utilise pas de DOM. Attention donc à la compatibilité de certaines librairies JS.
  • Pas de balises HTML, les tags spécifiques au DOM ne sont donc pas admis non plus (<div>, <section>, <article>,…). L’interface doit être construite à partir des composants React-Native uniquement (ou de composants que nous aurions crée) : <View>, <Text>, <Image>,…
  • Tout doit être packagé, toutes les ressources doivent être appelée, soit par un chemin absolu, soit par un require : {{uri: urlDeMonImage}} ou {require('./chemin/de/mon/image')}.
  • Styles, on déclare le style d’un composant avec l’attribut style, puis on crée un objet StyleSheet pour les définir.

Un exemple concret

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);