Archi interne

Applications frontend sous React

Pour toute nouvelle appli, partir de GitHub - edificeio/edifice-react-boilerplate: Edifice React Frontend Application Boilerplate .

Pour migrer une appli existante, se baser sur TODOGuide de migration

Rappel de la pile technologique utilisée

• Server Options : Dev Server et Build (Compilation/Empaquetage)

• https://github.com/opendigitaleducation/ode-ts-client : Encapsule les API HTTP du backend (entcore) dans un ensemble de frameworks fortement typés en TypeScript

• ode-react-ui : Librairie Monorepo de composants / icônes / hooks et composants complexes.

• ode-bootstrap[-one|-neo] : Framework CSS basé sur Bootstrap 5.2.x et déclinaisons de thèmes.

Modèle de données

Le modèle des ressources produites par une appli (par exemple, les blogs ou les exercices) sera typé dans l’appli elle-même ou une lib JS bundlée en // de l’appli.
Une autre option serait de typer ces données dans ode-ts-client directement, mais cela parait trop compliqué à maintenir ensuite.

TODO Pointer un exemple ici

Application mono-page

• TODORouteur de changement d'état

• Routage :

  • Application Full React avec React Router

  • Routage entre Application React et AngularJS TODO

• Cas de la migration d’appli AngularJS => React

Communication inter-composants

Chaque page de l’appli est un assemblage de composants. Comment partager les données de l’appli entre tous les composants ?

React propose pour cela un pattern simple :

• le hook useReducer et le hook useContext

• useReducer se base sur des “Actions” pour effectuer des modifications sur un state

Exemple simple avec useReducer: https://codesandbox.io/s/01-usereducer-counter-0msf43?file=/src/index.js

Exemple simple avec useContext: https://codesandbox.io/s/02-todo-context-hook-s6gs4h?file=/src/index.js

Exemple useReducer + useContext:

• https://codesandbox.io/s/01-payment-methods-exemple-ei4u4g?file=/src/cardsContext.js

• https://codesandbox.io/s/02-counter-exemple-s91gu6?file=/src/index.js