API, Framework, Front-end

Comme vous le savez sûrement, la version 16.3 de React est sortie aux alentours du mois de mars. Dans cet article, nous allons vous parler d’une nouveauté qui fait beaucoup parler d’elle au sein de la communauté React : l’API Context.

Qu’est-ce que c’est et comment ça marche ?

Cette API a un seul but précis : envoyer des propriétés vers vos composants enfants depuis n’importe quels composants parents, sans forcément passer par un intermédiaire.

L’API s’initialise avec la fonction React.createContext qui renvoie un Provider correspondant au composant parent, ainsi qu’un consumer, correspondant au composant enfant. Alors qu’avant il était nécessaire de passer par plusieurs provider pour connecter le consumer au provider souhaité, cette API permet de relier l’enfant directement au parent sans rentrer dans des connexions trop complexes.

const {Provider, Consumer} = React.createContext(defaultValue);

Maintenant que nous avons exposé l’initialisation de la context API, nous allons maintenant nous intéresser à l’initialisation du Provider et du Consumer.

Le Provider

Ce composant est celui situé au plus haut du contexte, voir de l’application. Il a comme particularité d’abonner les Consumers aux changements de contextes. Il peut également être connecté à plusieurs consumers (composants enfants). Sa valeur correspond aux propriétés qui seront diffusées vers les Consumers.

Vous pouvez déclarer un provider de la manière suivante :

 

Le Consumer

Le Consumer est l’élément qui va recevoir la propriété depuis le Provider. Il s’abonne aux changements de contextes. Afin de récupérer les propriétés diffusées par le Provider, le Consumer doit utiliser une fonction en tant qu’enfant pour utiliser les propriétés partagées. Voici un exemple ci dessous.

{value => /* render something based on the context value */}

Exemples d’application

Retrouvez ici un exemple d’application de l’API. Vous trouverez la création d’un contexte, ainsi que l’initialisation d’un provider et d’un consumer (source : reactjs.org).

theme-context.js

See the Pen bKPzXq by Aaron (@leox47) on CodePen.

themed-button.js

See the Pen GGbeKo by Aaron (@leox47) on CodePen.

app.js

See the Pen MXMxgG by Aaron (@leox47) on CodePen.

Nous présentons d’autres articles techniques dédiés à React sur notre blog, n’hésitez pas à nous suivre et à vous abonner à notre page Linkedin.

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

Bootstrap

Que peut-on attendre de Bootstrap 5.0 ?

Bootstrap est une framework d’interface mobile first open source largement utilisé dans la création de sites web. Il permet de créer des sites et applications web avec des mises en page dynamiques et réactives, adaptables aux différents supports plus aisément.
La version actuelle de la framework est 4.4.1, cependant, une prochaine version majeure est annoncée pour la fin du printemps 2020. On devrait donc avoir une version 5.0 pour bientôt.

Voir notre article sur : Bootstrap 4, un framework CSS innovant

Hasura : obtenez n’importe quelle API GraphQL sur vos applications Postgres

Hasura : obtenez n’importe quelle API GraphQL sur vos applications Postgres

Cela fait maintenant 3 ans que Facebook a annoncé l’arrivée de GraphQL. Depuis, l’utilisation de ce langage de requêtes a augmenté de manière exponentielle. On compte plus de 700 000 téléchargements en juin 2018 (source : npm). La rédaction de Numendo vous propose cette semaine de découvrir Hasura : un produit open source capable de vous offrir des API GraphQL sur des applications Postgres nouvelles ou existantes.

HyperApp : une bibliothèque JavaScript de seulement 1 KB ?

Annoncé en fin d’année 2017, HyperApp est une bibliothèque JavaScript proposant de nombreuses fonctionnalités, le tout pour un poids de seulement 1KB ! Ce qui est relativement peu comparé à Jquery par exemple, qui pèse une trentaine de KB. Malgré ce côté insolite, cette bibliothèque est-elle quand même performante ? La réponse dans cet article !

Centre de préférences de confidentialité

Cookies Fonctionnels

gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

Advertising

Cookies Satistiques

_ga, _gat, _gid

Cookies externes

PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
CONSENT, 1P_JAR