GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
85937c2213
memento-dev/old/docs/ressources/frontend/react/initialiser-un-projet-react.mdx

289 lines
10 KiB
Plaintext
Raw Blame History

---
sidebar_position: 2
title: "Initialisation"
description: "Initialisons un nouveau projet React, avec ou sans TypeScript."
tags:
- Frontend
- React
- JavaScript/TypeScript
- Bibliothèque
- Interface utilisateur (UI)
- Vite
- Vike
- SSR
- SSG
- CSR
---
import Admonition from '@theme/Admonition';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';
# 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)_
<Admonition type="warning" title="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 !
</Admonition>
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 :
- [Next.js](https://react.dev/learn/start-a-new-react-project#nextjs-pages-router)
- [Remix](https://react.dev/learn/start-a-new-react-project#remix)
- [Gatsby](https://react.dev/learn/start-a-new-react-project#gatsby)
- [Expo _(pour les applications natives iOS, Android et web)_](https://react.dev/learn/start-a-new-react-project#expo)
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](https://nodejs.org/).
Prépare toi maintenant pour la partie la plus difficile de cet article...
Ouvre ton terminal, et tape la commande suivante :
<Tabs>
<TabItem value="npm" label="NPM">
```bash
npm init vite
```
</TabItem>
<TabItem value="yarn" label="Yarn">
```bash
yarn create vite
```
</TabItem>
<TabItem value="pnpm" label="PNPM">
```bash
pnpm create vite
```
</TabItem>
</Tabs>
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>
<TabItem value="npm" label="NPM">
```bash
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
```
</TabItem>
<TabItem value="yarn" label="Yarn">
```bash
cd mon-projet # Se rendre dans le dossier du projet
yarn install # Installer les dépendances
yarn dev # Lancer le serveur de développement
```
</TabItem>
<TabItem value="pnpm" label="PNPM">
```bash
cd mon-projet # Se rendre dans le dossier du projet
pnpm install # Installer les dépendances
pnpm dev # Lancer le serveur de développement
```
</TabItem>
</Tabs>
<Admonition type="warning" title="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 !
</Admonition>
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 :
<Tabs>
<TabItem value="npm" label="NPM">
```bash
npm create vike@latest
```
</TabItem>
<TabItem value="yarn" label="Yarn">
```bash
yarn create vike
```
</TabItem>
<TabItem value="pnpm" label="PNPM">
```bash
pnpm create vike
```
</TabItem>
</Tabs>
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...
<Tabs>
<TabItem value="framework" label="Framework/Bibliothèque UI">
**Choix unique** :
- [React](https://fr.react.dev/)
- [Vue](https://vuejs.org/)
- [SolidJS](https://www.solidjs.com/)
</TabItem>
<TabItem value="css" label="CSS">
**Choix unique** :
- [Tailwind CSS](https://tailwindcss.com/)
- [daisyUI](https://daisyui.com/)
- [Compiled](https://compiledcssinjs.com/) _(uniquement pour React)_
</TabItem>
<TabItem value="hosting" label="Hébergement">
**Choix unique** :
- [Cloudflare](https://www.cloudflare.com/)
- [Vercel](https://vercel.com/)
- [Netlify](https://www.netlify.com/) _(indisponible à l'heure actuelle - 16/07/2024)_
</TabItem>
<TabItem value="auth" label="Authentification">
**Choix unique** :
- [Auth.js](https://authjs.dev/)
- [Auth0](https://auth0.com/)
- [Firebase](https://firebase.google.com/)
</TabItem>
<TabItem value="data-fetching" label="Data fetching">
**Choix unique** :
- [Telefunc](https://telefunc.com/)
- [tRPC](https://trpc.io/)
- [ts-rest](https://ts-rest.com/)
</TabItem>
<TabItem value="server" label="Framework Node.js">
**Choix unique** :
- [Hono](https://hono.dev/)
- [h3](https://h3.unjs.io/)
- [Express](https://expressjs.com/)
- [Fastify](https://www.fastify.io/)
- [HatTip](https://hattipjs.org/)
</TabItem>
<TabItem value="db" label="Base de données">
**Choix unique** :
- [Prisma](https://www.prisma.io/)
- [EdgeDB](https://edgedb.com/)
- [Drizzle](https://orm.drizzle.team/)
</TabItem>
<TabItem value="linter" label="Linters/formatters">
**Choix multiple** :
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [Biome](https://biomejs.dev/)
</TabItem>
<TabItem value="analytics" label="Analytics">
**Choix unique** :
- [Plausible.io](https://plausible.io/)
- [Google Analytics](https://analytics.google.com/)
- [Segment](https://segment.com/) _(indisponible à l'heure actuelle - 16/07/2024)_
</TabItem>
<TabItem value="error-tracking" label="Error tracking">
**Choix indisponibles à l'heure actuelle** _(16/07/2024)_ :
- [Sentry](https://sentry.io/)
- [Logrocket](https://logrocket.com/)
</TabItem>
</Tabs>
C'est fou non, surtout pour **une seule commande** ?! 😱
Et bien c'est totalement possible grâce à [**Bâti**](https://batijs.dev/) qui est un super outil pour initialiser des projets web avec Vike, créé par [**Joël Charles** _(magne4000)_](https://github.com/magne4000) !
Si jamais tu veux voir un peu plus comment ça fonctionne, je t'invite fortement à consulter l'outil en question [juste ici](https://batijs.dev/).
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é 🚀
Reference in New Issue View Git Blame Copy Permalink