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

Logomotion: React+Redux, corrections typo

Browse Source
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
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<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
// 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 <li key={i}>{p.name}</li>