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 !

Made with Slides.com