add create app react 2019 init

_posts/codelabs/2019-08-01-developper-app-react-en-2019/index.json

@@ -0,0 +1,26 @@
+{
+  "title": "Développer une application efficacement",
+  "permalink": "/fr/développer-une-application-react-efficacement",
+  "excerpt": "Nouveau sur React ? Venez apprendre les bases afin de développer une application React de manière efficace !",
+  "slug": "développer-une-application-react",
+  "stepTitles": [
+    "Introduction à React",
+    "Initialisation d'un nouveau projet, et architecture",
+    "Premiers composants",
+    "Composants avancés",
+    "Initiation aux hooks",
+    "Traductions",
+    "Formulaire avec Formik",
+    "Storybook",
+    "Optimisons (index.js), fichiers constants, etc",
+    "Test des composants avec Enzyme"
+  ],
+  "date": "2019-08-01",
+  "authors": [
+    {
+      "name": "Rémi Mavillaz",
+      "username": "rmavillaz"
+    }
+  ]
+  }
+

_posts/codelabs/2019-08-01-developper-app-react-en-2019/index.md

@@ -0,0 +1,31 @@
+## Qu'est-ce que React ?
+React est une **librairie** créé par Facebook afin de créer des interfaces utilisateurs interactives. Le principe est extrèmement simple puisqu'il s'agit de coder chaque élément de votre interface en composants indépendants puis de les imbriquer jusqu'à avoir votre page complète! Un peu comme des legos finalement :)
+
+La première version de React n'est plus toute jeune, datant déjà de 2013, pour arriver aujourd'hui à la version 16.8 ! La librairie a connu énormément de changements au fil des années, il est donc important de bien connaitre la version que vous allez utiliser pour votre application.
+
+> React une **librairie**, j'insiste sur ce point car beaucoup le confonde avec un framework comme Angular. Ce n'est pas du tout la même chose !
+
+## Apprendre React facilement
+
+Dans ce tutoriel, nous allons développer une application from scratch afin de voir les spécificités les plus importantes de React ainsi que les librairies quasi indispensables dans un projet client ! Pour cela, nous allons parler de:
+
+- Composants
+- Containers
+- State
+- Props
+- ES6
+- Hooks
+
+Si tout cela vous semble un peu obscur, ne vous inquiétez pas, nous verrons cela petit à petit :)
+
+Pour info, il est également possible de faire des applications mobiles natives avec react-native. Nous n'allons pas aborder le sujet mais sachez que le principe est exactement pareil. Si vous savez coder en React, alors React native n'aura plus aucun secret pour vous.
+
+## Pourquoi React?
+
+Premièrement: la performance ! Avec le Javascript, on a tendance à multiplier les interactions avec le DOM du navigateur, ce qui a tendance à ralentir celui-ci. React utilise un DOM virtuel (une copie du DOM réelle), qu'il va mettre à jour en fonction des interactions de l'utilisateur. Ainsi, il va pouvoir comparer le DOM virtuel et le DOM réel afin de modifier uniquement ce qui est nécessaire.
+
+React est devenu très populaire au fil des années et est utilisé par des grands groupes comme Netflix, Twitter, AirBnB, Meetic, et bien d'autres ! La communauté est aussi très très active, il y a énormément de librairies qui peuvent être utilisées avec React et qui peuvent répondre a vos besoins. 
+
+Celle-ci est aussi mise à jour très régulièrement, surtout ces dernières années où la manière de coder est devenu presque totalement différente comparé a ses débuts ! Avec l'avantage de pouvoir utiliser les nouvelles fonctionnalités de React sans migrer toute votre application.
+
+Convaincu? Alors, c'est parti !

_posts/codelabs/2019-08-01-developper-app-react-en-2019/step1.md

@@ -0,0 +1,51 @@
+## Premiers pas
+
+### Pré-requis
+
+Avant d'installer une application React, il faut avoir NPM sur votre machine avec une version 5.2+ ainsi que Yarn. Ces 2 utilitaires vont permettre de gérer les dépendances de votre application.
+
+Nous n'utiliserons pas Docker dans ce tutoriel.
+
+Avant de passer à la suite, je vous conseille fortement d'aller lire [l'article de l'astronaute mehdi afin de maitriser tous les aspects de l'ES6](https://blog.eleven-labs.com/fr/lesnouveauteses6parti/) !
+
+### Initialisation du projet
+
+Nous allons créer une interface simple qui permet de visualiser 4 planetes avec la possibilité d'ajouter des astronautes à ces planètes.
+Pour créer une nouveau projet react, nous allons utiliser la commande create-react-app suivante:
+
+```js
+npx create-react-app planetsapp
+```
+
+Cette commande va créer un nouveau projet React déjà configuré, vous n'avez pas besoin de configurer WebPack par exemple. Vous avez également a disposition, des librairies très utiles à React et des commandes qui vont lancer les tests. Plutôt pratique !
+A la fin de l'installation, vous devriez avoir cela:
+
+![Installation de l'application avec succès](../../assets/2019-08-01-developper-app-react-en-2019/cra_install_success.png)
+
+Comme indiqué, vous pouvez lancer l'application:
+
+```js
+cd planetsapp
+yarn start
+```
+
+Allez sur http://localhost:3000/ depuis votre navigateur pour voir l'application, tout est prêt pour coder ! Le rechargement se fait automatiquement lorsque vous coder, plutot sympa !
+
+### Architecture
+
+Comme vu dans l'introduction, React est une librairie et non un framework, vous êtes totalement libre de créer les dossiers, les composants comme vous le souhaitez. Néanmoins, la communauté React ainsi que l'équipe React propose une architecture "standard" afin de s'y retrouver entre les projets.
+
+Ouvrez votre meilleur IDE afin de visualiser l'architecture:
+
+![Dossier de l'application](https://storage.googleapis.com/tutos/assets/2019-08-01-developper-app-react-en-2019/directories_app.png)
+
+- node_modules: contient toutes les librairies que vous avez installé. ***Vous ne devez jamais touché à ce dossier.***
+- public: contient le html de base ainsi que le favicon
+- package.json: contient toutes les librairies et commandes disponibles
+- src: c'est ici que vous allez coder. Le point d'entrée de votre application se situe dans `index.js`.
+
+Il s'occupe de récuperer un élement React afin de l'afficher dans le DOM. Vous n'avez, pour l'instant, pas à toucher ce fichier. Vous pouvez éventuellement supprimer le code concernant le registerWorker, il n'est pas utile dans notre cas.
+
+Le fichier `App.js` est le composant racine créé par le create-react-app, il s'agit d'un exemple et affiche le logo React sur l'interface.
+
+C'est à partir d'ici que nous allons coder et c'est justement ce que nous allons faire dans notre prochaine étape ! Youhou !

_posts/codelabs/2019-08-01-developper-app-react-en-2019/step2.md

@@ -0,0 +1,126 @@
+## Les composants React
+
+### Définition
+
+React permet de créer des composants, ce terme va donc revenir constamment et il est important de savoir de quoi il s'agit. Un composant est un élement de votre interface qui doit être indépendant et réutilisable.
+Ainsi, plusieurs composants vont vous permettre de créer vos pages, un peu comme une arborescence !
+
+![Arborescence](../../assets/2019-08-01-developper-app-react-en-2019/component_tree_shema.png)
+
+
+### Découpage d'une page
+
+Pour donner un exemple, nous allons découper une page qui affiche 1 planète avec sa description.
+
+![Découpage d'une page en composant](../../assets/2019-08-01-developper-app-react-en-2019/tree_components.png)
+
+J'ai encadré tout ce qui peut potentiellement être un composant. par exemple le titre et le sous titre. La tâche est un peu compliqué lorsqu'il faut afficher les informations d'une planète.
+
+Le premier composant (en rouge) est un layout, il est là principalement pour le style. Il contient 2 autres composants (en vert), le premier affichera l'image de la planète ainsi que ses points. Le 2eme composant affichera toutes les infos de la planete (nom, citation, description, nombre d'astronautes).
+
+Bien évidemment, les composants en vert peuvent aussi être découpés. Chaque composant (en bleu) s'occupera donc d'une seule information et sera totalement unitaire. Un composant bleu pourra très bien être réutilisé ailleurs sur la page.
+
+il est très important de faire cette conception lorsque vous développez une application. Si vous avez une maquette, c'est parfait, sinon, vous ne devez pas hésiter à prendre une feuille, de dessiner grosso modo votre application et de la découper. Vous y verrez beaucoup plus clair pour coder !
+
+React gère beaucoup plus facilement les petits composants et vous pourrez l'optimiser au mieux. Nous y reviendront un peu plus tard :)
+
+### Premier composant
+
+Vous attendiez cette étape avec impatience, mais nous y voilà enfin. Il est temps de coder notre premier composant !
+
+Nos composants se trouveront dans le dossier `components` à la racine de `src`. Nous allons créer un fichier `Title.jsx` à l'intérieur.
+
+Un fichier jsx? Kézako?
+
+Le jsx est une extension de javascript et va permettre d'introduire des balises dans votre javascript. Avant, pour créer un élément React, il fallait utiliser la fonction suivante:
+
+```js
+React.createElement('button', ...children)
+```
+
+Avec le jsx:
+```js
+return <button>{children}</button>
+```
+Le jsx rend le code plus sympa à lire !
+
+Retournons à notre fichier Title.jsx et insérez le code suivant:
+
+![notre premier composant](../../assets/2019-08-01-developper-app-react-en-2019/title_component.png)
+
+Simple non? il s'agit d'une fonction javascript qui retourne un élément React. Pour l'afficher sur notre page, retournons dans `App.js` à la racine de `/src`.
+
+![Affichage du composant](../../assets/2019-08-01-developper-app-react-en-2019/display_title_page.png)
+
+J'en ai profité pour supprimer le code qui affiche le logo React, vous pouvez en faire de même ;)
+Si vous allez sur votre navigateur, le titre doit s'afficher correctement. Bien joué !
+
+### Les props
+
+Vous l'avez surement constaté mais, le composant TitlePage est une fonction javascript et elle peut recevoir qu'un seul argument nommé `Props`. Ainsi, un composant parent peut injecter des données a ses composants enfants !
+Lorsqu'un composant reçoit une props ou qu'elle est mise à jour, ***un nouveau rendu est effectué automatiquement***.
+
+Dans notre cas, on a un composant TitlePage qui affiche le titre de la page, mais nous l'avons écrit directement dans le composant. Comme je l'ai expliqué au début, un composant doit être réutilisable, ce n'est pas le cas ici !
+
+On va donc lui injecter une props pour que son affichage soit dynamique. 
+
+```javascript
+// TitlePage.jsx
+const TitlePage = ({ title }) => {
+    return <h1>{title}</h1>
+};
+
+// App.jsx
+const App = () => (
+  <div className="App">
+    <TitlePage title="Bienvenue sur le système planétaire d'Eleven labs !" />
+    <TitlePage title="Un 2ème titre" />
+  </div>
+);
+```
+
+J'ai utilisé la destructuration pour récupérer la propriété `title` de l'objet props et on l'affiche dans notre JSX. Notre composant est désormais réutilisable !
+
+### Vérifier les props
+
+Les props sont essentielles lorsque vous créez des composants, vous allez les utiliser énormément. Mais que se passe-t-il si on injecte pas la propriété `title` à notre composant?
+Rien ne s'affichera, pire il peut potentiellement faire planter l'application ! Si le composant est dépendant d'une props, il se doit de gérer le cas où celui-ci est absent ***en plus de le notifier aux développeurs***.
+
+Il y a plusieurs moyens de faire cela 
+:
+```jsx
+// TitlePage.jsx
+import { string } from 'prop-types';
+
+const TitlePage = ({ title = "Titre par défaut" }) => {
+    return <h1>{title}</h1>
+};
+
+// On définit les types
+TitlePage.propTypes = {
+  title: string.isRequired,
+};
+
+// On définit les valeurs par défaut
+TitlePage.defaultProps = {
+  title: 'Titre par défaut',
+};
+```
+
+Il est possible lorsque l'on destructure les props, de mettre une valeur par défaut pour chaque à chaque propriété.
+
+Il existe également les prop-types provenant de la librairie du même nom. En créant un composant TitlePage, on va pouvoir lui définir les types (fonction, array, string, objet, etc) de chaque props, et s'ils sont requis.
+En cas d'oubli, une erreur apparaitra dans la console afin de notifier au développeur que le composant risque d'être instable.
+
+***Cette vérification des props n'est pas obligatoire mais je vous conseille fortement de le faire à chaque création ou mise à jour de composant***. 
+
+
+> Vous pouvez utiliser des alternatives plus poussées comme [Flow](https://flow.org/en/docs/react/) ou passer en [TypeScript](https://www.typescriptlang.org/). Elles permettent de générer des erreurs JS si les props ne sont pas utilisées correctement.
+
+
+Maintenant que les props n'ont plus aucun secret pour vous, il est temps d'afficher les infos d'une planète !
+
+---
+Retrouvez le code de l'étape 2 sur mon [Github](https://github.com/KizeRemi/Tutoriel-react/tree/step-2).
+
+---