---
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é 🚀