Formation React : Introduction

Si on se fie à la définition offerte par la documentation React est "une bibliothèque JavaScript pour créer des interfaces utilisateurs". Cette définition est un peu générique et ne nous aide pas forcément à comprendre ce qu'est réellement React.

React est une librairie qui va vous permettre de représenter une interface à l'aide d'élément qui vont être capable d'évoluer en fonction des changements d'état de votre application. Pour mieux comprendre cette approche prenons un exemple concret d'interface Web basée sur la manipulation du DOM

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.removeItem(name))
        this.element.appendChild(li)
    }

    removeItem (name) {
        this.todos = this.todos.filter(t => t !== name)
        // Il faut supprimer l'élément dans le dom
    }

    editItem (index, name) {
        this.todos[index] = name
        // Il faut changer le texte dans le DOM
    }

}

On le voit ici, chaque transformation de notre état (liste de tâche) doit s'accompagner d'une transformation des éléments dans le DOM. Ces manipulations deviennent de plus en plus difficile à assurer avec la montée en complexité de notre application.

class TodoList extends React.Component {

    constructor (props) {
        super(props)
        this.state = {todos: []}
    }

    addItem (name) {
        const todos = [...this.state.todos, name]
        this.setState({todos: todos})
    }

    removeItem (name) {
        const todos = this.todos.filter(t => t !== name)
        this.setState({todos: todos})
    }

    editItem (index, name) {
        const todos = [...this.state.todos]
        todos[index] = name
        this.setState({todos: todos})
    }

    render () {
        return <ul>
            {this.states.todos.map((name) => {
                return <li>{name} <button onClick={this.removeItem.bind(this, name)}>Supprimer</button></li>
            })}
        </ul>
    }

}

React permet de séparer les choses avec 2 éléments distincts

• Le state, qui va permettre de stocker l'état de l'application et qui pourra être modifié suite à différentes interactions utilisateur.
• La fonction render(), qui rend une nouvelle version de l'interface en fonction de l'état de l'application.

On ne s'occupe plus du tout des mutations du DOM. A chaque changement de l'état de notre application, React relancera la fonction render() et appliquera les changements au niveau du DOM (on rentrera plus en profondeur dans ce fonctionnement tout au long de cette formation).

Pourquoi React plutôt que...

React n'est pas la seule librairie qui permet de créer des interfaces utilisateurs et on peut se poser la question concernant ce choix.

React est simple (en surface)

React est une librairie qui est "plutôt" simple en surface et qui peut être utilisé avec un nombre très limité de fonctions. Une simple fonction JavaScript peut servir de composant React et en dehors du JSX, la structure reste très proche du JavaScript classique.

L'écosystème est très développé.

React fait parti des premiers frameworks "virtual dom" et a du coup pu se développer un écosystème conséquent (on trouvera de nombreux composant déjà conçu). Il est aussi possible d'utilise React pour autre chose que le web.

• React Native permet de créer des application pour les mobiles, tablette
• React Native Windows permet de créer des applications bureau pour Windows et MacOS
• Phelia permet de créer des applications Slack basée sur React.

React peut être branché à n'importe quoi et n'est pas du tout spécifique à la manipulation du DOM (c'est en fait une autre librairie, react-dom qui lui donne ces capacités)

JSX

Pour représenter l'interface React utilise une syntaxe qui vient s'ajouter au JavaScript. Cette syntaxe est très simple à apprendre / comprendre et se rapproche de ce que l'on connait déjà avec l'HTML.

    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            Tâche à faire
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Ajouter #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

Cette syntaxe est totalement optionnelle (on peut utiliser React sans utiliser le JSX).

Chacun ses goûts

Il existe aujourd'hui une multitude de solution pour créer des intefaces utilisateurs et chaque librairie apporte sa propre manière de résoudre le problème des mutation du DOM. React n'est au final qu'une solution parmis tant d'autre. Aussi n'hésitez pas à tester pour vous faire votre propre opinion et voir qu'elle approche vous convient le mieux.

Prérequis

Pour suivre cette formation il est impératif d'être à l'aise avec le JavaScript et la syntaxe ES2015.

• Vous devez comprendre ce que veux dire maFonction.bind(this, param1)
• Vous devez savoir la différence entre () => {} et function () { }
• Vous devez être à l'aise avec les import ... from '...'