Comment créer une feuille de calcul géniale pour les actions avec React 16

React 16 est la première version de React construite sur la nouvelle architecture de base de React, appelée «Fibre». React 16 est conçu dès le départ pour prendre en charge le rendu asynchrone. Cela permet de traiter des arborescences de composants volumineuses sans bloquer le thread d'exécution principal.

React 16 est populaire car il prend en charge un certain nombre de fonctionnalités clés, telles que la capture d'exceptions à l'aide de limites d'erreur, le renvoi de plusieurs composants à partir du rendu, la taille réduite du fichier et sa prise en charge de la licence MIT.

Pour créer une application Web basée sur les données, telle qu'une feuille de calcul Stocks, vous aurez besoin d'une interface semblable à une feuille de calcul pour afficher les données destinées à vos utilisateurs.

Tableur des stocks

Vos utilisateurs s'attendent à ce que le tableur de votre application soit capable de:

  • Défilement avec un en-tête fixe
  • Tri en cliquant sur un en-tête de colonne
  • Affichage et masquage de colonnes spécifiques
  • Pagination, regroupement et synthèse
  • Modification des données dans les cellules
  • Exporter vers Excel
  • Forage vers le bas / extension de rangée

Cependant, une feuille de calcul ou une grille peut être l’un des composants d’interface utilisateur les plus difficiles et les plus complexes à intégrer à React. En effet, bon nombre des fonctionnalités nécessaires requièrent à la fois une grande expertise de React, ainsi que la volonté et la capacité de puiser dans le DOM.

Si vous souhaitez coder une grille à l'aide d'un tableau HTML ou d'un autre composant tiers, vous devez implémenter plusieurs fonctionnalités communes. Ces fonctionnalités incluent cliquer sur un en-tête de colonne de grille pour trier ou en cliquant sur un séparateur entre un en-tête de colonne à redimensionner, ou faire glisser un pageur et effectuer une extraction pour la page de données suivante.

Pour construire rapidement cette application, nous utiliserons les composants ExtReact de Sencha. Sencha’s ExtReact est un ensemble de plus de 115 composants d’interface utilisateur prédéfinis que vous pouvez facilement intégrer aux applications React 16. L'un des composants clés d'ExtReact est la grille. Il fournit les fonctionnalités de type feuille de calcul nécessaires pour créer rapidement une application de feuille de calcul des stocks. Nous utiliserons ExtReact Grid pour afficher des informations sur les actions et les sociétés d’actions.

Commençons par créer une application de gestion des stocks à l’aide de la grille ExtReact de Sencha.

Tableur de stock d'échafaudages

Pour créer un échafaudage d’application, procédez comme suit:

  • Assurez-vous d'avoir un environnement de nœud configuré

Tout d’abord, assurez-vous que les nœuds 8.11+ et NPM 6+ sont configurés sur votre système. Vous pouvez télécharger la dernière version du nœud à partir du site Web du nœud. Si vous avez déjà installé Node, vous pouvez facilement vérifier les versions de Node et npm à l’aide des commandes suivantes: node -v et npm -v

  • Obtenez vos identifiants de connexion pour le référentiel ExtReact NPM

Les packages NPM ExtReact sont hébergés sur le référentiel NPM privé de Sencha. Vous vous connectez à ce dépôt une fois pour avoir accès à tous les packages ExtReact. Pour obtenir les identifiants de connexion, accédez à la page Essai gratuit ExtReact pendant 30 jours et remplissez le formulaire. Nous vous enverrons un courrier électronique avec les informations de connexion, ainsi que des liens vers des ressources telles que les documents et les exemples de projets.

  • Connectez-vous au référentiel ExtReact NPM et obtenez le générateur d'applications

La prochaine étape consiste à vous connecter au référentiel npm privé de Sencha, qui héberge les packages ExtReact. Utilisez votre identifiant npm (fourni dans le courrier électronique de test ExtReact) pour associer le référentiel npm à la portée @sencha et entrez les informations d'identification à l'invite:

npm login - registry = http: //npm.sencha.com - scope = @ sencha

L'étape suivante consiste à installer le package du générateur ExtReact.

npm installer -g @ sencha / ext-react-gen
  • Créez votre première application React

Exécutez le générateur d'applications ExtReact pour créer votre première application ExtReact:

application ext-react-gen votre-nom-application-ici -i

Le générateur d'applications vous posera quelques questions, telles que le nom de votre application. Par défaut, l’application utilise le thème Matériau (basé sur les consignes de conception de Google Matériau) et constitue un bon choix comme thème de départ.

Sélectionnez «Générer une application vide» dans l'une des invites. Le générateur vous demandera également de créer un nouveau répertoire pour votre projet. Le générateur téléchargera et créera ensuite votre exemple d'application, y compris les dépendances pertinentes.

  • Exécutez votre application React

Dans la sortie du générateur, vous trouverez les étapes pour exécuter votre application. Accédez au nouveau répertoire de votre application et exécutez l’application en utilisant:

npm start

Cela lancera l'application, et votre application React vide s'affichera simplement avec le titre de l'application. Le composant principal (par exemple, StocksGrid) dans l’application a un conteneur à la racine. Ceci est marqué comme plein écran, la mise en page est configurée pour s'adapter, ce qui signifie qu'il va étirer son enfant pour le remplir.

Voir le code jusqu'à cette étape sur GitHub.

Ajout de la grille de stocks à l'application

Ajouter des données sur les stocks

Nous allons ajouter un exemple de jeu de données de 10 000 lignes, appelé stocks.json, à l'application. Chaque ligne de données contient le nom de la société, le symbole du ticker, le secteur et les secteurs dans lesquels ils se trouvent. La ligne contient également un tableau de ticks représentant les 5 dernières ventes de ce stock.

Ce sont les données que nous allons afficher dans notre grille. Dans ce didacticiel, nous allons charger des données de manière statique à partir de stocks.json, mais vous pouvez également créer une API de repos back-end pour obtenir les mêmes données.

Création d'une grille de base

Dans le composant StockGrid React, dans la méthode de rendu, nous allons renvoyer une grille avec des colonnes.

Pour ajouter des colonnes dans notre grille, nous utilisons un composant Column. Le composant Column utilise un index de données identique au champ de nom des données de stock. La colonne prend un accessoire de texte qui correspond au texte d'en-tête de colonne. Nous pouvons également donner à la colonne une largeur, comme une largeur fixe ou un flex, ou une combinaison de flex et minimum ou maximum. Nous allons ajouter des composants de colonne pour le nom de la société, le symbole, les ticks, le secteur et le secteur. Cela créera une nouvelle classe StocksGrid avec une grille, comme indiqué ci-dessous.


       
       
       
       
       

Votre application renverra StockGrid dans le cadre du rendu, comme ci-dessous:

export default class App étend le composant {
   render () {
        revenir (
            
                
            
        )
    }
}

Voir le code jusqu'à cette étape sur GitHub.

En cours d’exécution, vous pourrez voir une application Web avec une grille vide au démarrage de npm

Liaison des données de stock avec la grille

Une grille ExtReact est une table semblable à une feuille de calcul qui extrait et restitue les données d'un magasin de données. Dans ExtReact, Store est une structure de données qui vous permet de trier et de filtrer les données dans une grille.

Nous pouvons maintenant commencer par charger les données sur les stocks et créer un magasin. Les grilles vont récupérer leurs données du magasin. Les interactions avec la grille déclencheront des événements sur le magasin, tels que le rechargement, le tri ou la pagination.

Le concept de magasin de données ExtReact est légèrement différent de celui de Flux Store. Ce qui rend la grille et le magasin un peu différents de l'approche React standard, c'est que les deux sont étroitement intégrés. En règle générale, vous pouvez transmettre des données directement à un magasin, ou un magasin peut extraire des données lui-même à partir d'un back-end à l'aide d'un proxy. La grille ExtReact fournit des fonctionnalités interactives telles que le filtrage, le tri, la pagination, le regroupement et la synthèse sans code supplémentaire.

Pour cet exemple, nous transmettons les données directement au magasin à partir du fichier de données Stocks. Vous pouvez également créer un magasin avec une configuration de proxy - avoir un proxy nous permet de faire toutes sortes d'excellentes choses telles que la pagination à distance, le filtrage et le tri. Pour cette application, nous avons défini l'autoload sur true afin de charger automatiquement les données dans la grille. Les données brutes ne sont pas particulièrement triées selon aucun critère. Nous allons donc les trier côté client en spécifiant la propriété name.

this.store =
       new Ext.data.Store ({
            données: stocks,
            autoLoad: true,
            trieurs: [{
                nom de la propriété'
            }],
            les auditeurs: {
                mise à jour: this.onRecordUpdated
            }
})

Dans la grille, attribuez la configuration du magasin au magasin que nous avons créé.

       ...

Maintenant, exécutant npm start, notre application dispose d'une grille avec toutes les données, comme indiqué ci-dessous:

Grille de base avec données

Avec ce simple code React, vous bénéficiez de nombreuses fonctionnalités gratuites. Ces fonctionnalités incluent le tri, qui vous permet de cliquer sur n'importe quel en-tête de colonne et le tri est automatiquement effectué côté client. Si nous mettions en place une véritable API back-end, nous pourrions configurer Store Proxy pour effectuer un tri à distance sur le back-end et utiliser une clause «order by» dans la base de données pour effectuer un tri. ExtReact Grid fournit également des colonnes redimensionnables gratuitement. Ainsi, l'utilisateur peut faire glisser la colonne d'un côté à l'autre.

ExtReact Grid fournit également une fonctionnalité de regroupement intéressante. L'utilisateur de votre application peut grouper par secteur. L'application regroupera toutes les données par secteur. La grille ExtReact vous donnera un en-tête épinglé au fur et à mesure que vous faites défiler chaque groupe.

Regroupement par industrie

Lorsque vous exécutez votre application, vous remarquerez que ces données sont rendues assez rapidement pour 10 000 enregistrements. La raison pour laquelle il rend si rapidement, c'est parce qu'il utilise ce que nous appelons le rendu en tampon. Avec le rendu en mémoire tampon, lors du chargement initial, Grid restitue des données légèrement supérieures à ce que vous voyez réellement en termes de «hauteur du port de visualisation». Lorsque vous faites défiler l'écran vers le bas, il remplace le contenu des cellules de la grille par les nouveaux enregistrements. comme vous page en bas dans le magasin. La grille conserve donc autant que possible les éléments du DOM. En gardant le petit DOM, la consommation de mémoire est réduite et les performances de l'application sont optimales

Voir le code jusqu'à cette étape sur GitHub.

Styliser votre grille de stocks

Vous souhaitez styliser la grille afin que les données soient plus faciles à analyser.

Utilisation de la cellule de grille prop

Voyons maintenant comment contrôler le style des cellules de la grille. Nous voulons mettre le nom en gras - la meilleure façon de le faire est d'utiliser l'accessoire cellule. La cellule de grille prend un certain nombre de configurations qui contrôlent l'apparence de la cellule. Nous allons lancer une configuration de style là-bas, puis nous dirons que fontWeight est gras.

cell = {{style: {fontWeight: 'bold'}}}

Ajout d'un bouton dans une rangée

Maintenant, disons que nous voulons avoir un bouton sur lequel nous pouvons cliquer pour acheter l’un de ces titres. Pour ce faire, nous pouvons ajouter une colonne avec un bouton. Cette fois-ci, nous n’allons pas ajouter d’index de données car il ne correspond à aucun champ du magasin. Nous allons ajouter un WidgetCell avec un bouton. Nous allons faire un peu de style - nous allons mettre l'action autour de l'interface utilisateur dessus, donc le bouton aura une action ronde comme ci-dessous:


    
        

Le gestionnaire d’achat que nous allons utiliser est très simple. Lorsque vous cliquez sur le bouton d’achat, nous allons simplement afficher un petit message indiquant le symbole du titre que vous achetez. Lorsque vous cliquez dessus, la fonction suivante s’appelle:

buyHandler = (button) => {
      laisser gridrow = button.up ('gridrow'),
      record = gridrow.getRecord ();
      Ext.toast (`Acheter $ {record.get ('nom')}`)
}
Ajout de bouton dans une grille

Comme vous pouvez le constater à partir de cet exemple, vous pouvez incorporer n'importe quel composant ExtReact dans une cellule de grille ExtReact, et ce dernier est totalement interactif.

Voir le code jusqu'à cette étape sur GitHub

Ajout d'un graphique sparkline de tendances à la grille des stocks

Dans Stocks Data, nous avons un tableau de ticks sur les cinq dernières ventes d’actions. Intégrons cela sous forme de graphique sparkline dans la grille. De nouveau, nous allons utiliser Widgetcell pour rendre le composant ExtReact dans une cellule de grille.

Lorsque vous exécutez votre application avec npm start, utilisez votre souris pour passer la souris sur différents points du graphique sparkline. La valeur Y sera alors affichée sous la forme de deux points décimaux.

Graphique de tendances dans une grille

Voir le code jusqu'à cette étape sur GitHub.

Exportation des données de stocks vers Excel

Comme pour toute application gourmande en données, nous souhaitons pouvoir exporter les données vers Excel. Pour ajouter cette fonctionnalité, nous allons ajouter gridexporter aux plugins prop dans une grille, comme indiqué:

Nous ajouterons quelques composants supplémentaires à l'application pour faciliter l'appel de la fonctionnalité d'exportation. Nous ajouterons la barre de titre et la barre de titre du dock en haut de la grille et y placerons un menu. Lorsque vous cliquez sur le bouton "Exporter", vous avez la possibilité d'exporter au format Excel ou CSV.


           

Le gestionnaire d'exportation transmettra le type d'exportation et l'extension du nom de fichier, comme indiqué:

export = (type) => {
           this.grid.cmp.saveDocumentAs (
           {type, titre: 'Stocks'});
}

Vous devrez passer l'exportateur dans les dépendances package.json comme indiqué:

"@ sencha / ext-exportateur": "~ 6.6.0"

Vous aurez besoin d’installer la dépendance avec npm install, puis NPM commence à exécuter l’application.

Exportation des données de la grille

Le plug-in Exporter permet l'exportation de données vers différents formats de fichiers. Il prend en charge les formats natifs XSLX, Excel XML, HTML et CSV / TSV (valeurs séparées par des virgules / tabulations).

Voir le code jusqu'à cette étape sur GitHub.

Ajout d'une capacité d'édition à une grille de stocks

La feuille de calcul nécessite la possibilité de modifier les données. Pour ajouter cette fonctionnalité, nous devrons ajouter un autre plug-in Grid appelé gridcellediting. En ajoutant ce plugin et en marquant les colonnes comme étant modifiables, vous disposez maintenant d'une feuille de calcul pouvant être modifiée en double-cliquant sur une cellule de la grille. Vous pouvez continuer à modifier la grille en faisant défiler les cellules de la grille.

Ajouter un plugin d'édition de cellule de grille avec gridcellediting: true et en rendant “Nom” modifiable dans la colonne Grille comme indiqué:

Lorsque vous exécutez votre application avec npm start, vous pouvez désormais modifier les cellules de la grille.

Capacité d'édition dans une grille

Gestion des événements d'édition

Après avoir modifié la cellule de la grille, vous devez écouter cet événement dans le magasin pour connaître les modifications apportées aux données. Vous faites cela en ajoutant une configuration d'écouteur et un écouteur pour «événement de mise à jour». L'événement de mise à jour transmettra un certain nombre de paramètres, y compris magasin, enregistrement mis à jour, l'objet qui décrit l'opération qui s'est produite, puis transmet un tableau de noms de champs modifiés. Vous l'ajouterez dans le gestionnaire.

Dans cette application, nous ne faisons que montrer un message de pain grillé. Dans l'application réelle, vous appliqueriez en fait une logique métier telle que des modifications persistantes dans la base de données.

...
les auditeurs: {
            mise à jour: this.onRecordUpdated
 }
...
onRecordUpdated = (magasin, enregistrement, opération, modifiedFieldNames) => {
      champ const = modifiedFieldNames [0];
      Ext.toast (`$ {record.get ('nom')}}
                 $ {field} mis à jour en $ {record.get (field)} `)
 }

Ajout d'une option de sélection à une cellule de la grille

Si vous souhaitez ajouter une option «Sélectionner» à une cellule de la grille, vous pouvez le faire en utilisant un autre composant ExtReact appelé SelectField. Vous venez d'ajouter le composant SelectField ExtReact dans la colonne requise.


         

Lorsque vous exécutez votre application avec npm start, vous pouvez maintenant voir les options de sélection comme indiqué:

Ajout d'une option de sélection à la grille

Voir le code jusqu'à cette étape sur GitHub.

Optimisation des feuilles de calcul pour une expérience mobile

Cette application fonctionne bien pour l'expérience de bureau, mais vous pouvez vouloir fournir une expérience optimisée lorsque vous utilisez la même application sur le navigateur du téléphone mobile. Pour cette application, l'édition de cellule peut ne pas être la meilleure expérience pour l'édition de téléphone portable à petit écran. Pour les appareils à petit écran, vous pouvez choisir un style d'édition différent.

L'option platformconfig ExtReact vous permet de spécifier un comportement pour le bureau ou le mobile. Vous pouvez définir n'importe quel accessoire avec une valeur différente en fonction de platformConfig. Nous définissons ici le plug-in en fonction de la plate-forme. Dans cet exemple, nous utiliserons gridcellediting lorsque l’application est sur le bureau. Lorsque l'application est sur mobile, nous utiliserons grideditable, qui permet de mieux modifier les données sur les appareils mobiles, comme indiqué:

platformConfig = {{
                bureau: {
                        plugins: {
                            gridexporter: vrai,
                            gridcellediting: true
                        }
                },
                '! desktop': {
                        plugins: {
                            gridexporter: vrai,
                            grideditable: true
                        }
                }
}}

Lorsque vous exécutez votre application avec npm start, vous pouvez maintenant voir la vue mobile comme indiqué:

Stocks app sur un appareil mobile

Voir le code jusqu'à cette étape sur GitHub.

Résumé

Cette application de tableur Stocks montre à quel point il est facile de créer facilement une interface de type feuille de calcul dans votre application Web pilotée par les données en utilisant React 16 et Sencha ExtReact. Vous pouvez voir l'application en cours d'exécution terminée dans Sencha Fiddle.