Ce workshop permet de découvrir React Native par la pratique, étape par étape.
- Le principe de l'application
- Les pré-requis techniques
- Pré-installer les dépendances
- Les étapes du workshop
- C'est parti !
Dans ce workshop, nous allons développer une application mobile permettant de consulter une liste de films.
Les principales fonctionnalités de l'application sont :
- Lister les films actuellement à l'affiche / les plus populaires du moment / les mieux notés
- Afficher le détail d'un film avec sa description et son casting
- Ajouter des films aux favoris
Nous allons utiliser la base de données THE MOVIE DB qui nous permettra d'avoir une base de films conséquente.
Les pré-requis techniques sont les suivants :
- Homebrew
- Git
- Node
- Watchman
- React Native CLI
- Create React Native App
- Yarn
- Un éditeur de texte : Atom / Visual Studio Code / IntelliJ ...
- Xcode
- Android Studio
Homebrew est un gestionnaire de paquets pour Mac, la marche à suivre pour l'installer est disponible sur le site officiel : https://brew.sh/
-
Avec Homebrew :
$ brew install git -
Sans Homebrew :
Téléchargez et installez la version de Git correspondante à votre système d'exploitation, en suivant les indications disponibles sur le site officiel : https://git-scm.com/
-
Avec Homebrew :
$ brew install node -
Sans Homebrew :
Téléchargez et installez la version de Node.js correspondant à votre système d'exploitation, en suivant les indications disponibles sur le site officiel : https://nodejs.org/
-
Avec Homebrew :
$ brew install watchman -
Sans Homebrew :
Téléchargez et installez la version de Watchman correspondant à votre système d'exploitation, en suivant les indications disponibles sur le site officiel : https://facebook.github.io/watchman/
-
Avec Homebrew :
$ brew install yarn -
Sans Homebrew :
Téléchargez et installez la version de Yarn correspondant à votre système d'exploitation, en suivant les indications disponibles sur le site officiel : https://yarnpkg.com/
$ yarn global add react-native-cli
$ yarn global add create-react-native-app
Choisissez l'éditeur de texte / IDE qui vous convient le mieux parmis ceux qui gère le javascript.
Par exemple :
- Atom : https://atom.io/
- Visual Studio Code : https://code.visualstudio.com/
- IntelliJ : https://www.jetbrains.com/idea/
- WebStorm : https://www.jetbrains.com/webstorm/
Xcode est installable depuis le Mac App Store présent sur votre Mac.
Vous pouvez l'installer directement depuis ici.
Android Studio est l'IDE officiel pour développer des applications Android. Vous pouvez le télécharger ici.
Pour le configurer ainsi qu'un émulateur Android, vous pouvez suivre la documentation officielle de React Native
Pour pré-installer les dépendances à l'avance, vous pouvez lancer le script install.sh qui lancera les commandes yarn install dans les différentes étapes du workshop.
- Étape 1
- Liste des films à l'afiche
- Application du style sur la liste
- Étape 2
- Navigation vers l'écran de détail d'un film
- Ajout d'une animation
- Étape 3
- Navigation pour Android
- Navigation pour iOS
- Étape 4
- Ajout de Redux et persistance du store
- Éjection de l'application
- Gestion des permissions
- Accès à l'appareil photo et aux images du device
- Étape 5
- Ajout de la librairie react-native-onesignal
- Ajout de notifications pour Android
- Étape 6
- Création d'un apk
- Création d'un ipa
C'est le moment de commencer ! La première étape dispose d'un projet déjà créé mais si vous souhaitez savoir comment partir de zéro, il suffit d'exécuter ceci :
$ create-react-native-app nom-de-mon-app
$ cd nom-de-mon-app
Le dossier qui vient d'être créé contient tout ce qu'il faut pour commencer à développer votre application.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent