Aller au contenu principal

Initialiser un projet React

Introduction​

Allez, on se lance dans la création d'un projet React ! 🚀

L'article sera très court, car il n'y a pas grand chose à dire sur la création d'un projet React.
Tu vas voir à quel point c'est simple !

👴 Ancienne méthode (CRA)​

Dépréciation de `create-react-app`

Ici on va parler d'une méthode qui est dépréciée.
Ne l'utilise donc pas pour créer de nouveaux projets !

Il y a encore quelques mois/années, on passait régulièrement par le CRA, ou create-react-app, pour initialiser un projet React.
L'avantage que proposait cette méthode était de nous fournir un projet prêt à l'emploi, avec une structure de fichiers déjà en place, et des dépendances déjà installées.

Cependant, cette méthode est désormais dépréciée. Au delà d'être dépréciée, cette méthode a même été totalement retirée de la nouvelle documentation officielle de React.

À la place, la documentation nous propose plutôt d'utiliser :

Mais dans cet article, je vais plutôt te montrer comment initialiser un projet React avec Vite et par la suite : Vike.

Et si tu te demandes "pourquoi" (à juste titre !), c'est tout simplement car il s'agit d'une solution plus légère, plus flexible et qui est en constante amélioration par la communauté !

🏃 Vite​

Vite est un outil de développement web (frontend) créé par Evan You, le créateur de Vue.js.
Et si tu connais Vue.js, tu sais déjà qu'on parle d'un outil de qualité !

L'objectif principal derrière Vite, c'est d'améliorer considérablement la rapidité de développement de nos applications web, avec notamment un serveur de développement ultra-rapide, et une compilation de production optimisée.

On peut notamment comparer Vite à Webpack, Grunt ou encore Gulp, mais en beaucoup plus rapide et plus simple à utiliser.
Beaucoup moins "usine à gaz", beaucoup plus "plug-and-play".

Et si on voyait comment initialiser un projet React avec Vite ?
C'est parti ! 🚀

👷 Initialisation​

Avant de commencer, assure-toi d'avoir Node.js installé sur ta machine.
Si ce n'est pas le cas, tu peux le télécharger ici.

Prépare toi maintenant pour la partie la plus difficile de cet article...
Ouvre ton terminal, et tape la commande suivante :

npm init vite

Tu vas ensuite devoir répondre à quelques questions, notamment le nom de ton projet, le template que tu souhaites utiliser (React, Vue, Vanilla, etc.), et si tu souhaites utiliser TypeScript.

Je te laisse la liberté de répondre comme tu veux à ces questions, mais pour un projet React, tu vas devoir choisir le template react (logique non ?).

Et voilà, c'est tout !
... oui j'ai menti, c'était vraiment pas difficile. 😅

🚀 Lancement​

Une fois que tu as répondu à toutes les questions, tu vas devoir te rendre dans le dossier de ton projet, et lancer le serveur de développement :

cd mon-projet # Se rendre dans le dossier du projet
npm install # Installer les dépendances
npm run dev # Lancer le serveur de développement
Dépendances

Pense à installer les dépendances de ton projet avant de lancer le moindre script (comme dev, build etc), sinon ça ne va pas très bien se passer !

Tu auras ensuite un message dans ton terminal qui t'indiquera l'adresse à laquelle tu pourras accéder à ton application.
En général, il s'agit de http://localhost:3000 (le port peut varier).

Et voilà, tu as maintenant un projet React initialisé avec Vite ! 🎉

Par contre je préfère te prévenir, avec cette solution on va davantage s'orienter sur des applications CSR (Client-Side Rendering), mais on pourra également voir comment faire du SSR (Server-Side Rendering) ou du SSG (Static Site Generation) avec Vike.

💪 Vike​

Vike, ou anciennement vite-plugin-ssr, est un framework basé sur Vite qui va nous permettre de créer des applications web avec presque n'importe quelle bibliothèque (React, Vue, Svelte, etc.).

Dans notre cas, on s'en servira comme alternative au géant du SSR React : Next.js.

L'énorme avantage de Vike au delà de pouvoir utiliser n'importe quel framework/bibliothèque UI (et même un framework maison ou du vanilla JS !), c'est que tout comme Vite, il est extrêmement plus léger et flexible.

Au niveau des fonctionnalités natives, on va retrouver un peu la même chose que Next.js, avec notamment :

  • De quoi gérer le rendu à effectuer (SSR, SSG, CSR)
  • Un système de layouts
  • Un système de routage
  • Un système pour séparer la logique front et la logique back

Et bien d'autres !

Maintenant, si on voyait comment initialiser un projet React avec Vike ? 😉

👷 Initialisation​

Pour initialiser un projet React avec Vike, c'est très similaire à Vite !

Tu vas devoir ouvrir ton terminal, et taper la commande suivante :

npm create vike@latest

Et là, comme avec Vite : ton nouveau projet vient d'être créé ! 🎉

Mais si je te disais qu'on peut aller encore plus loin dans cette initialisation ?
Comme rajouter des choses précises comme...

Choix unique :

C'est fou non, surtout pour une seule commande ?! 😱
Et bien c'est totalement possible grâce à Bâti qui est un super outil pour initialiser des projets web avec Vike, créé par Joël Charles (magne4000) !

Si jamais tu veux voir un peu plus comment ça fonctionne, je t'invite fortement à consulter l'outil en question juste ici.

Pour le lancement de ton projet, c'est exactement la même chose que pour Vite.
N'hésite donc pas à te référer à la section précédente pour voir comment lancer ton serveur de développement 😉

Conclusion​

Tu l'auras remarqué, initialiser un projet React avec Vite ou Vike est vraiment très simple !

On parle ici d'une simple petite commande et de questions auxquelles répondre, et le tour est joué 🚀