React
"The library for web and native user interfaces"
Pourquoi ?
Une librairie est là pour résoudre un problème
class TodoList {
todos = []
element = null
constructor (element) {
this.element = element
}
addItem (name) {
this.todos.push(name)
const li = document.createElement('li')
const a = document.createElement('a')
a.innerText = 'Supprimer'
li.appendChild(a)
a.addEventListener('click', () => this.remove(name))
this.element.appendChild(li)
}
removeItem (name) {
this.todos = this.todos.filter(t => t !== name)
// ????
}
editItem (index, name) {
this.todos[index] = name
// ???
}
}
Il est difficile de synchroniser notre états et notre vue
function TodoList () {
/**
* Etat de notre composant
**/
const [todos, setTodos] = useState([])
/**
* Mutations
**/
const addItem = (name) => {
this.setTodos([...todos, name])
}
const removeItem = (name) => {
this.setTodos(todos.filter(t => t !== name))
}
/**
* Rendu attendu en fonction de cet état
**/
return <div>
<h1>Ma liste de tâche à faire</h1>
<ul>
{todos.map((todo) => (<li key={todo}>{todo}</li>))}
</ul>
</div>
}
On sépare état et vue
Notre vue est une fonction de l'état
Pourquoi React plutôt que ...... ?
- React est simple (en surface)
- Ecosystème
- JSX
- Préférences personnelles
Différent != Meilleur
Prérequis
(() => "Etre à l'aise avec le JavaScript")()
- Portée des variables
- Arrow function
- map(), filter() et reduce()
Ce que l'on va voir
- Les bases de React
- Les concepts avancés
- L'écosystème
- Cas pratiques
C'est parti !
React
By Jonathan Boyer
React
- 935