Comment créer des applications Web React 16 avec la grille Sencha –

Cet article a été publié à l'origine sur Sencha . Merci d’avoir soutenu les partenaires qui ont rendu SitePoint possible.

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 pour prendre en charge le rendu asynchrone, ce qui permet de traiter de grandes arborescences de composants sans bloquer le thread d'exécution principal. Il prend en charge un certain nombre de fonctionnalités clés, telles que la capture des exceptions à l'aide de limites d'erreur, la restitution de plusieurs composants, la réduction de la taille des fichiers et la prise en charge de la licence MIT.

vous utiliserez une interface de type grille ou tableur à un moment donné pour afficher les données de vos utilisateurs. Selon le contexte, vos utilisateurs peuvent s'attendre à ce que la grille 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
• regroupement et résumé
• Modification de données dans des cellules
• Exportation dans Excel
• Exploration en aval / extension de ligne

Une grille peut être l'un des composants d'interface utilisateur les plus complexes et complexes à intégrer dans React. Les fonctionnalités requièrent à la fois une expertise significative en matière de réactivité, ainsi que la volonté et la capacité de se plonger dans le DOM. Heureusement, la grille ExtReact fournit toutes ces fonctionnalités et bien plus encore.

Dans cet article, nous allons créer un exemple à l'aide de la grille Sencha ExtReact qui affiche des informations sur les sociétés Stocks et Equities. Si vous voulez coder une grille à l'aide d'un tableau HTML ou d'un autre composant tiers, vous devrez peut-être faire un clic sur un en-tête de colonne pour le trier ou cliquer sur un séparateur téléavertisseur et effectuer une lecture pour la page suivante de données. Avec ExtReact Grid, ces fonctionnalités sont intégrées. Vous voulez l'essayer vous-même? Commencez par un essai gratuit de 30 jours d'ExtReact aujourd'hui – Inscrivez-vous ici .

Commençons par créer une application à l'aide de la grille ExtReact.

Premiers pas avec la génération d'extensions ExtReact

Pour commencer à développer une application React avec les composants ExtReact, procédez comme suit:

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

Tout d'abord, assurez-vous que Node 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 Node . Si vous avez déjà installé Node, vous pouvez facilement vérifier les versions de nœud et npm en utilisant ces commandes:

 node -v
npm -v

Obtenez vos identifiants de connexion pour le repo ExtReact npm

Les packages ExtReact npm sont hébergés sur le dépôt privé npm 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 ExtReact 30-Free Free Trial et remplissez le formulaire. Nous vous enverrons un courrier électronique contenant des informations de connexion ainsi que des liens vers des ressources telles que les documents et les projets.

Connectez-vous à ExtReact npm repo et obtenez le générateur d'application ExtReact est de se connecter au dépôt privé npm de Sencha, qui héberge les packages ExtReact. Utilisez votre login npm (fourni dans le courrier électronique) pour associer le référentiel à la portée @sencha et entrez les informations d'identification lorsque vous y êtes invité:

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

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

 npm install -g @ sencha / ext-react-gen

Créez votre première application React

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

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

Le générateur vous demandera de nommer votre application, de nommer le package npm et de sélectionner un thème. Le thème Matière par défaut (basé sur Les directives de conception de matériaux de Google ) constituent un bon choix en tant que thème de départ. Sélectionnez “Générer une application vide”. Le générateur vous demandera également de créer un nouveau répertoire pour votre projet. Le générateur va ensuite télécharger et créer votre exemple d'application, y compris les dépendances pertinentes.

Exécuter votre application React

Dans la sortie du générateur, vous trouverez les étapes pour exécuter votre application. C'est aussi simple que de changer de répertoire d'application et d'exécuter l'application en utilisant:

 npm start

Cela lancera l'application, votre application vide React apparaîtra simplement avec le titre de l'application. Le composant principal (par exemple StocksGrid) dans l'application a un conteneur à la racine, qui est marqué comme plein écran, la disposition est définie pour s'adapter, ce qui signifie qu'il va étirer son enfant pour le remplir.

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

Ajout d'une grille à l'application

Ajout de données de stock

Nous allons ajouter un exemple de fichier appelé stocks.json au application. C'est un ensemble de données assez volumineux, environ 10 000 lignes dans json, et chaque ligne représente un symbole de société ou de téléscripteur. Nous avons donc le nom de l'entreprise, le symbole boursier, le secteur, les secteurs d'activité et un tableau de coches. 5 dernières ventes de ce stock. Ce sont les données que nous allons afficher dans notre grille. Dans une application du monde réel, toutes ces données seraient renvoyées sur le serveur principal. Nous allons le charger statiquement pour cet exemple d’application plutôt que de passer en revue tous les mécanismes permettant de créer une API de repos back-end.

Création d'une grille de base

Dans la méthode de rendu du composant StockGrid, nous allons retourner une grille avec des colonnes.

Pour mettre des colonnes dans notre grille, nous utilisons un composant de colonne et un index de données identique au champ de nom des données de stocks. Il prend un texte prop qui est le texte de l'en-tête de colonne, puis 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 l’entreprise, le symbole, les graduations, le secteur et l’industrie. Créez une nouvelle classe StocksGrid avec Grid comme indiqué ci-dessous:

Maintenant, ajoutez StockGrid à Class App comme indiqué ci-dessous:

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

Voir le code jusqu'à cette étape sur GitHub.Vous pourrez voir l'application Web avec la grille vide au démarrage de npm.

Liaison de données de stock avec la grille

Une grille dans ExtReact est un tableau de données qui extrait et restitue les données d'un magasin de données ext. Dans ExtReact, notre implémentation de magasin est une structure de données qui vous permet de trier et de filtrer des données pour une grille ou des composants (comme des listes ou des graphiques).

Encore une fois, les grilles récupèrent toujours leurs données dans le magasin et certaines interactions avec la grille déclenchent des événements sur le magasin, comme le rechargement ou le tri ou la pagination. Pour ce faire, nous allons créer notre magasin ici.

Le magasin de données Ext est différent du magasin de flux. Ce qui rend la grille et le magasin un peu différents de l'approche standard de React, 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 à partir d'un serveur principal à l'aide d'un proxy. Avec ExtReact Grid, vous obtenez des fonctionnalités interactives telles que le filtrage, le tri, la pagination, le regroupement et la synthèse, sans avoir à le coder.

Vous pouvez également créer un magasin avec une configuration de proxy – le fait d’avoir un proxy nous permet de réaliser toutes sortes d’excellents résultats, tels que la pagination, le filtrage et le tri à distance. Nous définissons l'autoload sur true, de sorte qu'il charge automatiquement la grille. Les données ne sont pas particulièrement triées en fonction de critères. Nous allons donc les trier du côté client en spécifiant la propriété name.

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

Dans la grille, affectez la configuration du magasin au magasin créé.

       ...

Maintenant, nous avons une grille avec toutes les données comme indiqué ci-dessous:

Avec ce code simple, vous obtenez beaucoup de fonctionnalités gratuitement – telles que le tri – qui vous permet de cliquer sur n'importe quel en-tête de colonne et le tri automatiquement (voir la colonne des symboles dans l'exemple ci-dessous).

Dans ce cas, le tri est effectué côté client. Mais si nous implémentions une véritable API back-end, nous pourrions configurer le proxy pour effectuer un tri à distance sur le serveur principal et utiliser une «clause order by» dans la base de données pour effectuer un tri.

Vous obtenez également des colonnes redimensionnables gratuitement. Donc, même si nous définissons une largeur sur ces colonnes, si l'utilisateur veut voir quelque chose ou fermer quelque chose, il peut le faire en faisant glisser la colonne d'un côté à l'autre.

Vous obtenez également une fonctionnalité de regroupement intéressante. Donc, si nous voulions grouper par secteur, nous pourrions dire grouper par ce champ et regrouper toutes les données selon la valeur de l'industrie, et cela vous donnerait un en-tête épinglé lorsque vous faites défiler pour chacun des groupes. 19659003]

Vous remarquerez que ces données sont rendues assez rapidement pour 10 000 enregistrements. La raison pour laquelle il est rendu si rapidement est qu’il utilise ce que nous appelons le rendu en tampon. Donc, malgré le fait que cette table semble pleine et que vous puissiez faire défiler et continuer à aller et venir, lors du chargement initial, elle ne restitue qu'un peu plus que ce que vous voyez réellement en termes de «hauteur du port d'affichage». 19659003] Au fur et à mesure que vous défilez, le contenu des cellules est remplacé par les enregistrements les plus récents lorsque vous vous trouvez dans le magasin. Donc, en fait, cela permet de conserver autant que possible les éléments DOM et de garder le DOM petit, de conserver une consommation de mémoire réduite et de garantir de hautes performances.

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

Il existe plusieurs façons de définir la grille, ce qui facilite son analyse.

Utilisation de Cell prop

Examinons le contrôle du style des cellules. Nous pouvons rendre le nom en gras – la meilleure façon de le faire est d'utiliser l'accessoire de la cellule. La cellule 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 égal à "bold".

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

Ajouter un bouton dans une rangée

Nous allons maintenant faire quelque chose de plus applicable au monde réel. Disons que nous voulons un bouton sur lequel nous pouvons cliquer pour acheter un de ces stocks dans la colonne de gauche. Pour ce faire, nous pouvons ajouter une colonne et, cette fois, nous n'allons pas ajouter un index de données car celui-ci ne correspond à aucun élément particulier du champ ou à aucun champ du magasin. Nous allons ajouter un WidgetCell avec un bouton. Nous allons faire un peu de style – nous allons y placer une interface utilisateur, le bouton aura donc un aspect d’action:

Le gestionnaire d’achat que nous allons utiliser est très simple. Lorsque vous cliquez sur le bouton d'achat, nous allons simplement utiliser l'hypothèse appelée ext.toast qui affichera un petit message de toast en haut qui indique le symbole du stock que vous achetez. Encore une fois, nous avons notre colonne que nous allons rendre pour chaque ligne. Nous allons afficher ce bouton, puis, lorsque vous cliquez dessus, il va appeler cette fonction:

 buyHandler = (button) => {
     let gridrow = button.up ('gridrow'),
     record = gridrow.getRecord ();
     Ext.toast (`Buy $ {record.get ('name')}`)
}

Vous pouvez voir dans cet exemple que vous pouvez fondamentalement incorporer un composant ExtReact à l’intérieur d’une cellule de grille, et qu’il est entièrement interactif. Il fonctionne comme un composant React complet.

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

Ajout d'un graphique de graphique de tendances

Dans Stock Data, nous avons ce tableau de ticks sur le cinq dernières ventes. Intégrons cela comme un graphique Sparkline dans la grille. Nous allons utiliser widgetcell pour rendre le composant ExtReact à l’intérieur d’une cellule de grille.

Lorsque vous utilisez votre souris pour survoler différents points du graphique linéaire, la valeur Y est mise en forme avec deux décimales.

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

Exportation de données vers Excel

L'une des exigences les plus courantes dans les applications gourmandes en données consiste à exporter les données vers Excel. ExtReact facilite la tâche en utilisant le plug-in prop pour une grille.

Pour faciliter l’appel de la fonctionnalité d’exportation, nous allons ajouter quelques composants supplémentaires. Nous allons ajouter la barre de titre et la barre de titre du dock en haut de la grille et y placer un menu. Lorsque vous cliquez sur le bouton «Exporter», vous pouvez exporter vers Excel ou CSV.

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

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

Assurez-vous d'avoir l'exportateur dans les dépendances package.json. Par exemple:

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

Installez la dépendance.

 npm install
npm start

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

sur GitHub.

Ajout d'une fonction d'édition à une grille

Nous pouvons faire en sorte que la grille ressemble davantage à une feuille de calcul en ajoutant la possibilité de modifier les données. Pour ajouter cette fonctionnalité, nous devons ajouter un autre plug-in appelé gridcellediting. En ajoutant ce plug-in et en marquant des colonnes modifiables, vous disposez désormais de données de grille pouvant être modifiées en double-cliquant sur n'importe quelle cellule de la grille. Vous pouvez continuer à modifier la grille en passant par les cellules de la grille.

Ajout d'un plug-in d'édition de cellule de grille:

 gridcellediting: true

Rendre le “Nom” modifiable:

Gestion des événements de modification

Si vous voulez faire quelque chose de spécial après avoir édité la cellule de grille, stocker pour les modifications de données. Vous faites cela en ajoutant une configuration d'écoute et un écouteur pour «l'événement de mise à jour».

L'événement «update» transmettra un certain nombre de paramètres, notamment le magasin, l'enregistrement mis à jour, l'objet décrivant l'opération, puis transmettra un tableau de noms de champs modifiés. Vous l'ajouterez dans le gestionnaire. Dans ce cas, nous montrons simplement un message de toast. Dans l'application réelle, vous appliqueriez réellement la logique métier telle que la modification persistante dans la base de données.

 ...
les auditeurs: {
           mise à jour: this.onRecordUpdated
}
...
onRecordUpdated = (store, record, operation, modifiedFieldNames) => {
     const field = modifiedFieldNames [0];
     Ext.toast (`$ {record.get ('name')}
                $ {field} mis à jour à $ {record.get (field)} `)
}

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

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

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

Optimisation de l'expérience multiplate-forme

expérience de bureau, mais comme vous réduisez la taille de l'écran pour l'expérience de la téléphonie mobile, l'édition de la cellule peut ne pas être la meilleure expérience pour l'édition. Pour les périphériques à petit écran, vous pouvez choisir un style d'édition différent.

L'option platformconfig vous permet de spécifier le comportement du bureau ou du mobile. Vous pouvez définir un prop sur une valeur différente en fonction de platformConfig et 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 offre une meilleure façon de modifier les données sur les appareils mobiles.

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

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

Vous pouvez utiliser la grille ExtReact 6.6 et ajouter facilement une interface de type tableur dans votre application Web pilotée par les données à l'aide de React 16. With ExtReact, vous pouvez utiliser n'importe quel composant moderne Ext JS, y compris la grille, la grille d'arbre, la grille pivotante, les graphiques, les visualisations D3 et plus encore – aucune personnalisation n'est requise. Vous obtenez un package optimisé et réduit contenant uniquement les composants que vous utilisez dans votre application. Vous pouvez créer un engagement utilisateur immersif en utilisant des mises en page et des fonctionnalités de conception adaptatives qui sont superbes sur les ordinateurs de bureau et les appareils mobiles. Pour rappel, vous pouvez commencer gratuitement avec ExtReact aujourd'hui avec un essai de 30 jours – Inscrivez-vous ici .

Sandeep Adwankar est chef de produit senior chez Sencha.