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 !

Un peu d'explication

Ouvrer le dossier de l'app dans votre IDE préféré (Si vous ouvrez NetBeans, vous pouvez arrêter 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, il est possible d'installer des librairies mais nous verrons cela plus tard ensemble.

Le style

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

Première modification

Afin de comprendre plus facilement, nous allons faire une petite modification :
Nous allons modifier la couleur du text au centre de l'écran :

Ajouter un style au text

Dans le morceau de code que je vous ai demandé de remplacé, nous avons bien un texte mais la balise ne dispose pas de style. Nous allons donc en rajouter un.

Remplacer la ligne :

        <Text>Open up App.js to start working on your app!</Text>

Par la ligne suivante :

        <Text style={styles.text}>Open up App.js to start working on your app!</Text>

Dans le style, ajoutez le style suivant :

  text: {
    color: 'red',
  },

Bravo ! Vous avez ajouté votre premier style !

Ajouter un bouton

Maintenant que vous savez modifier la couleur d'un texte et que vous pensez pouvoir créer Facebook2.0, nous allons d'abord apprendre à ajouter un bouton (pour pouvoir liker les postes de vos amis).

Pour ajouter un bouton, nous allons devoir importer le composant Bouton déjà existant en React-Native.

Pour ce faire, vous allez devoir ajouter Button dans la ligne :

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

Ce qui vous donnera ceci :

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

Maintenant que le composant Bouton est bien importé, nous allons pouvoir le déclarer. Juste en dessous du texte précédement modifié, ajouté les lignes suivantes :

<Button
   onPress={() => console.log('Clicki..clickiti...CLICKITICLIK')}
   title="Click Me"
   color="#841584"
/>

Quelques explications sur le bouton :
Le onPress, title et color sont des attributs de ce composant.

• onPress : Va permettre d'appeller une fonction lorsque le bouton sera pressé (rien à voir avec le citron pour le coup)
• title : Le texte affiché sur le bouton
• color : La couleur du bouton

Maintenant que le bouton est créé, nous allons pouvoir créer une fonction qui sera appelée lors du clique.

Entre la déclaration de la classe et la méthode render, ajoutez la fonction suivante :

handleBtn() {
    console.log('On crée pas des fonctions nouuuuuuuus');
}

A savoir que le nom de la fonction est totalement libre.

Maintenant que la fonction est créée, nous allons l'appelée :
FONCTIOOOOOOOOOOOOOON

Modifier l'attribut onPress comme ceci :

          onPress={this.handleBtn}

Pour avoir un résultat un peu plus concret, nous allons ajouté l'apparition d'un Toast dans la fonction :

handleBtn() {
    ToastAndroid.show(
      'La force est puissante dans votre famille !',
      ToastAndroid.LONG,
      ToastAndroid.CENTER,
    );
  }

N'oubliez pas d'importer le composant ToastAndroid de React-Native.
Bravo ! Vous avez créer votre premier bouton !

Différence state et props

Avant d'aller plus loin, je vais devoir vous parler des state et des props, cette partie va être un peu plus théorique mais vous verrez c'est finger in the noze !

En react-native il existe 2 manières de sauvegarder et d'utiliser des données.

Les states sont utilisés pour sauvegarder des données uniquement utilisable dans cette classe.
Attention les states sont réinitialisée si le composant est détruit.

Les props quand a eux permettent de passer une donnée déjà existante à un composant afin de l'utiliser dans ce nouveau composant.
Les props s'envoient par attribut lors de la déclaration d'un composant, comme par exemple l'attribut color du composant button.

Il existe également un moyen de sauvegarder des données de manière permanente dans l'app, cette méthode est utilisable via Redux que nous allons voir plus tard.

Créer un composant

Nous avons vu comment importer et utiliser un composant déjà existant (Boutton et ToastAndroid), maintenant nous allons voir comment créer notre propre composant.

Créer son propre composant va nous permettre de pouvoir réutiliser ce composant avec un simple appel et donc eviter les duplications de code.

Pour utiliser les bonnes manières directement, nous allons créer un dossier src a la racine. Ensuite nous allons créer un dossier components dans le dossier que nous avons créer juste avant.

Dans ce dossier components, nous allons créer un fichier index.js et un fichier style.js.

Nous allons commencer par modifier le fichier index.js.

index.js

Le fichier index va contenir les fonctions et les vues (comme dans App.js).

style.js

Le fichier style va contenir nos styles que nous déclarons dans le StyleSheet.