Voyez comment vous pouvez facilement créer des tableaux de réaction

Photo de Blake Connally sur Unsplash

La nouvelle API de contexte React est officiellement sortie et peut être utilisée en toute sécurité!

Vous pouvez me suivre sur Twitter ou consulter mes derniers articles sur mon site yaabed.com. De plus, j'ai ma publication sur medium blog.yaabed.com.

Cette API est principalement utilisée pour partager des éléments entre les composants de React afin de résoudre le problème du «forage d'accessoires». Le forage d'accessoires consiste à partager des accessoires depuis les composants parents vers d'autres composants enfants d'une application, en s'assurant que tout est rendu lorsque cela est nécessaire. Mais pourquoi partager tous ces accessoires entre les éléments alors que cela n’est peut-être pas nécessaire? C’est là que le ContextAPI entre en jeu.

Les gens sont parfois déconcertés et commencent à utiliser ContextAPI partout sans avoir besoin de l'utiliser. Par exemple, les gens commencent à utiliser Redux et le connectent à chaque composant du projet.

N’utilisez pas le contexte pour éviter de laisser passer les accessoires de quelques niveaux. Coller aux cas où les mêmes données doivent être accessibles dans de nombreux composants à plusieurs niveaux. - l'équipe de réaction.

Pendant un moment, le nouveau ContextAPI introduit par l'équipe de réaction. J'ai donc décidé de mettre en œuvre une idée simple en utilisant cette nouvelle approche pour en apprendre davantage à ce sujet. Je commence à chercher ce que je peux faire. Puis, au bout d’un moment, je décide de réagir.

Lorsque je commence à implémenter le composant unique react-tabs, j'ai écrit chaque étape pour atteindre l'objectif et les convertir pour cet article.

"L'informatique n'est pas plus une affaire d'informatique que l'astronomie que de télescopes." - Edsger Dijkstra

Exemple d'utilisation après la mise en œuvre finale

Voici le dernier exemple de code après l’achèvement de la mise en oeuvre de react-tabs à l’aide de l’API de contexte.

J'ai publié ce composant sur npm et créé un exemple simple de bac à sable, montrant comment l'utiliser:


   
      
          onglet 1 
      
      
          onglet 2 
      
   

Implémenter des onglets React sans le contexteAPI

Je suggère que lorsque vous apprenez de nouvelles choses, écrivez du code de la façon dont vous le connaissez, puis convertissez-le dans le nouveau style que vous souhaitez apprendre. Par exemple, si vous connaissez le concept de composants composés pour partager des éléments. Créez un composant parent appelé tabs-parent qui contient l'état de tabulation et contient des méthodes pour ajouter des onglets, supprimer des onglets, onglet actif, précédent onglet actif. Puis partagez-le entre les choses. Je vais vous montrer un exemple pour créer des tables de réaction à l’aide de motifs composés.

Magic commence avec le code ci-dessous sur les composants composés. Merci à Kent C. Dodds pour son cours sur les modèles de composants avancés de React. Vous pouvez également consulter cet article «Advanced React Component Patterns» écrit par lui à propos de ces choses.

Lorsque vous utilisez la fonction map sur la propriété children, vous pouvez parcourir les éléments de votre composant, les cloner en tant que nouveaux éléments et transmettre tout ce dont vous avez besoin. Cette astuce ne supprime pas non plus les propriétés déplacées de l'extérieur pour ces composants enfants, elle les copie et les fusionne avec votre état de composant à partir du composant d'enveloppe principal.

{React.Children.map (this.props.children, child =>
  React.cloneElement (enfant, {
    activeTab: this.state.activeTab,
    addTab: this.addTab
  })
)}

Voici le sandbox de code pour la mise en œuvre complète:

Il est maintenant temps d'utiliser le nouveau ContextAPI

La nouvelle API de contexte est beaucoup plus simple qu'auparavant, il n'est pas nécessaire de définir plusieurs éléments sur le composant parent et le composant enfants pour partager les accessoires et les états. Vous avez simplement besoin d'un fournisseur pour les valeurs partagées, et les consommateurs vous communiquent les valeurs stockées sur le fournisseur. Consultez l'exemple de code ci-dessous pour montrer à quel point il est facile de commencer à utiliser ContextAPI.

const initialValue = {
    utilisateur: {},
    logUserIn: () => {}
};
/ **
* voici comment vous définissez l'api de contexte en utilisant react create context * fabrique cette fabrique contient le fournisseur de contexte et le consommateur de contexte *
** /
const UserContext = React.createContext (initialValue);
La classe App étend React.Component {
  logUserIn () {// enregistre l'utilisateur dans le code}
  render () {
   const contexte = {utilisateur: this.state.user, logUserIn: this.logUserIn};
    revenir (
      {/ * voici comment vous accédez au fournisseur. Vous devez envelopper votre application avec ce fournisseur ou le composant parent supérieur * /}
       
           
       
    )
  }
}
fonction Header (accessoires) {
  revenir (
    
       {/ * Voici comment utiliser le consommateur pour obtenir des valeurs et des données du composant fournisseur * /}                    {contexte =>               context.user.isLoggedIn?                `welcome $ {context.user.name}`:                 

Implémenter des onglets React à l'aide de ContextAPI

C'est la même chose que le modèle composé-composants qu'un parent est responsable du partage des éléments entre les composants. Sur ContextAPI appelé le fournisseur. Tous les enfants du fournisseur peuvent utiliser le consommateur pour obtenir l'état stocké dans le fournisseur. C'est la même chose que des composants composés utilisant des enfants clonés avec les données nécessaires. Vous pouvez consulter l'exemple de code ci-dessous et faire la comparaison entre les deux modèles.

Composant Contexte Onglets

Ce contexte contient l'état partagé entre le composant Onglet et le composant Onglets.

  • Onglets: Tableau d'onglets pour stocker les onglets ajoutés et les afficher en haut afin qu'un utilisateur puisse cliquer sur l'un d'eux et changer l'état par lui-même.
  • Onglet actif: Objet pour stocker l'onglet indiqué à un utilisateur. Il s'agit d'une entité requise pour le composant react-tabs contenant l'ID de l'onglet actif.
  • Ajouter un onglet: Fonction permettant au composant enfant de l’onglet de s’ajouter lui-même lorsqu’il est monté.
  • Sur clic: Fonction pour changer l'onglet actif lorsque le nouvel onglet est cliqué.

Composant de conteneur d'onglets

Le code ci-dessous montre le composant conteneur Onglet et indique simplement quand son identifiant est celui qui est actif.

Tous les onglets

Si vous vous demandez pourquoi j'utilise glamour, je pense que l'utilisation de l'approche CSS-JS pour styliser les composants React est une chose remarquable, car vous avez le contrôleur sur n'importe quoi et encapsulez votre élément avec lui-même. Je recommande d’utiliser glamour pour cela car il est trop flexible.

Conclusion

Il y a trop de modèles là-bas. Mais assurez-vous de choisir le mode qui convient à votre cas. Créer des composants réutilisables de la bonne manière est l’une des clés pour devenir un ingénieur frontal. Donc, ne collez pas et commencez à coder vos éléments en utilisant les nouveaux modèles indiqués et choisissez le bon. En outre, ne tenez pas pour un mode et laissez les autres bonnes choses.

J'écris sur blog.yaabed.com. Si vous avez apprécié cet article, assurez-vous de le partager avec d'autres personnes. Et n'oubliez pas d'appuyer sur le bouton Suivre pour plus d'articles comme celui-ci, suivez-moi aussi sur Twitter.

Bonjour, je m'appelle Yazan Aabed. Grandi en Palestine. Ma majeure était en informatique. Je suis un ingénieur frontend et un amoureux de JavaScript. Travaillant principalement avec des frameworks Frontend tels que (AngularJs, ReactJS). Vous pouvez m'appeler # Geek. Aussi, j'aime partager mes connaissances avec d'autres personnes et apprendre d'eux. Vous pouvez me trouver sur GitHub, Medium, Twitter.