112 lines
5.6 KiB
Plaintext
112 lines
5.6 KiB
Plaintext
---
|
|
title: Initialisation d'un projet React
|
|
description: Initialisons un nouveau projet React, avec ou sans TypeScript.
|
|
tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI), Vite, Vike]
|
|
---
|
|
|
|
import Callout from "@/components/Callout";
|
|
import tabs from "./tabs";
|
|
|
|
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)_
|
|
|
|
|
|
<Callout type="warning" title="Dépréciation de `create-react-app`">
|
|
Sur cette courte section on va parler d'une méthode qui est **dépréciée**.
|
|
Ne l'utilise donc pas pour créer de nouveaux projets !
|
|
</Callout>
|
|
|
|
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)_](https://react.dev/learn/creating-a-react-app#nextjs-app-router)
|
|
- [React Router _(v7)_](https://react.dev/learn/creating-a-react-app#react-router-v7)
|
|
- [Expo _(pour les applications natives)_](https://react.dev/learn/creating-a-react-app#expo)
|
|
- [Vite](https://react.dev/learn/build-a-react-app-from-scratch#vite)
|
|
- [Parcel](https://react.dev/learn/build-a-react-app-from-scratch#parcel)
|
|
- [Rsbuild](https://react.dev/learn/build-a-react-app-from-scratch#rsbuild)
|
|
|
|
Mais dans cet article, je vais plutôt te montrer comment initialiser un projet React avec Vite et par la suite : [Vike](https://vike.dev/).
|
|
|
|
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](https://evanyou.me/), 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 :
|
|
|
|
<tabs.reactInit />
|
|
|
|
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 :
|
|
|
|
<tabs.reactInstall />
|
|
|
|
<Callout type="warning" title="Installation des 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 !
|
|
</Callout>
|
|
|
|
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é 🚀
|