Cadoles
/
formations
20
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Logomotion: React+Redux, corrections typo

This commit is contained in:
wpetit 2018-03-22 18:08:34 +01:00
parent 1baa61d2e8
commit 2aea564151
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
developpement/framework_web/presentation/slides.md
View File

@ -287,7 +287,7 @@ export default HelloWorld
## La syntaxe JSX ## 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**. 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` ## `props`
Elle permettent de passer des données aux composants. Elles permettent de passer des données aux composants.
```jsx ```jsx
// my-app/src/components/props-example.js // 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<Event>` des composants. Les événements du DOM sont interceptés par le passage de "callbacks" sur les propriétés `on<Event>` des composants.
```jsx ```jsx
// my-app/src/components/counter.js // my-app/src/components/counter.js
@ -431,7 +431,7 @@ export default class Counter extends React.Component {
increment() { increment() {
this.setState(prevState => ({ count: prevState.count+1 })) 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() { decrement() {
this.setState(prevState => ({ count: prevState.count-1 })) this.setState(prevState => ({ count: prevState.count-1 }))
} }
@ -442,7 +442,7 @@ export default class Counter extends React.Component {
## Gestion des styles ## 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. 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 // sans le modifier
return state return state
@ -929,13 +929,13 @@ import { addProduct, removeProduct } from './actions'
import { configureStore } from './store' import { configureStore } from './store'
test('Ajout/suppression des produits', () => { 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 // avec le state par défaut
const store = configureStore() const store = configureStore()
// On créait un "faux" subscriber // On crée un "faux" subscriber
// pour vérifier que l'état du store // 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() const subscriber = jest.fn()
// On attache notre faux subscriber // On attache notre faux subscriber
@ -1069,7 +1069,7 @@ class App extends React.Component {
} }
render() { 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 // dans le tableaux de produits
const items = this.props.products.map((p, i) => { const items = this.props.products.map((p, i) => {
return <li key={i}>{p.name}</li> return <li key={i}>{p.name}</li>