Création d'un projet React avec Create React App (CRA)

Introduction à Create React App (CRA)

Maintenant que les prérequis (Node.js et npm/yarn) sont installés, nous pouvons créer notre première application React. Historiquement, l'outil le plus recommandé et le plus simple pour démarrer un projet React était Create React App (CRA). Créé par l'équipe de développement de React chez Facebook (Meta), CRA est une interface en ligne de commande (CLI) qui configure tout ce dont vous avez besoin pour une application React monopage (SPA) fonctionnelle, sans nécessiter de configuration manuelle des outils de build complexes comme Webpack ou Babel.

L'objectif principal de CRA est de vous permettre de vous concentrer sur l'écriture de votre code React dès le départ, en masquant la complexité de la configuration de l'environnement de développement moderne. Il fournit une structure de projet standardisée, un serveur de développement avec rechargement à chaud, des scripts pour tester et construire l'application pour la production, et une configuration de base pour les bonnes pratiques.

Note importante : Bien que CRA ait été l'outil de choix pendant longtemps, la documentation officielle de React recommande désormais plutôt d'utiliser des frameworks React complets comme Next.js ou Remix pour des applications plus complexes, ou des outils plus rapides comme Vite pour des SPAs plus simples. Cependant, comprendre CRA reste utile car de nombreux projets existants l'utilisent et il constitue une bonne introduction à une structure de projet React de base.

La commande magique : `create-react-app`

Pour créer un nouveau projet React avec CRA, ouvrez votre terminal et naviguez jusqu'au dossier où vous souhaitez créer votre projet. Ensuite, exécutez la commande suivante en utilisant `npx` (un outil inclus avec npm qui permet d'exécuter des paquets sans les installer globalement) :

npx create-react-app mon-app-react

Décortiquons cette commande :

• `npx` : L'exécuteur de paquets Node. Permet d'utiliser la dernière version de `create-react-app` sans l'installer de manière permanente sur votre système.
• `create-react-app` : Le nom du paquet CLI que nous voulons exécuter.
• `mon-app-react` : Le nom que vous souhaitez donner à votre projet (et au dossier qui sera créé). Choisissez un nom descriptif sans majuscules ni espaces.

Si vous préférez utiliser Yarn, la commande équivalente est :

yarn create react-app mon-app-react

Que se passe-t-il pendant la création ?

Lorsque vous lancez cette commande, CRA effectue plusieurs actions :

1. Il crée un nouveau dossier avec le nom spécifié (`mon-app-react` dans notre exemple).
2. Il télécharge le template de projet React de base.
3. Il installe les dépendances nécessaires, notamment React lui-même (`react`), la bibliothèque pour interagir avec le DOM (`react-dom`), et les scripts de CRA (`react-scripts` qui encapsulent Webpack, Babel, ESLint, etc.).
4. Il configure une structure de projet initiale avec des fichiers comme `package.json`, `src/App.js`, `src/index.js`, `public/index.html`, etc.
5. Il initialise un dépôt Git local (si Git est installé sur votre système).

Ce processus peut prendre quelques minutes en fonction de votre connexion internet et des performances de votre machine. Une fois terminé, vous verrez des instructions dans votre terminal vous indiquant comment démarrer votre application.

Lancer l'application pour la première fois

Après la création réussie du projet, naviguez dans le nouveau dossier créé :

cd mon-app-react

Puis, lancez le serveur de développement avec l'une des commandes suivantes :

# Si vous utilisez npm
npm start

# Si vous utilisez yarn
yarn start

Cela démarrera le serveur de développement, ouvrira automatiquement votre navigateur par défaut à l'adresse `http://localhost:3000`, et affichera la page d'accueil par défaut de l'application React. Vous verrez également que le serveur surveille les modifications dans vos fichiers sources (`src/`). Si vous modifiez et enregistrez un fichier (par exemple `src/App.js`), la page dans le navigateur se mettra à jour automatiquement (rechargement à chaud).

Félicitations ! Vous avez créé et lancé votre première application React en utilisant Create React App. Vous êtes maintenant prêt à explorer la structure du projet et à commencer à écrire vos propres composants.