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)

  • Joi
  • Yup

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/

 

 


 

Introduction à React

By Lior CHAMLA

Made with Slides.com

Introduction à React

Humble introduction à React JS !

  • 933

More from Lior CHAMLA