#ReactNative

@tom32i

×

📲

Qu'est-ce que c'est ?

Pas une webview!

Du react qui pilote des composants natifs

• Design en composants
• Workflow react
• Rend des blocks natifs

Pas vraiment du react js

• Style
• Composants natifs
• Organisation et navigation

import React, { Component } from 'react';
import { Text, TextInput, ScrollView, StyleSheet } from 'react-native';

export default class Login extends Component {
  // ...
  render() {
    return (
      <ScrollView>
        <TextInput onChangeText={email => this.setState({ email })} style={styles.input} />
        <TouchableOpacity onPress={this.send} style={styles.button}>
          <Text>Log me in</Text>
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

// ...

export default class Login extends Component {
  static styles = StyleSheet.create({
    input: {
      padding: 20,
    },
    button: {
      backgroundColor: 'white',
      color: 'blue',
    },
  });

  // ...
}

Développement

Génération ✨

Workflow ⌨️

• Packager : react-native start
• Votre app dans un device : react-native run-ios

Mise en production 🚀

• Releases natives : xcodebuild / gradle
• Build JS intégré

Demo ! 🤩

Notre bilan

Fonctionnalités

• 🛠 UI Kits natifs
• 🤠 Modules de la communauté
• ⚙️ Compatible avec JS
• 📱 Limites natives
• 👯‍♀️ Pas de multi-app ?
• 🕹 Pas adapté pour du très interactif

Coût et production

• 🎉 Du natif bi-plateforme en JS !
• 🔒 Du vrai natif...
• ⚠️ Attention à la marche
• ⚡️ Productivité
• 🏋️‍♀️ Builds, stores, release ...

Résultats

• 📱 Vrai feeling natif
• 💪 Performances très satisfaisantes
• 🗣 Très bons retours utilisateurs
• 🍏 Passe bien la validation Apple
• 🎯 Un peu de spécifique plateforme
• ⚖️ Poids raisonable (< 10Mb)
• 🎢 Mise à jour dans le temps ?
• 🥈 Ça ne remplace pas le natif

Vous avez mon feu vert !

Quelques conseils pour vous lancer

• Faites-vous la main
• Vérifiez la faisabilité des points clés
• Soyez prudents avec la navigation
• Attention aux "UI frameworks"
•