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