Skip to content

Latest commit

 

History

History
192 lines (136 loc) · 5.33 KB

INSTALL.md

File metadata and controls

192 lines (136 loc) · 5.33 KB
Raw

Projet de base React

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

Première utilisation

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

git clone [email protected]:O-clock-Wave/React-modele.git

cd React-modele

yarn # installe les dépendances du projet

yarn start # lance le serveur de developpement
# rdv sur http://localhost:8080/

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 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 des fichiers 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) du dossier src/
cp -nr ../React-modele/src .

# installation des dépendances
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/ :

  • build:dev est à disposition pour rassembler les fichiers sans traitement particulier ;
  • build:prod est à disposition pour réaliser pour minifier et optimiser les fichiers au passage (version prête pour hébergement).
# dans le dossier du projet
cd mon-projet

# build de développement : les fichiers sont rassemblés
yarn build:dev

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

Dépendances de développement

Le modèle React est déjà prêt à l'emploi, si bien que les commandes ci-dessous sont simplement indiquées pour mémoire / pour expliquer la construction du modèle => ne pas les lancer !

Webpack

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

# Webpack
yarn add --dev webpack webpack-cli
# serveur de developpement
yarn add --dev webpack-dev-server
# Plugins
yarn add --dev html-webpack-plugin
yarn add --dev mini-css-extract-plugin
yarn add --dev optimize-css-assets-webpack-plugin
yarn add --dev uglifyjs-webpack-plugin

Fichier de configuration :

  • webpack.config.js

Babel

Transpilation ES6/JSX -> ES5.

# Babel
yarn add --dev @babel/core
# Babel pour webpack
yarn add --dev babel-loader
# vocabulaire ES6 -> ES5 de base
yarn add --dev @babel/preset-env
# vocabulaire React
yarn add --dev @babel/preset-react
# Plugin : propriétés de classes
yarn add --dev @babel/plugin-proposal-class-properties
# Plugin : rest et spread operator pour les objets
yarn add --dev @babel/plugin-proposal-object-rest-spread

Fichier de configuration :

  • .babelrc

ESLint

# ESLint
yarn add --dev eslint
# Config ESLint
yarn add --dev eslint-config-airbnb babel-eslint
# ESLint résolution des imports
yarn add --dev eslint-import-resolver-webpack
yarn add --dev eslint-plugin-import
# ESLint pour React
yarn add --dev eslint-plugin-jsx-a11y eslint-plugin-react

Fichiers de configuration :

  • .eslintrc
  • .eslintignore

CSS (Sass, PostCSS, autoprefixer)

# Traitement des styles et assets
yarn add --dev style-loader css-loader file-loader
# PostCSS et autoprefixer
yarn add --dev postcss autoprefixer postcss-loader
# SASS
yarn add --dev node-sass sass-loader

Fichiers de configuration :

  • .postcssrc
  • .browserslistrc

Dépendances de projet

Utilitaires

# https://babeljs.io/docs/en/babel-polyfill/
yarn add @babel/polyfill

React

yarn add react react-dom prop-types

Outils pratiques

Extension React Dev Tools

Extensions VSCode

  • code --install-extension editorconfig.editorconfig
  • code --install-extension mgmcdermott.vscode-language-babel
  • code --install-extension dbaeumer.vscode-eslint
  • code --install-extension shinnn.stylelint
  • code --install-extension mrmlnc.vscode-duplicate
  • code --install-extension mrmlnc.vscode-scss

Pour figer les numéros de version des librairies

yarn save-deps => remplace les numéros de version "*" dans package.json par des numéros précis (en utilisant les versions les plus récentes au moment où on lance la commande), ce qui permet d'éviter d'avoir des problèmes d'incompatibilité plus tard