1h30 de videos pour comprendre React Native et Redux
C'est la fin de la saison 7 de Game of Thrones. Vous venez d'apprendre que la mère de John Snow est Cersei. Vous sentez déjà le manque de vidéos monter en vous. Voici un super cliffhanger :
Comprendre
react-native
est égal à 2 épisodes de GoT
Dans cet article je vais vous apprendre comment je me fais passer pour un développeur mobile en codant du JavaScript
.
Si vous ne comprenez rien à React, Redux, Flux et compagnie, voici une sélection de vidéos qui vous permettra d'avoir de la street cred.
React Native en une image
Pour bien commencer vous devez comprendre 2 choses :
- React c'est le
V
duMVC
, autrement dit la vue où généralement on met tout ce qui est affichage. C'est complètement différent d'un framework commeAngularJSAngular. - React native permet de compiler le code en application native pour les mobiles iOS et Android.
- Les devtools comme
Expo
pour le debug sont de très bonne qualité.
J'expliquerai les différences avec une solution comme cordova dans un prochain article.
👉 Cordova Vs. React Mindmapping
Comprendre react native
Damien est un mec bien. Avant il était un peu perdu et codait du Java pour Android. Cela lui prenait des plombes et il devait écrire 1000 lignes pour créer des choses simples.
Maintenant il écrit du JavaScript
, utilise flexbox
et il kiffe la vibe (Même si ce n'est pas encore statiquement typé mais cela est une autre histoire)
React Native dans vos Apps, vos Apps dans React Native – Damien Cavaillès à MiXiT
Comprendre Redux
Dans la première vidéo vous avez appris la notion de machine à états avec comme exemple la Machine de Mealy. La 4ème minute de la prochaine video va vous étonner : vous y découvrirez le secret sur l'histoire de Redux.
Organisez la logique de votre application Web avec Redux – Matthieu Lux Devoxx
Apprendre react-native
C'est parti! Ouvrez votre terminal et commencez par orchestrer vos composants React Native. Si vous utilisez redux, n'oubliez pas que :
- Le State est en lecture seule.
- On donne le state au Reducer et 🎩 ça fait de la magie.
RTFM
Pour apprendre une nouvelle technologie mon meilleur conseil est de lire la doc. Faire des recherches random stackoverflow peut être utile. Mais coder le hello-world officiel dans un premier temps c'est mieux.
👉 https://facebook.github.io/react-native/docs/getting-started.html
Maitriser les différentes étapes
Si vous avez vu Matrix, vous savez que le Mérovingien cache son code dans différentes couches d'abstration pour son gateau.
Dans le monde de la programmation c'est pareil. Vous devez apprendre dans l'ordre les différentes couches pour réussir à produire quelque chose et ne pas faire n'importe quoi.
👉 http://www.reactnativeexpress.com/
Trouver des composants
Une fois que vous avez les bases, ne foncez pas directement dans la jungle npm
. C'est dangereux de s'aventurer tout seul.
Pour vous aider, faites confiance à la communauté qui fait la sélection des meilleurs repos react-native disponibles sur GitHub.
👉 https://github.com/jondot/awesome-react-native
🎁 Simple facebook login
Pour terminer voici comment coder un facebook login avec react native en 20 secondes :
J'espère que cet article vous a plu. N'hésitez pas à me poser des questions sur twitter si vous êtes bloqué.
Ce n’est pas fini
Ai-je manqué quelque chose? Le contenu n'est plus à jour? Contactez @flexbox_
Je met continuellement à jour ces guides afin d’avoir un contenu le plus précis et le plus à jour sur le Web.
1h30 de videos pour comprendre React Native et Redux
Tweet