React-native

Bienvenue sur la page React-Native ! Vous y trouverez comment préparer votre machine et créer votre premier projet !

Préparation de la machine

Pour suivre ce tutoriel dans des conditions optimales, voici les éléments nécessaires :

• PC Windows ou Linux
• 8 litres de café
• Environ 1 heure devant vous
• Un fruit au choix (selon vos préférences)
• Un téléphone Android
• Un cable afin de connecter votre téléphone au PC

Dans un premier temps, vous devez installer les dépendance suivantes :

• Node
• JDK (Java Development Kit)
• Android Studio

Ensuite vous devez configurer les variables d’environnement

Variables d'environnement

Linux

Les variables se trouvent ici : $HOME/.bash_profile ou $HOME/.bashrc

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Windows

Ouvrer le Paneau de control Windows
Cliquer sur le compte utiliateur, ensuite recliquer de nouveau sur le compte utilisateur
Cliquer sur Changer les variables d'environnement
Cliquer sur Nouveau afin de créer la variable ANDROID_HOME qui pointe vers la localisation de votre SDK:

MacOs

Bon chance

Création de votre premier projet

Maintenant que votre machine est prête, nous allons pouvoir rentrer dans le bousin !

Voici la commande afin de créer votre projet :
Attention a bien vous placer dans un dossier dédié à ce projet.
Dans la ligne suivante, MonProjetDuFutur étant le nom de votre projet.

npx react-native init MonProjetDuFutur

Félicitation vous avez créer votre premier projet ! Prenez un café et manger le fruit mentionné précédement

Lancement de votre projet

Maintenant que votre projet est lancé, il est temps de le tester sur un appareil Android (c'est quand même le principe du tuto)
Si jamais vous n'avez pas de téléphone à votre disposition, vous pouvez lancer un émulateur Android via Android Studio mais vous risquez d'y perdre en performances.

Connecter votre téléphone à votre PC et aurotiser le débogage.
Ensuite, ouvrez 2 consoles sur votre PC.

Dans la première, tapez la commande suivante :

npx react-native start

Vous devez voir ceci (ou quelque chose de similaire) apparaitre :

Dans la seconde console, taper la ligne suivante :

npx react-native run-android

Vous devriez voir apparaitre sur votre téléphone votre app !

Première modification

Ouvrer le dossier de l'app dans votre IDE préféré (Si vous ouvrez NetBeans, vous pouvez arreter le tutoriel ici. Je ne cautionne pas ce genre de choses.)

Aller dans le fichier App.js , vous devriez voir beaucoup de code. Dans un premier temps, supprimez tout et remplacez ce code par ceci :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Maintenant que nous y voyons plus clair, on va pouvoir commencer a jouer !

Dans le code ci-dessus, vous pouvez distinguez 2 choses :

1. Les vues
2. Le style

Les vues

Les vues sont contenues dans le render suivi par le return.
Tout ce que vous allez indiquer dans ce bloc sera affiché à l'écran.

Vous pouvez suivre ce lien afin d'avoir accès à l'intégralité des composants inclus dans React-Native.

Si vous voulez en ajouter d'autres, vous pouvez installer des librairies mais nous verrons cela plus tard.

Le style

Le style initialisé par le composant StyleSheet va permettre de donner du style à nos composants.