React Native

React Native

React Native est une librairie javascript qui permet de créer des application mobile (Android & IOS)

Elle utilise Javascript et React

React Native

Pour utiliser React Native, il existe un outil très pratique : Expo

React Native

Avant de commencer quelques liens utiles :

- Le site officiel de React Native

- Le site officiel de Expo

React Native

Avant de commencer quelques liens utiles :

- La documentation officiel de React

- Le site officiel de React Native

- Le site officiel de Expo

React Native

Installation

React Native

Installation

Pour installer react native il faut d'abord installer expo :

yarn global add expo-cli
# ou npm
npm install -g expo-cli

Ensuite nous pouvons créer un projet react native grâce à expo :

expo init NomDuProjet

React Native

Installation

Pour lancer l'application, se rendre à la racine du projet

yarn start
# ou avec npm
npm start

React Native

Installation

Structure d'un projet React Native

Contient les dépendances javascript ainsi que la configuration de yarn et npm

C'est ici que sont noté toutes les librairies javascript nécessaire pour démarrer une application React Native

React Native

Installation

Structure d'un projet React Native

Contient la configuration de Babel

React Native

Installation

Structure d'un projet React Native

Contient la configuration générale de l'application mobile

React Native

Installation

Structure d'un projet React Native

Voici le fichier javascript Principal !

Contient le composant principal de notre application

React Native

Installation

Structure d'un projet React Native

Définie les fichiers qui ne doivent pas être versionnés par git

React Native

Installation

Structure d'un projet React Native

Contiendra tout notre code Javascript

React Native

Installation

Structure d'un projet React Native

Contient toutes les librairies javascript

React Native

Installation

Structure d'un projet React Native

Contient les assets : images, fonts, videos etc .... de notre application

React Native

Installation

Structure d'un projet React Native

Se sont des répertoires interne pour expo afin de stocker des informations

React Native

JSX

React Native

JSX

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

const element = (
  <View>
    <Text>Bonjour !</Text>
    <Text>Content de te voir ici.</Text>
  </View>
);

Le JSX est une syntaxe très proche de HTML utilisé pour afficher des composants

React Native

JSX

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

const element = (
  <View>
    <Text>Bonjour !</Text>
    <Text>Content de te voir ici.</Text>
  </View>
);

const element = React.createElement(View, {}, [
  React.createElement(Text, {}, ['Bonjour !']),
  React.createElement(Text, {}, ['Content de te vois ici.']),
])

En vrai, JSX ce compile en javacript :

React Native

JSX

const name = 'John Doe'

const element = (
  <div>
    <h1>Bonjour {name} !</h1>
    <h2>Content de te voir ici.</h2>
  </div>
);

Il est possible d'afficher des variables en JSX :

React Native

JSX

const name = 'John Doe'

const element = (
  <div id="super-div">
    <h1>Bonjour {name} !</h1>
    <h2>Content de te voir ici.</h2>
  </div>
);

Il est possible aussi de définir des attributs

React Native

JSX

const name = 'John Doe'
const id = 'super-div'

const element = (
  <div id={id}>
    <h1>Bonjour {name} !</h1>
    <h2>Content de te voir ici.</h2>
  </div>
);

Les variables peuvent aussi être utilisées dans les attributs

React Native

JSX

const users = ['john', 'jane', 'rose']

const element = (
  <div>
    <p>Liste des utilisateurs</p>
    <ul>
      {users.map((user) => (
        <li key={`utilisateur-${user}`}>{user}</li>
      ))}
    </ul>
  </div>
)

Il est possible de faire des boucles en utilisant la méthode map d'un tableaux

React Native

JSX

const users = ['john', 'jane', 'rose']

const element = (
  <div>
    <p>Liste des utilisateurs</p>
    <ul>
      {users.map((user) => (
        <li key={`utilisateur-${user}`}>{user}</li>
      ))}
    </ul>
  </div>
)

Boucle sur le tableaux

React Native

JSX

const users = ['john', 'jane', 'rose']

const element = (
  <div>
    <p>Liste des utilisateurs</p>
    <ul>
      {users.map((user) => (
        <li key={`utilisateur-${user}`}>{user}</li>
      ))}
    </ul>
  </div>
)

Attention, il est obligatoire de rajouter un attribut key au composant d'une boucle !

Cette attribut doit-être unique

React Native

Les composant

React Native

Les composant

import React from 'react'

export const Hello = () => {
  return <h1>Bonjour</h1>
}

Exemple de composant react

React Native

Les composant

import React from 'react'

export const Hello = () => {
  return <h1>Bonjour</h1>
}

Cette première ligne importe la librairie React.

Cette ligne est obligatoire pour tout composant

React Native

Les composant

import React from 'react'

export const Hello = () => {
  return <h1>Bonjour</h1>
}

Ici nous exportons une fonction Hello

React Native

Les composant

import React from 'react'

export const Hello = () => {
  return <h1>Bonjour</h1>
}

Cette fonction retourne du JSX

React Native

Les composant

import React from 'react'

export const Hello = () => <p>Bonjour</p>

export const AutreComposant = () => {
  return <Hello />
}

Utiliser un composant

React Native

Les composant

import React from 'react'

export const Hello = ({ name }) => {
  return <p>Bonjour {name}</p>
}

export const AutreComposant = () => {
  return <Hello name='John' />
}

Les props

React Native

Les composant

import React from 'react'

export const Hello = ({ name }) => {
  return <p>Bonjour {name}</p>
}

export const AutreComposant = () => {
  return <Hello name='John' />
}

Passage d'une props au composant Hello

React Native

Les composant

import React from 'react'

export const VeryBigTitle = ({ children }) => {
  return (
    <div className='very-big-title'>
      <h1>{children}</h1>
    </div>
  )
}

export const AutreComposant = () => {
  return <VeryBigTitle>Hello</VeryBigTitle>
}

Les children (enfants)

React Native

Les composant

import React from 'react'

export const VeryBigTitle = ({ children }) => {
  return (
    <div className='very-big-title'>
      <h1>{children}</h1>
    </div>
  )
}

export const AutreComposant = () => {
  return <VeryBigTitle>Hello</VeryBigTitle>
}

Passage d'enfant à un composant "VeryBigTitle"

React Native

Les composant

import React from 'react'

export const SuperInput = ({ onPress }) => {
  return (
    <button onClick={onPress}>Click me</button>
  )
}

export const AutreComposant = () => {
  return <SuperInput onPress={() => console.log('pressed')} />
}

Passage de fonction en props (callback)

React Native

Les composant

import React from 'react'

export const SuperInput = ({ onPress, ...restProps }) => {
  return (
    <button onClick={onPress} {...restProps}>Click me</button>
  )
}

export const AutreComposant = () => {
  return <SuperInput
    className="super-bouton"
    onPress={() => console.log('pressed')}
  />
}

Il est possible d'utiliser le "rest operator" (...) pour passer des props

React Native

Les composant

import React from 'react'

export const SuperInput = ({ onPress, ...restProps }) => {
  return (
    <button onClick={onPress} {...restProps}>Click me</button>
  )
}

export const AutreComposant = () => {
  return <SuperInput
    className="super-bouton"
    onPress={() => console.log('pressed')}
  />
}

On ajoute à notre SuperInput une props "className"

React Native

Les composant

import React from 'react'

export const SuperInput = ({ onPress, ...restProps }) => {
  return (
    <button onClick={onPress} {...restProps}>Click me</button>
  )
}

export const AutreComposant = () => {
  return <SuperInput
    className="super-bouton"
    onPress={() => console.log('pressed')}
  />
}

On récupére la props onPress et on met toutes les autres props dans une variable "restProps"

React Native

Les composant

import React from 'react'

export const SuperInput = ({ onPress, ...restProps }) => {
  return (
    <button onClick={onPress} {...restProps}>Click me</button>
  )
}

export const AutreComposant = () => {
  return <SuperInput
    className="super-bouton"
    onPress={() => console.log('pressed')}
  />
}

Ici on attache la props "onClick" à la fonction de la props "onPress"

React Native

Les composant

import React from 'react'

export const SuperInput = ({ onPress, ...restProps }) => {
  return (
    <button onClick={onPress} {...restProps}>Click me</button>
  )
}

export const AutreComposant = () => {
  return <SuperInput
    className="super-bouton"
    onPress={() => console.log('pressed')}
  />
}

On passe toutes les autres props à notre composant button

React Native

Les composant

// Hello.js
import React from 'react'

export default ({
  age,
  name = 'Stranger',
}) => {
  return (
    <div className='very-big-title'>
      <h1>{children}</h1>
    </div>
  )
}

Quelques bonnes pratique !

React Native

Les composant

// Hello.js
import React from 'react'

export default ({
  age,
  name = 'Stranger',
}) => {
  return (
    <div className='very-big-title'>
      <h1>{children}</h1>
    </div>
  )
}

Le nom du fichier correspond au nom du composant.

Un fichier = Un Composant

React Native

Les composant

// Hello.js
import React from 'react'

export default ({
  age,
  name = 'Stranger',
}) => {
  return (
    <div className='very-big-title'>
      <h1>{children}</h1>
    </div>
  )
}

Ne pas oublier d'importer la librairie React, sinon il est impossible d'écrire du JSX

React Native

Les composant

// Hello.js
import React from 'react'

export default ({
  age,
  name = 'Stranger',
}) => {
  return (
    <div className='very-big-title'>
      <h1>{children}</h1>
    </div>
  )
}

Exporter par défaut la fonction composant !

React Native

Les composant

// Hello.js
import React from 'react'

export default ({
  age,
  name = 'Stranger',
}) => {
  return (
    <div className='very-big-title'>
      <h1>{children}</h1>
    </div>
  )
}

Destructurer TOUTES les props !

Mettre les props obligatoire en premier et les facultative (valeur par défaut) en dessous

React Native

Les composant

Les composants react native

En React Native il est impossible de faire du HTML

Pour cela nous devons utiliser les composants React Native

React Native

Les composant

Exemple d'utilisation

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

export default ({ age, name = 'john' }) => {
  return (
    <View>
      <Text>Hello {name}, you are {age} years old</Text>
    </View>
  )
}

React Native

Les composant

Les feuilles de styles

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

export default ({ age, name = 'john' }) => {
  return (
    <View>
      <Text>Hello {name}, you are {age} years old</Text>
    </View>
  )
}

export const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
  },
  helloText: {
    color: 'green',
    fontSize: '20px',
  }
})

React Native

Les composant

On importe StyleSheet depuis react native

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

export default ({ age, name = 'john' }) => {
  return (
    <View>
      <Text>Hello {name}, you are {age} years old</Text>
    </View>
  )
}

export const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
  },
  helloText: {
    color: 'green',
    fontSize: '20px',
  }
})

React Native

Les composant

Nous créons une feuille de style avec StyleSheet.create

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

export default ({ age, name = 'john' }) => {
  return (
    <View>
      <Text>Hello {name}, you are {age} years old</Text>
    </View>
  )
}

export const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
  },
  helloText: {
    color: 'green',
    fontSize: '20px',
  }
})

React Native

Les composant

Nous définissons une suite de style un peu comme un feuille CSS (ici, container et helloText)

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

export default ({ age, name = 'john' }) => {
  return (
    <View>
      <Text>Hello {name}, you are {age} years old</Text>
    </View>
  )
}

export const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
  },
  helloText: {
    color: 'green',
    fontSize: 20,
  }
})

React Native

Les composant

Les propriétés CSS sont écrites en camel case (elle ne contienne le trait d'union)

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

export default ({ age, name = 'john' }) => {
  return (
    <View>
      <Text>Hello {name}, you are {age} years old</Text>
    </View>
  )
}

export const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
  },
  helloText: {
    color: 'green',
    fontSize: 20,
  }
})

React Native

Les composant

En react native, l'unité de mesure est uniquement le pixel !!!

On ne spécifie jamais "px", on spécifié toujours un number lorsque cette propriété est orpheline

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

export default ({ age, name = 'john' }) => {
  return (
    <View>
      <Text>Hello {name}, you are {age} years old</Text>
    </View>
  )
}

export const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
  },
  helloText: {
    color: 'green',
    fontSize: 20,
  }
})

React Native

Les composant

Nous attachons des styles grace à l'attribut styles

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

export default ({ age, name = 'john' }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.helloText}>Hello {name}, you are {age} years old</Text>
    </View>
  )
}

export const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
  },
  helloText: {
    color: 'green',
    fontSize: '20px',
  }
})

React Native

Le State

React Native

Le State

En React et React Native il est possible de déclarer des variables qui peuvent changer avec le temps et impacter notre interface

Ces variables portent le nom de State

Elle se déclare avec le hooks useState

React Native

Le State

import React, { useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
      </View>
      <View>
        <Text>Votre mot de passe :</Text>
        <TextInput value={password} onChangeText={setPassword} />
      </View>
      <View>
        <Button title='Connexion' />
      </View>
    </View>
  )
}

Exemple : Un formulaire de login

React Native

Le State

import React, { useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
      </View>
      <View>
        <Text>Votre mot de passe :</Text>
        <TextInput value={password} onChangeText={setPassword} />
      </View>
      <View>
        <Button title='Connexion' />
      </View>
    </View>
  )
}

Nous importons React et useState

React Native

Le State

import React, { useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
      </View>
      <View>
        <Text>Votre mot de passe :</Text>
        <TextInput value={password} onChangeText={setPassword} />
      </View>
      <View>
        <Button title='Connexion' />
      </View>
    </View>
  )
}

Nous utilisons useState

React Native

Le State

import React, { useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
      </View>
      <View>
        <Text>Votre mot de passe :</Text>
        <TextInput value={password} onChangeText={setPassword} />
      </View>
      <View>
        <Button title='Connexion' />
      </View>
    </View>
  )
}

useState retourne un tableaux de 2 valeurs :

1. La valeur

2. Un fonction pour mettre à jour la valeur et l'interface

React Native

Le State

import React, { useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
      </View>
      <View>
        <Text>Votre mot de passe :</Text>
        <TextInput value={password} onChangeText={setPassword} />
      </View>
      <View>
        <Button title='Connexion' />
      </View>
    </View>
  )
}

La fonction useState accèpte en paramètre un valeur par défaut

React Native

Le State

import React, { useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
      </View>
      <View>
        <Text>Votre mot de passe :</Text>
        <TextInput value={password} onChangeText={setPassword} />
      </View>
      <View>
        <Button title='Connexion' />
      </View>
    </View>
  )
}

Nous changeons nos états grâce au fonction "setEmail" et "setPassword"

React Native

Les Effect

React Native

Les Effect

Les effets sont de simple fonctions qui se déclenche lorsque une ou plusieurs variables changent de valeurs

Elles peuvent avoir des rôles divers et variés mais sont généralement utilisé pour effectuer toutes les taches que l'utilisateur ne voit pas

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState('')

  useEffect(() => {}, [email])

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
        {!!emailError && <Text>{emailError}</Text>}
      </View>
      {/* ... */}
    </View>
  )
}

Exemple de useEffect : La validation d'un email

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState('')

  useEffect(() => {}, [email])

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
        {!!emailError && <Text>{emailError}</Text>}
      </View>
      {/* ... */}
    </View>
  )
}

Nous importons le hooks "useEffect" de react

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState('')

  useEffect(() => {}, [email])

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
        {!!emailError && <Text>{emailError}</Text>}
      </View>
      {/* ... */}
    </View>
  )
}

Nous déclarons un "effect" qui accépte 2 arguments

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState('')

  useEffect(() => {}, [email])

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
        {!!emailError && <Text>{emailError}</Text>}
      </View>
      {/* ... */}
    </View>
  )
}

Le premier est la fonction qui contiendra le code de notre effect (validation de l'email)

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState('')

  useEffect(() => {}, [email])

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
        {!!emailError && <Text>{emailError}</Text>}
      </View>
      {/* ... */}
    </View>
  )
}

Le second est un tableaux qui définie les variables qui déclencherons l'effect

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState('')

  useEffect(() => {}, [email])

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
        {!!emailError && <Text>{emailError}</Text>}
      </View>
      {/* ... */}
    </View>
  )
}

Ici, l'effect se déclenchera à chaque changement de notre variable "email"

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState('')

  useEffect(() => {}, [])

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
        {!!emailError && <Text>{emailError}</Text>}
      </View>
      {/* ... */}
    </View>
  )
}

ATTENTION

Un effet attaché à un tableaux vide se déclenchera au premier affichage de notre composant seulement !

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState('')

  useEffect(() => {
    if (!email) {
      setEmailError('Vous devez spécifier un email')
    }

    if (!/^[^@ ]+@[^@]+\.[a-zA-Z0-9]+$/.test(email)) {
      setEmailError('Invalide email')
    }
  }, [email])

  return (
    <View>
      <View>
        <Text>Votre email :</Text>
        <TextInput value={email} onChangeText={setEmail} />
        {!!emailError && <Text>{emailError}</Text>}
      </View>
      {/* ... */}
    </View>
  )
}

Voici le code finale de vérification :

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  useEffect(() => {
    console.log('démarrage de l\'effet')
    
    return () => {
      console.log('fin de l\'effet')
    }
  }, [])

  return (
    <View>
      {/* ... */}
    </View>
  )
}

Il est possible avec useEffect de définir une fonction qui s'éxécutera à la fin de notre effet

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  useEffect(() => {
    console.log('démarrage de l\'effet')
    
    return () => {
      console.log('fin de l\'effet')
    }
  }, [])

  return (
    <View>
      {/* ... */}
    </View>
  )
}

Ici, cette ligne s'éxécute lorsque le composant s'affiche

React Native

Les Effect

import React, { useEffect, useState } from 'react'
import { TextInput, View } from 'react-native'

export default () => {
  useEffect(() => {
    console.log('démarrage de l\'effet')
    
    return () => {
      console.log('fin de l\'effet')
    }
  }, [])

  return (
    <View>
      {/* ... */}
    </View>
  )
}

Ici cette fonction sera lancé lorsque le composant se dés-affiche

React Native

By David Jegat

React Native

185

David Jegat