Développer avec React

React

React se présente comme "une bibliothèque JavaScript pour créer des interfaces utilisateurs".  React est né en 2011 pour le fil de news de Facebook et a été créé par Jordan Walke, ingénieur logiciel chez Facebook. L'idée principale derrière React est de construire une application à partir de composants. Un composant regroupe à la fois le HTML, le JS et le CSS, créés sur mesure pour vos besoins, et que vous pouvez réutiliser pour construire des interfaces utilisateurs.

create-react-app includes built tools such as webpack, Babel, and ESLint.

React créé un DOM virtuel en mémoire ou auront lieu toutes les manipulations nécessaires, avant de fournir le DOM au navigateur.

Documentation Officielle

https://fr.reactjs.org/
https://fr.reactjs.org/docs/react-api.html
https://babeljs.io/

Initialiser une app React

https://github.com/facebook/create-react-app

PREREQUISITES

• Familiarity with HTML & CSS.
• Familiarity with ES6 syntax and features
• Understanding of the array and object spread operators
• Knowledge of React terminology: JSX, State, Function Components, Props, and Hooks
• Knowledge of asynchronous JavaScript and making AJAX requests

https://itnext.io/build-a-react-redux-with-typescript-using-redux-toolkit-package-d17337aa6e39

https://react-redux.js.org/introduction/getting-started

Règles générales sur les Composants React

une interface utilisateur est constituée de multiples composants React qui :

• sont réutilisables ; par exemple, un bouton, un élément dans une liste, un titre,
• regroupent la structure, les styles et le comportement d'un élément,
• sont traduits par React en gros objets, qui sont ensuite greffés au DOM ;

le JSX est une syntaxe créée par React permettant d'écrire du JavaScript.

Règles à respecter :  

• les balises des composants doivent être refermées
• le nom d'un composant doit commencer par une majuscule ;
• les composants doivent toujours être wrappés par un seul composant parent ;

Un composant peut être déclaré à l'aide d'une fonction. Dans ce cas, la syntaxe de fonction fléchée ou de fonction sont toutes les deux possibles. 

Le moyen le plus simple de définir un composant consiste à écrire une fonction JavaScript :

function Welcome(props) {

  return <h1>Bonjour, {props.name}</h1>;

}

Cette fonction est un composant React valide car elle accepte un seul argument « props » (qui signifie « propriétés ») contenant des données, et renvoie un élément React. Nous appelons de tels composants des « fonctions composants », car ce sont littéralement des fonctions JavaScript.

On peut également utiliser une classe ES6 pour définir un composant :

class Welcome extends React.Component {

  render() {

    return <h1>Bonjour, {this.props.name}</h1>;

  }

}

ReactDOM.render(<div>< MyHeader /><div>So much wow</div></div>, document.getElementById('root'))

Pour rappel, les fonctions composants en React ressemblent à ceci :

const Example = (props) => {

  // Vous pouvez utiliser des Hooks ici !

  return <div />;

}

ou à ça :

function Example(props) {

  // Vous pouvez utiliser des Hooks ici !

  return <div />;

}

Props

Les props sont des objets que l'on peut récupérer dans les paramètres de notre composant fonction.

Une prop est :

• toujours passée par un composant parent à son enfant ;
• considérée en lecture seule dans le composant qui la reçoit.

La prop children est renseignée en imbriquant les enfants dans le parent : <Parent><Enfant /></Parent>.

Il existe deux syntaxes pour assigner une valeur à une prop :

• les guillemets pour les string ;
• les accolades pour tout le reste : nombres, expressions JavaScript, booléen, etc.

Destructuration

La déstructuration est une syntaxe permettant de déclarer une variable en l'affectant directement à la valeur d'un objet (ou tableau).

children est utile lorsqu'un composant ne connaît pas ses enfants à l'avance.

function Layout({children}) {

    return <div className="my-layout">{children}</div>

}

function Layout(props) {

    const children = props.children

    return <div className="my-layout">{children}</div>

}

Hooks

Les Hooks sont arrivés avec React 16.8. Ils permettent de bénéficier d’un état local et d’autres fonctionnalités de React sans avoir à écrire une classe.

Un hook est une fonction qui permet de « se brancher » (to hook up) sur des fonctionnalités React. On peut d'ailleurs les importer directement depuis React.

• useState   est un hook qui permet d’ajouter le state local React à des composants fonctions.
• useEffect est  un hook qui permet de réagir à différents évènements

Les hooks doivent forcément être appelés depuis un composant fonction. 

https://fr.reactjs.org/docs/hooks-intro.html

Gestion des événements du DOM

Quelques caractéristiques de la déclaration d'un événement en React :

• l'événement s'écrit dans une balise encamelCase;
• vous déclarez l'événement à capter, et lui passez entre accolades la fonction à appeler ;
• contrairement au JS, dans la quasi totalité des cas, vous n'avez pas besoin d'utiliser addEventListener.

SyntheticEvent

Vos gestionnaires d’événements recevront des instances de SyntheticEvent, un enrobage compatible tous navigateurs autour de l’événement natif du navigateur. Il fournit la même interface que l’événement natif, comprenant notamment stopPropagation() et preventDefault(), à ceci près que ces événements fonctionnent de façon identique sur tous les navigateurs.

Si pour une raison ou une autre, vous avez besoin de l’événement sous-jacent du navigateur, utilisez l’attribut nativeEvent pour le récupérer. Les événements synthétiques diffèrent des événements natifs du navigateur, avec lesquels ils n’ont pas toujours de correspondance directe. Par exemple pour onMouseLeave, event.nativeEvent référencera un événement mouseout. Les correspondances effectives ne font pas partie de l’API publique et sont susceptibles d’évoluer à tout moment. 

State Local

Le state local nous permet de garder des informations. Ces informations sont spécifiques à un composant et elles proviennent d'une interaction que l'utilisateur a eue avec le composant.

Donc je vais créer ma variable  inputValue   et la fonction qui va permettre de changer sa valeur dans le state local avec  useState.

La ligne de code ci-dessous me permet de déclarer l'état initial pour  inputValue   et la fonction correspondante pour modifier sa valeur dans le state local, et de lui préciser la valeur par défaut "Posez votre question ici" :

const [inputValue, setInputValue] = useState("Posez votre question ici")

En React, un événement s'écrit dans une balise en  camelCase, et on lui passe la fonction à appeler.

Contrairement au JS, dans la quasi totalité des cas, vous n'avez pas besoin d'utiliser  addEventListener.

React passe un événement synthétique en paramètre des fonctions de callBack. Cet événement synthétique est similaire à un événement passé en natif dans le DOM,  sauf qu'il est compatible avec tous les navigateurs.

Il existe deux grandes manières de gérer les formulaires : les formulaires contrôlés ou non contrôlés. L'utilisation des formulaires contrôlés est recommandée.

Les formulaires contrôlés sauvegardent la valeur des champs dans le state local, et accèdent à la data entrée par l'utilisateur avec  onChange.

Les formulaires contrôlés permettent de filtrer le contenu, ou d'afficher un message d'erreur en fonction de la data qui est entrée par l'utilisateur.

Le state local est présent à l’intérieur d’un composant et garde sa valeur, même si l'application se re-render. 

useState   est un hook qui permet d’ajouter le state local React à des composants fonctions.

const [cart, updateCart] = useState(0)

Un hook est une fonction qui permet de « se brancher » (to hook up) sur des fonctionnalités React. On peut d'ailleurs les importer directement depuis React. Après useState, nous verrons un autre hook dans cette partie :  useEffect 

Décomposition

Tout d'abord, les crochets  []  . Si cette syntaxe peut vous paraître un peu particulière, il s'agit en fait de la même pratique que nous avions vue dans la partie précédente : la déstructuration. Sauf qu'ici, ça s'appelle la décomposition, parce qu'il s'agit d'un tableau et non d'un objet.

useState nous renvoie une paire de valeurs dans un tableau de 2 éléments, que nous récupérons dans les variables  cart   et  updateCart   dans notre exemple. Le premier élément est la valeur actuelle, et le deuxième est une fonction qui permet de la modifier.

Sans la décomposition, nous aurions aussi pu faire :

const cartState = useState(0)

const cart = cartState[0]

const updateCart = cartState[1]

Dans un tableau qu'on décompose, nous pouvons librement nommer nos variables. J'aurais tout aussi bien pu faire :

const [coucou, cavabien] = useState(0)

Le state local est présent à l’intérieur d’un composant : ce composant peut être re-render autant de fois que l'on veut, mais les données seront préservées.

useState   est un hook qui permet d’ajouter le state local React à des fonctions composants :

Il nous renvoie une paire de valeurs dans un tableau de 2 valeurs, récupérée dans les variables entre crochets.

Il faut initialiser votre state avec un paramètre passé entre parenthèses – un nombre, une string, un booléen, un tableau ou même un objet.

 lorsqu'on change le state, on crée un nouvel objet avec le spread operator ? C'est normal : le state est immutable, c'est à dire qu'il ne faut pas le modifier directement. 

Redux

Use Effect

useEffect   nous permet d'effectuer notre effet une fois le rendu du composant terminé

le premier paramètre passé à useEffect est une fonction.

Dans notre cas, si je veux que l'alerte ne s'affiche que lorsque le total de mon panier change, il me suffit de faire :

useEffect(() => {

    alert(`J'aurai ${total}€ à payer 💸`)

}, [total])

Comment faire pour exécuter un effet uniquement après le premier render de mon composant ? Par exemple, si je veux récupérer des données sur une API ?

Eh bien, dans ce cas, il faut renseigner un tableau de dépendances vide :

useEffect(() => {

    alert('Bienvenue dans La maison jungle')

}, [])

À partir du moment où vous utilisez le tableau de dépendances, faites bien attention à ne pas oublier des dépendances, ou bien à ne pas en laisser qui n'ont plus rien à y faire, pour éviter d'exécuter à des moments inopportuns.

ppelez toujours  useEffect   à la racine de votre composant. Vous ne pouvez pas l'appeler à l’intérieur de boucles, de code conditionnel ou de fonctions imbriquées. Ainsi, vous vous assurez d'éviter des erreurs involontaires.

Comme pour  useState,  useEffect   est uniquement accessible dans un composant fonction React. Donc ce n'est pas possible de l'utiliser dans un composant classe, ou dans une simple fonction JavaScript.

Comme les autres hooks, useEffect doit forcément être appelé depuis un composant fonction. Par ailleurs, il est important de ne pas appeler vos hooks à l'intérieur d'une condition : ils doivent être à la racine de votre composant. 

En revanche, pas de soucis pour utiliser plusieurs  useEffect  dans un même composant ou pour utiliser le state dans useEffect

Navigation et React Router

https://www.npmjs.com/package/ipfs-http-client