Lior CHAMLA
Je suis formateur dans les technologies du Web depuis 2009 : HTML, CSS, Javascript, jQuery, PHP, Programmation Orientée Objets, etc
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>
<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
Introduction à React
Humble introduction à React JS !
