🤔 Comment (bien) démarrer avec React ?

Tu viens de démarrer sur React, tu demandes si tu dois faire un projet en important les scripts sur une page HTML ou en faisant un projet webpack… Attends, il y a une solution bien plus simple et mise en place par Facebook !

Il s’agit d’une commande line (CLI) qui permet de créer un projet React universel.

1 — Installation des prérequis

Pour pouvoir installer la CLI, tu dois d’abord avoir NodeJS et une version récente. Rien de plus simple, rendez-vous sur le site officiel de NodeJS pour télécharger le fichier d’installation.

En fonction de ton OS, télécharge et installe NodeJS.

2 — Installation de create-react-app

Maintenant que ton environnement est installé, rendez-vous dans ton terminal. Peu importe ton OS, la commande est la même.

Si tu es sur Windows, ouvre ton invite de commande.

Si tu es sur une distribution Linux ou sur OSX, ouvre ton terminal.

npm install -g create-react-app

3 — Création du projet

Le package s’est bien installé, maintenant tu veux peut-être qu’on crée enfin ce projet.

Utilise ton terminal pour aller dans le répertoire de ton choix.

create-react-app my-app
cd my-app
npm start

Durant la création de ton projet, la CLI a déjà exécuté la commande :

npm install

4 — Version universelle

Après avoir un peu joué avec le code de ton projet React, tu vas vouloir très probablement le mettre en ligne, dans une version minifié et “production ready”.

Encore une fois, rien de plus simple !

Toujours dans ton terminal, exécute la commande :

npm run build

À la fin de la compilation, tu retrouveras ton projet dans le dossier ./build !

Conclusion

Comme tu viens de le voir, il est désormais assez facile de créer une application web avec create-react-app. Le déploiement en production est énormément simplifié, plus besoin d’une configuration WebPack qui peut s’avérer complexe pour non-initiés.

Expérimente un peu avec le code, tu te rendras compte pourquoi c’est si rapide !