From 2aea5641510390ee7fb7b03652b69fe3295a8f64 Mon Sep 17 00:00:00 2001 From: William Petit Date: Thu, 22 Mar 2018 18:08:34 +0100 Subject: [PATCH] Logomotion: React+Redux, corrections typo --- .../framework_web/presentation/slides.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/developpement/framework_web/presentation/slides.md b/developpement/framework_web/presentation/slides.md index 92eff17..257f916 100644 --- a/developpement/framework_web/presentation/slides.md +++ b/developpement/framework_web/presentation/slides.md @@ -287,7 +287,7 @@ export default HelloWorld ## La syntaxe JSX -Une représentation proche du XML d'une arborescence de composants. Il ne faut pas faire d'amalgame, **ce n'est pas du HTML**. +C'est une représentation proche du XML d'une arborescence de composants. Il ne faut pas faire d'amalgame, **ce n'est pas du HTML**. La définition des attributs propres au DOM se fait via le nom de la propriété Javascript, pas de l'attribut HTML. **Par exemple l'attribut`class` en HTML devient `className` en JSX**. @@ -297,7 +297,7 @@ Il en est de même pour la **définition des styles**. ## `props` -Elle permettent de passer des données aux composants. +Elles permettent de passer des données aux composants. ```jsx // my-app/src/components/props-example.js @@ -397,9 +397,9 @@ export default class Clock extends React.Component { ``` --- -## Évènements du DOM +## Événements du DOM -Les évènements du DOM sont interceptés par le passage de "callbacks" sur les propriétés `on` des composants. +Les événements du DOM sont interceptés par le passage de "callbacks" sur les propriétés `on` des composants. ```jsx // my-app/src/components/counter.js @@ -431,7 +431,7 @@ export default class Counter extends React.Component { increment() { this.setState(prevState => ({ count: prevState.count+1 })) } - // La méthode decrement() incrémente la valeur du compteur de 1 + // La méthode decrement() décrémente la valeur du compteur de 1 decrement() { this.setState(prevState => ({ count: prevState.count-1 })) } @@ -442,7 +442,7 @@ export default class Counter extends React.Component { ## Gestion des styles -Différentes méthodologies existes pour gérer les styles des composants. +Différentes méthodologies existent pour gérer les styles des composants. La méthode classique CSS (avec ou sans préprocesseur SCSS/SASS) est tout à fait viable. @@ -895,7 +895,7 @@ export default const rootReducer = (state, action) => { } } - // Si l'action n'est pas gérée, on retoure l'état + // Si l'action n'est pas gérée, on retourne l'état // sans le modifier return state @@ -929,13 +929,13 @@ import { addProduct, removeProduct } from './actions' import { configureStore } from './store' test('Ajout/suppression des produits', () => { - // On créait une instance de notre store + // On crée une instance de notre store // avec le state par défaut const store = configureStore() - // On créait un "faux" subscriber + // On crée un "faux" subscriber // pour vérifier que l'état du store - // à bien été modifié le nombre de fois voulu + // a bien été modifié le nombre de fois voulu const subscriber = jest.fn() // On attache notre faux subscriber @@ -1069,7 +1069,7 @@ class App extends React.Component { } render() { - // On créait une liste à partir des éléments présents + // On crée une liste à partir des éléments présents // dans le tableaux de produits const items = this.props.products.map((p, i) => { return
  • {p.name}