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 fichierindex.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 avecyarn
, 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 trouvezindex.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 aindex.js
qui permet d’initialiser notre app React ;et enfin, dans
/src
, vous trouvezApp.js
qui est notre premier composant React.
Je vois dependencies
et devDependencies
. Mais c'est quoi la différence entre les deux ?
En fait, les dependencies
sont des dépendances qui sont nécessaires à notre code pour fonctionner, aussi bien en local qu'en production. En revanche, les devDependencies
sont uniquement nécessaires pour la phase de développement. Les deux sont installées depuis votre package manager, pour nous yarn
, en précisant une option différente : yarn add
pour les dependencies
, et yarn add --dev
pour les devDependencies
.
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 desnode_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 :
Rendez-vous au fichier
package.json
dans la sectiondependencies
. 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" },
Supprimez le fichier
yarn.lock
(oupackage.lock
si vous avez utilisé npm) ainsi que le dossier de nos dépendancesnode_modules
.Dans le dossier
src
, modifiez le fichierindex.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') );
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) :
![La console montre que l'application a bien compilé (Compiled successfully!), c'est-à-dire que l'application a démarré.](https://user.oc-static.com/upload/2021/01/14/16105925124955_image16.png)
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 :
![Notre Banner La maison jungle s'affiche dans le navigateur](https://user.oc-static.com/upload/2021/01/14/16105928894712_image12.png)
Félicitations ! Vous avez réutilisé votre code du chapitre précédent !
![Logo de Webpack](https://user.oc-static.com/upload/2021/01/18/16109914276811_P2C1-2.png)
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 ! 👋