1h30 de videos pour comprendre React Native et Redux

Le 25 August 2017 Par David Leuliette — Modifier l’article

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 du MVC, autrement dit la vue où généralement on met tout ce qui est affichage. C'est complètement différent d'un framework comme ~~AngularJS~~ Angular.
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é.

React Native mindnode

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

Pour terminer voici comment coder un facebook login avec react native en 20 secondes :

react native facebook login

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.