chore(react): update get-started.md file to last english version chro…

…maui#3

content/intro-to-storybook/react/fr/get-started.md

@@ -5,30 +5,31 @@ description: 'Configurer Storybook dans votre environnement de développement'
 commit: '9245261'
 ---
 
-Storybook s'éxécute parallèlement à votre application en mode développement. Il vous aide à construire des composants UI(User Interface) qui sont isolés de la logique applicative et du contexte de votre application. Cette édition de Learn Storybook est pour React; d'autres éditions existent pour [React Native](/intro-to-storybook/react-native/en/get-started), [Vue](/intro-to-storybook/vue/fr/get-started), [Angular](/intro-to-storybook/angular/en/get-started) et [Svelte](/intro-to-storybook/svelte/en/get-started).
+Storybook s'éxécute parallèlement à votre application en mode développement. Il vous aide à construire des composants d'interface utilisateur (User Interface ou UI) isolés de la logique applicative et du contexte de votre application. Cette édition de Learn Storybook est pour React; d'autres éditions existent pour [React Native](/intro-to-storybook/react-native/fr/get-started), [Vue](/intro-to-storybook/vue/fr/get-started), [Angular](/intro-to-storybook/angular/fr/get-started), [Svelte](/intro-to-storybook/svelte/fr/get-started) et [Ember](/intro-to-storybook/ember/fr/get-started).
 
 ![Storybook et votre application](/intro-to-storybook/storybook-relationship.jpg)
 
 ## Configurer React Storybook
 
-Voici les étapes pour configurer le processus de compilation dans votre environnement. Pour commencer, nous allons utiliser [Create React App](https://github.com/facebook/create-react-app) (CRA) pour mettre en place notre système de compilation, et ensuite ajouter [Storybook](https://storybook.js.org/) et l'outil de test [Jest](https://facebook.github.io/jest/) dans notre application. Exécutons les commandes suivantes:
+Voici les étapes pour configurer le processus de compilation dans votre environnement. Pour commencer, nous allons utiliser [degit](https://github.com/Rich-Harris/degit) pour mettre en place notre système de buid. L'usage de cette librairie permet de télécharger des "templates" (des mini applications construites avec une configuration par défaut) et de vous aider à développer plus vite.
+
+Executez les commandes suivantes:
 
 ```shell:clipboard=false
-# Create our application:
-npx create-react-app taskbox
+# Clone the template
+npx degit chromaui/intro-storybook-react-template taskbox
 
 cd taskbox
 
-# Add Storybook:
-npx storybook init
+# Install dependencies
+yarn
 ```
 
 <div class="aside">
-Tout au long de ce tutoriel, nous allons utiliser <code>yarn</code> pour exécuter la majorité de nos commandes. 
-Si vous avez déjà installé <code>yarn</code>, mais que vous préférez utiliser <code>npm</code> à la place, ne vous inquiétez pas, vous pouvez toujours suivre ce tutoriel sans aucun problème. Il suffit d'ajouter le drapeau <code>--use-npm</code> à la première commande ci-dessus, CRA et Storybook en tiendront compte lors de leur initialisation. De plus, pendant que vous progressez dans le tutoriel, n'oubliez pas d'ajuster les commandes utilisées à leurs équivalents <code>npm</code>.
+💡 Ce template contient les styles necéssaires, images et toute configuration essentiels au fonctionnement de cette version du tutoriel.
 </div>
 
-Pour vérifier rapidement que les différents environnements de notre application fonctionnent correctement:
+Maintenant, nous pouvons vérifier rapidement que les différents environnements de notre application fonctionnent correctement:
 
 ```shell:clipboard=false
 # Run the test runner (Jest) in a terminal:
@@ -41,8 +42,8 @@ yarn storybook
 yarn start
 ```
 
-<div class="aside"> 
-Vous avez peut-être remarqué que nous avons ajouté le drapeau <code>--watchAll</code> à notre commande de test, ne vous inquiétez pas, c'est intentionnel, ce petit changement permettra de s'assurer que tous les tests sont effectués et que tout va bien avec notre application. Pendant que vous progressez dans ce tutoriel, vous serez exposés à différents scénarios de test. Pour vous assurer que votre suite de tests fonctionnera dans son intégralité, vous pouvez aussi ajouter ce drapeau à votre script de test dans votre <code>package.json</code> .
+<div class="aside">
+💡 Nous avons ajouté le drapeau <code>--watchAll</code> à notre commande de test, pour s'assurer que tous les tests sont effectués. Pendant que vous progressez dans ce tutoriel, vous serez exposés à différents scénarios de test. Vous pouvez aussi ajouter ce drapeau à votre script de test dans votre <code>package.json</code> .
 </div>
 
 Notre application front-end se compose de trois modules: test automatisé (Jest), développement de composants (Storybook) et l'application elle-même.
@@ -51,27 +52,30 @@ Notre application front-end se compose de trois modules: test automatisé (Jest)
 
 Selon la partie de l'application sur laquelle vous travaillez, vous voudriez peut-être exécuter un ou plusieurs de ces modules simultanément. Comme nous nous concentrerons actuellement sur la création d'un seul composant d'UI, nous continuerons à exécuter Storybook.
 
-## Réutiliser les CSS
+## Commiter les changements
 
-Taskbox réutilise des éléments de design du tutoriel GraphQL et React [l'application d'exemple](https://www.chromatic.com/blog/graphql-react-tutorial-part-1-6), donc ce ne sera pas necessaire d'écrire de CSS dans ce tutoriel. Copier et coller [ce CSS compilé](https://github.com/chromaui/learnstorybook-code/blob/master/src/index.css) dans le fichier `src/index.css`.
+A cette étape, il est préférable d'ajouter les fichiers modifiés à notre environnement de développement en local. Executez les commandes suivantes pour initialiser notre dépôt, et commiter les changements que nous avons faits jusque là.
 
-![UI de Taskbox](/intro-to-storybook/ss-browserchrome-taskbox-learnstorybook.png)
+```shell
+git init
+```
 
-<div class="aside">
-Si vous souhaitez modifier le styling, les fichiers sources LESS sont fournis dans le répertoire GitHub.
-</div>
+Suivi de:
 
-## Ajouter les assets
+```shell
+git add .
+```
 
-Pour correspondre au design prévu, vous devrez télécharger les répertoires des polices et des icônes et placer leur contenu dans votre dossier `src/assets`.
+Puis:
 
-```shell:clipboard=false
-npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
-npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon
+```shell
+git commit -m "first commit"
 ```
 
-<div class="aside">
-Nous utilisons <a href="https://github.com/Rich-Harris/degit">degit</a> pour télécharger les dossiers de GitHub. Si vous voulez le faire manuellement, vous pouvez récupérer les dossiers <a href="https://github.com/chromaui/learnstorybook-code/tree/master/src/assets/">ici</a>.
-</div>
+Et enfin:
+
+```shell
+git branch -M main
+```
 
-Après avoir ajouté le styling et les ressources, l'application aura un rendu un peu étrange. Ce n'est pas grave, car nous ne travaillons pas sur l'application pour l'instant. Nous sommes d'abord en train de construire notre premier composant!
+Il est temps maintenant développer notre premier composant!