https://fr.reactjs.org/docs/create-a-new-react-app.html
npx create-react-app PROJECT_NAME
npm start
https://create-react-app.dev/docs/adding-bootstrap/
https://react-bootstrap.github.io/ (npm install --save bootstrap react-bootstrap react-router-bootstrap)
Check : https://fr.wikipedia.org/wiki/ECMAScript
https://docs.microsoft.com/fr-fr/visualstudio/ide/walkthrough-creating-a-code-snippet?view=vs-2019
https://www.udemy.com/course/react-2020-par-la-pratique-de-a-a-z-evolution-progressive/
##################################################################################
- React favorise la GRANULARITE (mise en place d'un niveau de GRANULARITE important) pour permettre la réutilisation des composants en divers endroits
- Cycle de vie de REACT : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
- Why immutability is important ? : https://fr.reactjs.org/tutorial/tutorial.html#why-immutability-is-important
Dans src, créer des dossiers "containers" et "components" qui représenteront respectivement des composants STATEFUL (typiquement des class avec state) et STATELESS (des functions, pour simple affichage). Le dossier "asset" contiendra l'ensemble des assets de l'application (ex : images, ...)
https://fr.reactjs.org/docs/fragments.html En React, il est courant pour un composant de renvoyer plusieurs éléments. Les fragments nous permettent de grouper une liste d’enfants sans ajouter de nœud supplémentaire au DOM.
https://fr.reactjs.org/docs/strict-mode.html StrictMode est un outil pour détecter les problèmes potentiels d’une application. Tout comme Fragment, StrictMode n’affiche rien. Il active des vérifications et avertissements supplémentaires pour ses descendants.
REMARQUE : Les vérifications du mode strict sont effectuées uniquement durant le développement. Elles n’impactent pas la version utilisée en production.
Permet de gérer la validation des données npm install --save formik http://jaredpalmer.com/formik http://jaredpalmer.com/formik/docs/api/withFormik
Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations.
npm install --save yup https://github.com/jquense/yup
https://bennettfeely.com/ https://bennettfeely.com/clippy/ https://bennettfeely.com/scales/ ...
https://webpack.js.org/configuration/
https://webpack.js.org/loaders/file-loader/ https://webpack.js.org/configuration/resolve/
https://github.com/timarney/react-app-rewired
- npm install react-app-rewired --save-dev
- Create a config-overrides.js file in the root directory
- Package.json : 'Flip' the existing calls to react-scripts in npm scripts for start, build and test ie : /* package.json */ "scripts": {
- "start": "react-scripts start",
- "start": "react-app-rewired start",
- "build": "react-scripts build",
- "build": "react-app-rewired build",
- "test": "react-scripts test",
- "test": "react-app-rewired test", "eject": "react-scripts eject" } Note: Do NOT flip the call for the eject script. That gets run only once for a project, after which you are given full control over the webpack configuration making react-app-rewired no longer required. There are no configuration options to rewire for the eject script.
https://github.com/axios/axios npm install --save axios
Installer react-router-dom installera automatiquement l'autre dépendance (react-router) npm install --save react-router-dom
Ces modules vont nous permettre de gérer le routage de nos pages, et de réaliser un site internet entièrement développé avec React. Au final, nous aurons un site web qui n'aura qu'une seule page, et plusieurs liens pour activer certains compartiments de celui-ci, et afficher le résultat à l'écran de l'utilisateur.
Le gros avantage de ce type de site est la rapidité d'execution une fois qu'il est chargé. En effet, tout le site est renvoyé à l'utilisateur, qui peut ensuite naviguer dedans de manière quasi-instantanée. https://reactrouter.com/web/guides/quick-start
A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL. https://reactrouter.com/web/api/BrowserRouter
A that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL. https://reactrouter.com/web/api/HashRouter
The Route component is perhaps the most important component in React Router to understand and learn to use well. Its most basic responsibility is to render some UI when its path matches the current URL (DISPATCH INTO RENDER / COMPONENT / CHILDREN) https://reactrouter.com/web/api/Route
Provides declarative, accessible navigation around your application. https://reactrouter.com/web/api/Link
A special version of the that will add styling attributes to the rendered element when it matches the current URL. https://reactrouter.com/web/api/NavLink
https://create-react-app.dev/docs/adding-custom-environment-variables/ https://medium.com/@tacomanator/environments-with-create-react-app-7b645312c09d
(Check "Section 105 - Custom Hooks.png") https://fr.reactjs.org/docs/hooks-reference.html