Skip to content

Latest commit

 

History

History
334 lines (212 loc) · 8.96 KB

INSTALL.md

File metadata and controls

334 lines (212 loc) · 8.96 KB
Raw

📦 React Modele Vite

Bienvenue dans ce modèle/template de projet React !

  • Première utilisation
  • Comment démarrer un projet ?
  • Build du projet
  • Utilitaires
  • Dépendances
  • Scripts
  • Prérequis

Objectif

Seul ce modèle ne sert pas à grand chose : l'idée est de se baser sur le modèle et de le faire tourner dans un autre projet.

Il suffit donc de le cloner dans le même dossier qui abritera vos projets.

On peut se baser sur lui pour :

  • démarrer un nouveau projet avec un environnement fiable et configuré
  • travailler sur un challenge avec des dossiers, des fichiers pré-existants

Utilisation

Il s'agit essentiellement de copier/coller les parties intéressantes du modèle dans le dossier du projet, sans écraser d'éventuels fichiers spécifiques.

Pour ce faire :

  • rendez vous dans le dossier qui va contenir votre nouveau projet

    le dossier React-modele-vite doit aussi s'y trouver

  • lancer l'assistant pour récupérer le dépôt distant :

    cd dossier/avec/mes_challenges
# Exemple : ../../../Spe-React

# lancer le script
./React-modele-vite/bin/install.sh
# si nécessaire, donner les droits à ce fichier :
# `chmod +x ./React-modele-vite/bin/install.sh`
# (un `sudo` peut être nécessaire)

# renseigner soit :
#   - le nom de votre nouveau projet (ex : my-app)
#   - soit l'adresse SSH d'un dépôt Git (ex : [email protected]:O-clock-MA_PROMO/NOM_CHALLENGE.git)

  • ou copier manuellement les dossiers et fichiers :

    ```sh
# Exemple : après avoir cloné un challenge dans le dossier mon-challenge/

# direction le dossier du challenge
cd mon-challenge

# copie des fichiers cachés et non-cachés présents à la racine du modèle
# note : des alertes sont affichées à propos de dossiers ignorés, c'est normal
cp -n ../React-modele-vite/{.*,*} .

# copie (récursive) des dossiers src/, config/ et public/
# note : des alertes peuvent être affichées à propos de fichiers ignorés, c'est normal
cp -rn ../React-modele-vite/{src,public} .

# installation des dépendances listées dans le package.json
pnpm install

# lancement du serveur de dev
pnpm dev
```

Build du projet

Le mode d'utilisation par défaut consiste à lancer un serveur de développement avec la commande pnpm dev.

Dans ce cas tout est géré en mémoire : on ne voit jamais le résultat concret du travail de Vite.

Vite peut toutefois produire une version concrète du projet dans un dossier dist/ avec la commande pnpm build.

build permet de construire le projet pour la production (version prête pour hébergement).

  • assemblage des fichiers
  • copie de fichiers
  • nettoyage du code
  • minification du code
  • …
# dans le dossier du projet
cd mon-challenge

# build de production : les fichiers sont rassemblés *et optimisés*
pnpm build

Utilitaires

Extensions VScode

Certaines extensions sont conseillées avec ce modèle ; vous trouverez la liste dans le fichier .vscode/extensions.js.
Dans ce dossier, vous trouverez aussi quelques recommendations de configuration de VS Code.

ESLint

Linter pour le JavaScript : vous permet de trouver et de corriger (quelquefois automatiquement) des erreurs dans votre code.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettier

Code formatter : impose un style cohérent en analysant votre code et en le réimprimant avec des règles configurées.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Error Lens

En combinaison avec EsLint et Prettier, renforce leur diagnostic et améliore la lisibilité des erreurs et avertissements.

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

Auto Rename Tag

Renomme automatiquement les balises HTML/JSX jumelées.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Material Icon Theme

Fournit des icônes pour vos fichiers et dossier.

https://marketplace.visualstudio.com/items?itemName=pkief.material-icon-theme

Babel JavaScript

Coloration syntaxique améliorée pour ES6+.

https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel

Extension Navigateur React Dev Tools

Extension Navigateur Redux Dev Tools

https://github.com/reduxjs/redux-devtools

Principaux outils

Bundler

Vite est un bundler (Task Runner ou Builder) ; c'est un automatiseur de tâches :

  • transpilation JS par Babel
  • conversion Sass vers CSS
  • optimisation du build

En mode développement, il s'appuie sur esbuild ; tandis qu'il utilise Rollup pour la production.

En savoir plus

Javascript compiler

Pour transpiler du code ES2015+/JSX vers du JS ES5, Vite utilise Babel.

Appelé par le plugin @vitejs/plugin-react.

Il est possible d'utiliser SWC à la place grâce au plugin @vitejs/plugin-react-swc

Linter

Formateur de code

React

  • react - React.
    • react-dom - Permet d'injecter des composants React dans le DOM.

Scripts

# Avec pnpm
pnpm {script}

# Avec npm
npm run {script}
  • dev : lance le serveur de développement
  • build : lance la construction de la version de production
  • preview : permet de lancer un serveur pour visualiser le code après un build
  • lint : lance ESLint
    • lint:fix : corrige les erreurs auto-fixables

Prérequis (déjà présents sur la VM)

Installer node

Linux

Ubuntu :

sudo apt install nodejs

Pour les autres distributions, vérifier https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions

Ou https://nodejs.org/en/download/package-manager/

Alternative via NVM
NVM est un outil permettant de gérer plusieurs installations de plusieurs versions de node

MacOS

Ou

Windows

Ou

Mettre à jour node

Linux

Méthode via npm

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Si vous utilisez NVM

MacOS

Ou

Méthode via npm

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
Windows

Ou

  • Si vous utilisez chocolatey choco upgrade nodejs

Installer pnpm

Suivre https://pnpm.io/installation#using-corepack en fonction de votre OS