Initialisation d'un projet React

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)

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 documentation officielle de React.

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

• Next.js (App Router)
• React Router (v7)
• Expo (pour les applications natives)
• Vite
• Parcel
• Rsbuild

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

yarn create vite

pnpm create vite

bun create 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
npm install
npm run dev

cd mon-projet
yarn install
yarn dev

cd mon-projet
pnpm install
pnpm dev

cd mon-projet
bun install
bun dev

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:4173 (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 !

Mais on se réserve ça pour un autre article, car il est nécessaire de bien comprendre comment fonctionne React 😉.

Conclusion

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

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