---
tags: Craftmanship
---

# Installation et paramétrage

:warning: Les fiches ne sont pas à jours. Pointer directement sur la doc de node, npm etc et simplement rajouter les élements maison de configuration ?

## Projet d'application cible

* Redux n'est pas forcément nécessaire dans toutes les applications. D'autant plus avec l'arrivée des Context, de Recoil et du hook `useReducer`.
* Ne pas le proposer dans cette application 'minimale' ?
* Je préfère un découpage du projet comme ci-dessous (c'est assez personnel)

public
 |_index.html
 |_favicon.ico
src
 |_ui
    |_routes
    |_components
        |_pages
        |_shared
    |_assets
    |_coreApi
        |-coreProvider.tsx
        |-index.tsx
    |_index.tsx
    |_theme.tsx
 |_core (exclusively .ts file)
     |_ports
     |_adapter
     ...
     index.ts
 |_i18n
 index.ts
package.json
yarn.lock.json
tsconfig.json
.prettierrc.js
.eslintrc.js
.gitignore
Dockerfile
README.md
LICENSE
.env
.env.local

* Pour les tests penser à [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)

## Quelques notions ReactJS

* Ajouter les arrow functions ?

### Gestion des dépendances

* Ajouter la script
# Convertir une application

## Class{} vs Function{}
* Utiliser les Arrow function pour les components ?
* Bien rappeler la convention de nommage pour différencier une fonction d'un composant
* Un composant prend une majuscule
* une fonction s'écrit en camelCase

export class CurrencyCodePicker extends React.Component {
...
}
//devient
export const CurrencyCodePicker = () => {
...
}

* On place le render dans le **return**

* Expliquer la destructuration des props

export const CurrencyCodePicker = (props) => {
    const { currencyCode, supportedCurrencies } = props;  
    return (...)
}

//vs
export const CurrencyCodePicker = ({ currencyCode, supportedCurrencies }) => {
    return (...)
}

:warning: Le fichier racine

//En React 18
const root = createRoot(document.getElementById('root'));
root.render(<App />)

## State() vers useState()

* Une petite explication d'un hook ?
* Éviter d'utiliser let :`setDisplayAmount(e.target.value)`
* Expliquer la différence entre `useState( () => amount)` et `useState(amount)`

# UseMemo()

* Expliquer la memoisation
* Je trouve qu'on ne comprend pas bien le problème sans avoir une connaissance précise du code de départ.
* Bien expliquer ce qui cause un rerendu d'un composant : state ou props qui changent (peut-être dans la partie quelques notions)
* pourquoi useMemo() et pas useCallback
* d'où vient debounce ?

# this.qqchose() vers useRef()

> (https://fr.reactjs.org/docs/hooks-reference.html#useref)
> useRef renvoie un objet ref modifiable dont la propriété current est initialisée avec l’argument fourni (initialValue). L’objet renvoyé persistera pendant toute la durée de vie du composant.
>
> Gardez à l’esprit que useRef ne vous notifie pas quand le contenu change. Modifier la propriété .current n’entraîne pas un rafraîchissement. Si vous voulez exécuter du code quand React attache ou détache une ref sur un nœud DOM, vous voudrez sans doute utiliser plutôt une ref à base de fonction de rappel.

Bien insister que ça ne provoque pas de nouveau rendu de l'UI. Ici on touche un point très important sur le cycle de vie de React.

# componentDidMount() vers useEffect()

Je connais pas assez les anciennes versions. Je suis pas convaincu par l'exemple.

Je pense que `getExchangeRates` devrait prendre en paramètre currrencyCode. En l'état il y a un souci de dependance dans le hook (getExchangeRates devrait être présent dans le tableau) ce qui pourrait d'ailleur causer des rerender infini.

# mapDispatchToProps() vers useDispatch()

Pareil je connais pas l'implementation de redux sur du react legacy.

Il y a quelque chose qui me derange dans l'implementation proposée ici. Le composant UI n'est pas pure il embarque de la logique métier. Je pense qu'il faut se contenter de dispatcher une action. La function `getLatestExchangeRates` n'a pas à être dans le composant UI d'autant plus que l'on ne se sert pas de `rates` ?