React.js

Sommaire

Ce qu'est React et ce que ce n'est pas
Une interface, des composants
Une syntaxe unique : le JSX
Un écosystème riche (et complexe ?)

Une librairie

React est une librairie Javascript qui se concentre sur la gestion des affichages au sein d'une page web :

Gestion du rendu
Gestion des événements
Gestion des "inputs" de l'utilisateur

Pas un framework

React n'offre aucun autre outil :

Pas de gestion du protocole HTTP
Pas de validation des formulaires
Pas d'injection de dépendances
etc.

Origines et historique

Créé par Facebook (Jordan Walke) en 2011
V1 publiée en 2013 sur GitHub
Dernière version : 16.6.1 (Novembre 2018)

React naît du besoin assez ancien (premières tentatives en 1998) d'avoir des éléments HTML personnalisés (Composants) dont les propriétés et comportements sont plus riches et adaptés aux besoins des développeurs

Avantage

On peut utiliser React avec toutes les autres librairies qu'on aime !

Assez peu de concepts "core" à apprendre, courbe d'apprentissage rapide (hors librairies tierces)

Inconvénient

React doit être complété par d'autres outils, il ne s'occupe que de l'affichage.

Il faut donc se former à d'autres librairies pour avoir quelque chose de complet

Librairies tierces utiles

AJAX (HTTP)

Axios
Request
SuperAgent

Validation (Forms et autres)

Routage avec React Router Dom

Autres

query-string
moment
...

Les composants

Avec React, on considère une interface comme un ensemble de composants qui interagissent entre eux

Ces composants peuvent avoir une hiérarchie, communiquer entre eux et réagir aux événements

Simplicité

Un composant, ce n'est que :

Des données (un état)
Des comportements (traitements)
Un visuel (le rendu)

Réactivité

Lorsque l'état (appelé state) du composant change, le rendu réagit et se met à jour (d'où le nom React)

Communication

Le composant reçoit des données et des traitements de composants voisins / parents

Du JS ...

Pour instancier un composant React, il faut normalement appeler la méthode React.createElement()

... au JSX

L'écriture classique étant peu ergonomique, Facebook a créé le JSX, un sucre syntaxique qui permet de créer des éléments en écrivant du HTML

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

Statefull

Un Composant Statefull est un composant qui porte des données (un state, un état) qui peuvent changer et dont il se sert pour déterminer un rendu

On les représente par des classes plus ou moins complexes

Stateless

Un Composant Stateless est un composant qui ne porte pas de données par lui-même (il n'a pas de state, d'état)

Il s'appuie sur les données que d'autres lui fournissent (propriétés ou props)

On les représente par une simple fonction

Composant avec State

import React, { Component } from "react";

class Counter extends Component {
  state = {
    value: 0
  };

  handleIncrement = () => {
    const value = this.state.value + 1;
    this.setState({ value });
  };

  render() {
    return (
      <div>
        <strong>{this.state.value}</strong>&nbsp;
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Composant sans State

import React from "react";

const Header = function(props) {
  return (
    <header>
      <h1>{props.title}</h1>
      <p>{props.introduction}</p>
    </header>
  );
};

export default Header;

// Autre fichier

<Header
  title="Cours de React"
  introduction="Dans ce cous nous allons voir ..."
/>;

Documentation et ressources

Documentation officielle :
https://reactjs.org/docs/

Tutorial officiel :

https://reactjs.org/tutorial/tutorial.html

Wes Bos, formateur talentueux : https://reactforbeginners.com/ et https://advancedreact.com/

Anthony Welc, amoureux de React : https://www.youtube.com/channel/UChhPkjgG1-iLUOmURGdgQrw et https://www.udemy.com/reactjs-pour-les-debutants/