Skip to content

Latest commit

 

History

History
329 lines (218 loc) · 10.4 KB

INSTALL.md

File metadata and controls

329 lines (218 loc) · 10.4 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 [email protected]:O-clock-NN/React-modele.git

cd React-modele

# installe les dépendances du projet
yarn 

# lance le serveur de developpement
yarn start 

# rdv sur http://localhost:8080/

Voilà, le modèle tourne, mais en fait ça ne sert pas à grand chose. L'idée est de se baser sur le modèle, mais de le faire tourner dans un autre projet.

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

On peut se baser sur React-modele pour démarrer un nouveau projet, ou bien pour travailler sur un challenge avec une base de code déjà existante.

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

Pour ce faire :

# 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 /home/killian/Bureau/VM-Oclock/Nautilus/React-modele-Oclock/{.*,*} .

# copie (récursive) des dossiers src/, config/ et public/
# note : des alertes sont affichées à propos de dossiers ignorés, c'est normal
cp -rn /home/killian/Bureau/VM-Oclock/Nautilus/React-modele-Oclock/{src,config,public} .

# 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