Débutez avec React

Vous commencez à maîtriser les bases du fonctionnement de React ? C'est très bien ! Nous allons passer à l'étape supérieure dans cette partie, en construisant notre première app complète.

Découvrez Create React App (CRA)

Comprenez l'importance des outils automatisés

Nous avons appris à utiliser les liens CDN de React, ReactDOM, et à paramétrer Babel dans CodePen pour rapidement créer une app React. Mais cette technique n'est quasiment pas utilisée dans la vie de tous les jours d'un développeur.

À la place, les développeuses et développeurs utilisent des outils automatisés pour créer une base de code, qui dispose des outils essentiels déjà préconfigurés. Pour vous citer quelques-unes des fonctionnalités de ces outils, ils permettent de :

• gérer les différentes dépendances (bibliothèques) utilisées par notre app ;

• optimiser le chargement de notre code dans les navigateurs ;

• importer du CSS et des images ;

• gérer les différentes versions de JavaScript ;

• faciliter l'expérience de développement, en rechargeant la page lorsque le code est modifié.

Découvrez CRA

Également créé par les équipes de Facebook, Create React App est un outil qui vous aidera à faire tout ce que je viens de vous citer. S'il existe d'autres outils (Next, Gatsby, Parcel, etc.), Create React App reste la référence, notamment pour les nouveaux utilisateurs de React.

Create React App va vous permettre de générer un squelette de code pour votre application. Il embarque un certain nombre d'outils préconfigurés, tels que Webpack, Babel et ESLint, afin de vous garantir la meilleure expérience de développement possible.

Installez et lancez CRA

Pour commencer, placez-vous dans le dossier où vous voulez créer votre projet. Personnellement, j'ai créé un dossier workflow  au même niveau que Downloads, Documents, etc., dans lequel je mets tous mes projets de code.

Pour initialiser votre projet, nous allons faire :

yarn create react-app la-maison-jungle

Yaaaaay ! Vous avez votre premier projet créé avec Create React App !

Découvrez les fichiers

Maintenant que votre projet est initialisé, il est temps de vous plonger dedans et de partir à l'exploration des fichiers créés. On rentre dans le projet avec  cd la-maison-jungle  dans votre terminal.

À partir de là, vous pouvez ouvrir votre éditeur de texte préféré (je suis team VS Code pour ma part 😎) pour jeter un œil. Dès que vous êtes prêt, découvrons les fichiers ensemble dans ce screencast :

Vous trouverez trois dossiers 📁:

• node_modules  : c’est là que sont installées toutes les dépendances de notre code. Ce dossier peut vite devenir très volumineux.

• public  : dans ce dossier, vous trouverez votre fichier index.html et d’autres fichiers relatifs au référencement web de votre page.

• src  : vous venez de rentrer dans le cœur de l’action. L’essentiel des fichiers que vous créerez et modifierez seront là.

Et faisons maintenant un petit tour des fichiers importants 👀 :

• package.json  : situé à la racine de votre projet, il vous permet de gérer vos dépendances (tous les outils permettant de construire votre projet), vos scripts qui peuvent être exécutés avec yarn, etc. Si vous examinez son contenu, vous pouvez voir des dépendances que vous connaissez : React et ReactDOM :

  • vous y trouverez react-scripts, créé par Facebook,  qui permet d’installer Webpack, Babel, ESLint et d’autres pour vous faciliter la vie ;

• dans /public, vous trouvez index.html. Il s'agit du template de votre application. Il y a plein de lignes de code, mais vous remarquez <div id="root"></div> ? Comme dans les chapitres précédents, nous allons y ancrer notre app React ;

• dans  /src, il y a  index.js  qui permet d’initialiser notre app React ;

• et enfin, dans  /src, vous trouvez  App.js  qui est notre premier composant React.

Deux fichiers que nous n'utiliserons pas directement mais qui ne font pas de mal à garder :

• le README.md   qui permet d’afficher une page d’explication si vous mettez votre code sur GitHub, par exemple ;

• et le fichier .gitignore   qui précise ce qui ne doit pas être mis sur GitHub, typiquement le volumineux dossier des node_modules.

Choisissez une version spécifique de React

Mais alors comment garantir que vous pourrez suivre le cours sans difficulté? Pour cela, nous allons suivre différentes étapes pour mettre à jour les dépendances :

1. Rendez-vous au fichier  package.json  dans la section  dependencies. Modifiez cette section avec le code suivant, correspondant aux dépendances nécessaires à React 17 : 

   "dependencies": {
       "@testing-library/jest-dom": "^5.11.4",
       "@testing-library/react": "^11.1.0",
       "@testing-library/user-event": "^12.1.10",
       "react": "^17.0.1",
       "react-dom": "^17.0.1",
       "react-scripts": "4.0.1",
       "web-vitals": "^0.2.4"
     },

2. Supprimez le fichier  yarn.lock  (ou  package.lock  si vous avez utilisé npm) ainsi que le dossier de nos dépendances  node_modules.

3. Dans le dossier  src , modifiez le fichier  index.js  qui a été généré pour la dernière version de React avec le code correspondant à la version de React 17, comme ceci :

   import React from 'react';
   import ReactDOM from 'react-dom';
   import './index.css';
   import App from './App';
   
   ReactDOM.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>,
     document.getElementById('root')
   );
   
   
   
   
   

4. Lancer la commande  yarn  pour installer les dépendances. 

Vous pouvez procéder de la même manière pour installer n'importe quelle version spécifique de React dans votre application. En suivant le cheminement ci-dessus vous serez à même de suivre le cours sans difficulté.

Prenez en main votre app avec les commandes

Lorsque vous vous trouvez à la racine de votre projet, vous pouvez exécuter yarn start   qui va démarrer votre application en mode développement.

Cela vous donne quelque chose comme ça (même si votre adresse IP sera très probablement différente) :

Un onglet a dû s'ouvrir dans votre navigateur à l'URLhttp://localhost:3000/. Si ce n'est pas le cas, ouvrez-le vous-même.

Et tadaa ! 🎉🎉🎉
Vous avez le magnifique logo de React qui tourne dans votre navigateur !

Organisez votre code

Nous allons maintenant modifier notre base de code pour qu'elle soit plus à l'image de notre projet. Il existe plusieurs manières d'organiser son code, et il est important de réfléchir à comment l'organiser. Ici, nous allons séparer les fichiers selon leur type : composants/style/images, etc.

On va commencer par créer un dossier  /components   dans /src, où nous mettrons tous nos composants. On y glisse  App.js   et on en profite pour changer le chemin d'import dans  index.js. Pour ce qui est des autres fichiers, le plus important est index.js que vous devez garder. Vous pouvez également garderindex.css,  mais vous pouvez supprimer les autres fichiers.

Maintenant, créons notre Banner  du chapitre précédent dans un fichier JavaScript à part dans  /components que nous pouvons appeler  Banner.js.

function Banner() {
    return <h1>La maison jungle</h1>
}

export default Banner

On peut maintenant adapter le code de  App.js   en supprimant le code de base, et y importer notre Banner.

import Banner from './Banner'

function App() {
    return <Banner />
}

export default App

Ce qui nous donne :

Félicitations ! Vous avez réutilisé votre code du chapitre précédent !

Je l’ai déjà mentionné, mais ici, c’est Webpack qui nous permet d’importer notre composant aussi facilement, avec import. Cet outil particulièrement utile est essentiel pour lier les fichiers entre eux, afin qu’ils soient interprétés par le navigateur. Et dire que Create React App nous a permis de l’installer sans faire aucune configuration. Si ça c’est pas de la chance ! 🍀

Exercez-vous

Vous pouvez commencer l’exercice à partir de la base de code que nous avons créée ensemble avec Create React App.

Votre mission est la suivante : importer le composant Cart que vous aviez créé dans l’exercice du chapitre précédent dans un fichier à part, dans le dossier /components.

Vous trouverez la solution de l’exercice sur la branche P2C1-Solution.

En résumé

• Les développeurs utilisent des outils automatisés pour faciliter leur expérience de développement.

• Create React App (CRA) est la boîte à outils créée par Facebook, qui reste encore la référence pour initier un projet React.

• Un projet initialisé avec CRA possède toujours : 

  • un fichier index.html   qui est le template où vivra notre app React ;

  • un package.json   qui liste les dépendances et les scripts ;

  • un fichier index.js   dans lequel notre app React est initialisée, et greffée au HTML.

• CRA s'exécute avec l’aide d’un gestionnaire de paquet (dans ce cours, yarn).

• Webpack permet d'importer simplement les fichiers entre eux.

Alors, ça vous a plu d’initier votre app avec CRA ? Et si je vous disais que maintenant nous allons ajouter du style ? À tout de suite ! 👋