Skip to content

Latest commit

 

History

History
314 lines (209 loc) · 9.81 KB

INSTALL.md

File metadata and controls

314 lines (209 loc) · 9.81 KB
Raw

📦 React Modele

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

Première utilisation

Récupérez une copie du modèle :

git clone git@github.com:O-clock-Newton/React-modele.git

Comment démarrer un projet avec ce modèle ?

On va copier/coller les fichiers de configuration du modèle dans le dossier du challenge, sans écraser d'éventuels fichiers déjà présents.

Pour ce faire :

# Exemple avec les dossiers React-model et mon-challenge au même niveau :

# 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/{.*,*} .

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

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

# lancement du serveur de dev
yarn start

Build du projet

Le mode d'utilisation par défaut consiste à lancer un serveur de dev avec yarn start, mais alors tout est géré en mémoire : on ne voit jamais le résultat concret du travail de Webpack.

Webpack peut toutefois produire une version concrète du projet dans un dossier dist/ avec la commande yarn 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-projet

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

Utilitaires

Extensions VScode

EditorConfig

Permet d'adapter l'indentation de l'éditeur grace à un fichier .editorconfig

ext install EditorConfig.EditorConfig

ESLint

Linter pour le JavaScript

ext install dbaeumer.vscode-eslint

Babel JavaScript

Coloration syntaxique améliorée pour ES6+

ext install mgmcdermott.vscode-language-babel

VScode Duplicate

Permet de dupliquer un fichier / dossier

ext install mrmlnc.vscode-duplicate

Extension Navigateur React Dev Tools

Extension Navigateur Redux Dev Tools

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

Principaux Outils

Webpack

Task Runner, Builder ou Bundler ie. automatisation de tâches : transpilation JS par Babel, conversion Sass -> CSS, optimisation du build, etc.

Babel

Transpilation ES6/JSX -> ES5.

ESLint

React

  • react - React.
    • react-dom - Permet d'injecter des composants React dans le DOM.
  • prop-types - Validation de props au sein du JSX.

Scripts

# Avec yarn
yarn {script}

# Avec npm
npm run {script}
  • start: Lance le serveur de développement.
  • build: Lance la construction de la version de production.
  • lint: Affiche les erreurs dans le code.
  • lint:fix: Tente de corriger certaines des erreurs dans le code.
  • clean: Supprime le dossier dist/.
  • clean:all: Supprime dist/, node_modules/ et les fichiers lock.

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 yarn

Suivre https://classic.yarnpkg.com/en/docs/install/ en fonction de votre OS