Cómo construir una impresionante hoja de cálculo de acciones con React 16

React 16 es la primera versión de React construida sobre la nueva arquitectura central de React, llamada "Fiber". React 16 está diseñado desde cero para admitir el renderizado asíncrono. Esto permite procesar grandes árboles de componentes sin bloquear el hilo principal de ejecución.

React 16 es popular porque admite una serie de características clave, como la captura de excepciones utilizando límites de error, la devolución de múltiples componentes del renderizado, el tamaño reducido del archivo y su soporte para la licencia MIT.

Para crear una aplicación web basada en datos como una hoja de cálculo de Stocks, necesitará una interfaz similar a una hoja de cálculo para mostrar los datos de sus usuarios.

Hoja de cálculo de existencias

Sus usuarios esperarán que la hoja de cálculo en su aplicación sea capaz de:

  • Desplazarse con un encabezado fijo
  • Ordenar haciendo clic en el encabezado de una columna
  • Mostrar y ocultar columnas específicas
  • Paginación, agrupación y resumen
  • Edición de datos en celdas
  • Exportando a Excel
  • Profundización / expansión de hileras

Sin embargo, una hoja de cálculo o cuadrícula puede ser uno de los componentes de interfaz de usuario más complejos y complejos para construir en React. Esto se debe a que muchas de las características necesarias requieren una experiencia significativa en React, así como la voluntad y la capacidad de profundizar en el DOM.

Si desea codificar una cuadrícula utilizando una tabla HTML u otro componente de terceros, deberá implementar varias características comunes. Estas características incluyen hacer clic en el encabezado de una columna de la cuadrícula para ordenar o hacer clic en un divisor entre el encabezado de una columna para cambiar el tamaño, o deslizar un buscapersonas y buscar la siguiente página de datos.

Para compilar rápidamente esta aplicación, utilizaremos los componentes ExtReact de Sencha. ExtReact de Sencha es un conjunto de componentes de más de 115 componentes de interfaz de usuario preconstruidos que puede integrar fácilmente con las aplicaciones React 16. Uno de los componentes clave en ExtReact es Grid. Proporciona la funcionalidad de hoja de cálculo requerida para construir una aplicación de hoja de cálculo de acciones rápidamente. Haremos uso de ExtReact Grid para mostrar información sobre acciones y compañías de renta variable.

Comencemos con la creación de una aplicación de acciones utilizando ExtReact Grid de Sencha.

Aplicación de hoja de cálculo de andamios

Para crear andamios de aplicaciones, siga los pasos a continuación:

  • Asegúrese de tener un entorno de Nodo configurado

Primero, asegúrese de tener el Nodo 8.11+ y NPM 6+ configurados en su sistema. Puede descargar la última versión de Node del sitio web de Node. Si ya instaló Node, puede verificar fácilmente las versiones de Node y npm utilizando estos comandos: node -v y npm -v

  • Obtenga sus credenciales de inicio de sesión para el repositorio ExtReact NPM

Los paquetes ExtReact NPM se alojan en el repositorio privado NPM de Sencha. Inicie sesión en ese repositorio una vez para obtener acceso a todos los paquetes ExtReact. Para obtener credenciales de inicio de sesión, vaya a la página de prueba gratuita de 30 días de ExtReact y complete el formulario. Le enviaremos un correo electrónico con los detalles de inicio de sesión, así como algunos enlaces a recursos como los documentos y proyectos de muestra.

  • Inicie sesión en el repositorio ExtReact NPM y obtenga el generador de aplicaciones

El siguiente paso es iniciar sesión en el repositorio privado npm de Sencha, que aloja los paquetes ExtReact. Use su inicio de sesión npm (proporcionado en el correo electrónico de prueba de ExtReact) para asociar el repositorio npm con el alcance @sencha e ingrese las credenciales cuando se le solicite:

npm login - registro = http: //npm.sencha.com - alcance = @ sencha

El siguiente paso es instalar el paquete del generador ExtReact.

npm install -g @ sencha / ext-react-gen
  • Crea tu primera aplicación React

Ejecute el generador de aplicaciones ExtReact para crear su primera aplicación ExtReact:

ext-react-gen app your-app-name-here -i

El generador de aplicaciones le hará algunas preguntas, como el nombre de su aplicación. De forma predeterminada, la aplicación utiliza el tema Material (basado en las pautas de diseño de Material de Google) y es una buena opción como tema inicial.

Seleccione "Generar una aplicación vacía" en una de las indicaciones. El generador también le pedirá que cree un nuevo directorio para su proyecto. El generador descargará y creará su aplicación de muestra, incluidas las dependencias relevantes.

  • Ejecute su aplicación React

En la salida del generador, encontrará pasos para ejecutar su aplicación. Cambie a su nuevo directorio de aplicaciones y ejecute la aplicación usando:

npm start

Esto activará la aplicación, y su aplicación React vacía solo aparecerá con el título de la aplicación. El componente principal (por ejemplo, StocksGrid) en la aplicación tiene un contenedor en la raíz. Esto está marcado como pantalla completa, el diseño está configurado para ajustarse, lo que significa que estirará a su hijo para llenarlo.

Vea el código hasta este paso en GitHub.

Agregar Stocks Grid a la aplicación

Agregar datos de existencias

Agregaremos un conjunto de datos de ejemplo de 10,000 filas, llamado stocks.json a la aplicación. Cada fila de datos contiene el nombre de la compañía, el símbolo de ticker, el sector y las industrias en las que se encuentran. La fila también contiene una serie de ticks que son las últimas 5 ventas de ese stock.

Estos son los datos que vamos a mostrar en nuestra cuadrícula. En este tutorial, vamos a cargar datos estáticamente desde stocks.json, pero también puede crear una API de back-end para obtener los mismos datos.

Crear una cuadrícula básica

En el componente StockGrid React, en el método de representación vamos a devolver una cuadrícula con columnas.

Para agregar columnas en nuestra cuadrícula, utilizamos un componente Columna. El componente Columna toma un índice de datos que es el mismo que el campo de nombre de los datos de las existencias. La columna toma un accesorio de texto que es el texto del encabezado de la columna. También podemos darle un ancho a la Columna, como un ancho fijo o un flex o una combinación de flex y mínimo o máximo también. Agregaremos componentes de columna para el nombre de la empresa, el símbolo, los ticks, el sector y la industria. Esto creará una nueva clase StocksGrid con Grid como se muestra a continuación


       
       
       
       
       

Su aplicación devolverá StockGrid como parte del renderizado de la siguiente manera:

la aplicación de clase predeterminada de exportación extiende el componente {
   render () {
        regreso (
            
                
            
        )
    }
}

Vea el código hasta este paso en GitHub.

Al ejecutar, podrá ver la aplicación web con una cuadrícula vacía al iniciar npm

Enlace de datos de stock con cuadrícula

Una cuadrícula ExtReact es una tabla similar a una hoja de cálculo que extrae y procesa datos de un almacén de datos. En ExtReact, Store es una estructura de datos que le permite ordenar y filtrar datos en una cuadrícula.

Ahora podemos comenzar cargando los datos de existencias y creando una tienda. Las cuadrículas tomarán sus datos de la Tienda. Las interacciones con la cuadrícula desencadenarán eventos en la tienda, como recargar, ordenar o paginar.

El concepto del almacén de datos ExtReact es un poco diferente del Flux Store. Lo que hace que Grid y Store sean un poco diferentes del enfoque React estándar es que los dos están estrechamente integrados. Por lo general, puede pasar datos directamente a una Tienda, o una Tienda puede extraer datos por su cuenta desde un back-end utilizando un Proxy. ExtReact Grid proporciona una funcionalidad interactiva como filtrado, clasificación, paginación, agrupación y resumen sin ningún código adicional.

Para este ejemplo, estamos pasando los datos directamente a la tienda desde el archivo de datos de Stocks. Alternativamente, puede crear una tienda con una configuración de proxy: tener un proxy nos permite hacer todo tipo de cosas geniales, como paginación, filtrado y clasificación remotos. Para esta aplicación, configuramos la carga automática en verdadero, por lo que carga automáticamente los datos en la cuadrícula. Los datos en bruto no están particularmente ordenados por ningún criterio, por lo que vamos a ordenarlos en el lado del cliente especificando la propiedad de nombre.

this.store =
       nueva Ext.data.Store ({
            datos: existencias,
            autoLoad: verdadero,
            clasificadores: [{
                nombre de la propiedad'
            }],
            oyentes: {
                actualización: this.onRecordUpdated
            }
})

En la cuadrícula, asigne la configuración de la tienda a la tienda que creamos.

       ...

Ahora ejecutando npm start, nuestra aplicación tiene una cuadrícula con todos los datos como se muestra a continuación:

Cuadrícula básica con datos

Con este simple código React, obtienes muchas funciones de forma gratuita. Estas características incluyen la clasificación, que le permite hacer clic en cualquier encabezado de columna y se ordena automáticamente en el lado del cliente. Si implementamos una API de back-end real, podríamos configurar Store Proxy para realizar una ordenación remota en el back-end y usar una cláusula "ordenar por" en la base de datos para hacer una ordenación. ExtReact Grid también proporciona columnas redimensionables de forma gratuita. Para que el usuario pueda arrastrar la columna de lado a lado.

ExtReact Grid también proporciona una buena característica de agrupación. El usuario de su aplicación puede agrupar por industria, y la aplicación agrupará todos los datos por industria. ExtReact Grid le dará un encabezado anclado a medida que se desplaza hacia abajo para cada una de las agrupaciones.

Agrupación por industria

A medida que ejecuta su aplicación, notará que estos datos se procesan con bastante rapidez para 10,000 registros. La razón por la que se procesa tan rápido es porque está usando lo que llamamos Representación en búfer. Con la representación en búfer, en la carga inicial, Grid procesa datos que son un poco más de lo que realmente ve en términos de "altura del puerto de vista". A medida que se desplaza hacia abajo, en realidad está reemplazando el contenido de las celdas de Grid con los registros más nuevos a medida que avanzas en la tienda. Por lo tanto, Grid está realmente conservando los elementos DOM tanto como sea posible. Al mantener el DOM pequeño, mantiene el consumo de memoria pequeño y garantiza un alto rendimiento de la aplicación.

Vea el código hasta este paso en GitHub.

Diseñando tu Cuadrícula de Acciones

Desea diseñar la cuadrícula para que los datos sean más fáciles de analizar.

Usando el accesorio de celda de cuadrícula

Echemos un vistazo al control del estilo de las celdas de la cuadrícula. Queremos poner el nombre en negrita: la mejor manera de hacerlo es utilizando el accesorio de celda. La celda de la cuadrícula toma una serie de configuraciones que controlan el aspecto de la celda. Lanzaremos una configuración de estilo allí, y luego diremos que fontWeight es igual a negrita.

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

Agregar un botón en una fila

Ahora, supongamos que queremos tener un botón en el que podamos hacer clic para comprar una de estas acciones. Para hacer eso, podemos agregar una columna con un botón. Esta vez no vamos a agregar un índice de datos porque no corresponde a ningún campo en la Tienda. Vamos a agregar un WidgetCell con un botón. Vamos a hacer un poco de estilo: vamos a poner acción alrededor de la IU, por lo que el botón tendrá un aspecto de acción redonda como se muestra a continuación:


    
        

El controlador de compra que vamos a usar es muy simple. Cuando haga clic en el botón de compra, solo mostraremos un pequeño mensaje que dice el símbolo de la acción que está comprando. Cuando haces clic en él, llamará a esta función:

buyHandler = (botón) => {
      let gridrow = button.up ('gridrow'),
      record = gridrow.getRecord ();
      Ext.toast (`Comprar $ {record.get ('nombre')}`)
}
Agregar botón en una cuadrícula

Como puede ver en este ejemplo, básicamente puede incrustar cualquier componente ExtReact dentro de una celda ExtReact Grid, y es completamente interactivo.

Vea el código hasta este paso en GitHub

Agregar un gráfico de minigráfico de tendencias a la cuadrícula de acciones

En Stocks Data, tenemos una serie de ticks en las últimas cinco ventas de acciones. Incrustemos eso como un gráfico Sparkline dentro de la cuadrícula. Nuevamente, vamos a usar Widgetcell para representar el componente ExtReact dentro de una celda de cuadrícula.

A medida que ejecuta su aplicación con npm start, use su mouse para desplazarse sobre diferentes puntos en el gráfico de minigráficos, mostrará el valor Y con formato de dos puntos decimales.

Gráfico de tendencias en una cuadrícula

Vea el código hasta este paso en GitHub.

Exportación de datos de existencias a Excel

Al igual que con cualquier aplicación de uso intensivo de datos, queremos la capacidad de exportar los datos a Excel. Para agregar esa capacidad, agregaremos gridexporter a los accesorios de complementos a una cuadrícula como se muestra:

Agregaremos algunos componentes más a la aplicación para que sea más fácil llamar a la funcionalidad de exportación. Agregaremos la barra de título y la barra de título del muelle en la parte superior de la cuadrícula y pondremos un menú dentro. Cuando haga clic en el botón "exportar", tendrá la opción de exportar a Excel o CSV.


           

El controlador de exportación pasará el tipo de exportación y la extensión del nombre de archivo como se muestra:

export = (type) => {
           this.grid.cmp.saveDocumentAs (
           {tipo, título: 'Stocks'});
}

Deberá pasar el exportador en las dependencias package.json como se muestra:

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

Necesitará instalar la dependencia con npm install y luego npm empezar a ejecutar la aplicación.

Exportar datos de cuadrícula

El complemento Exportador permite la exportación de datos a varios formatos de archivo. Es compatible con los formatos XSLX nativo, Excel XML y HTML y CSV / TSV (valores separados por comas / tabulaciones).

Vea el código hasta este paso en GitHub.

Agregar una capacidad de edición a una cuadrícula de acciones

La hoja de cálculo requiere la capacidad de editar los datos. Para agregar esa capacidad, necesitaremos agregar otro complemento de Grid llamado gridcellediting. Al agregar este complemento y marcar las columnas como editables, ahora tiene una hoja de cálculo que se puede editar haciendo doble clic en cualquier celda de la cuadrícula. Puede continuar editando la cuadrícula presionando las celdas de la cuadrícula.

Agregue el complemento de edición de celdas de cuadrícula con gridcellediting: true y haga que "Name" sea editable en la columna Grid como se muestra

A medida que ejecuta su aplicación con npm start, ahora podrá editar celdas de cuadrícula.

Capacidad de edición en una cuadrícula

Manejo de eventos de edición

Después de editar la celda de la cuadrícula, deberá escuchar ese evento en la tienda para ver los cambios de datos. Para ello, agregue una configuración de escucha y un escucha para "evento de actualización". El evento de actualización pasará una serie de parámetros que incluyen almacenamiento, registro actualizado, el objeto que describe la operación que sucedió y luego pasa una matriz de nombres de campo modificados. Agregará eso en el controlador.

En esta aplicación, solo mostramos un mensaje brindis. En la aplicación del mundo real, en realidad aplicaría la lógica empresarial, como el cambio persistente en la base de datos.

...
oyentes: {
            actualización: this.onRecordUpdated
 }
...
onRecordUpdated = (store, record, operation, modifiedFieldNames) => {
      campo const = modifiedFieldNames [0];
      Ext.toast (`$ {record.get ('name')}
                 $ {field} actualizado a $ {record.get (field)} `)
 }

Agregar una opción de selección a una celda de cuadrícula

Si desea agregar una opción "Seleccionar" a una celda de Cuadrícula, puede hacerlo utilizando otro componente ExtReact llamado SelectField. Solo agrega el componente SelectField ExtReact en la columna requerida.


         

A medida que ejecuta su aplicación con npm start, ahora podrá ver las opciones seleccionadas como se muestra:

Agregar opción de selección a la cuadrícula

Vea el código hasta este paso en GitHub.

Hoja de cálculo de optimización de existencias para la experiencia móvil

Esta aplicación funciona bien para la experiencia de escritorio, pero es posible que desee proporcionar una experiencia optimizada al usar la misma aplicación en el navegador del teléfono móvil. Para esta aplicación, la edición celular puede no ser la mejor experiencia para la edición de teléfonos móviles de pantalla pequeña. Para dispositivos de pantalla pequeña, es posible que desee elegir un estilo de edición diferente.

La opción de configuración de plataforma ExtReact le permite especificar el comportamiento para computadoras de escritorio o dispositivos móviles. Puede configurar cualquier accesorio a un valor diferente en función de platformConfig y aquí estamos configurando el complemento en función de la plataforma. En este ejemplo, usaremos gridcellediting cuando la aplicación esté en el escritorio. Cuando la aplicación esté en un dispositivo móvil, utilizaremos grideditable que proporciona una mejor manera de editar datos en dispositivos móviles como se muestra:

platformConfig = {{
                escritorio: {
                        complementos: {
                            gridexporter: cierto,
                            gridcellediting: verdadero
                        }
                },
                '!escritorio': {
                        complementos: {
                            gridexporter: cierto,
                            rejilla: verdadero
                        }
                }
}}

A medida que ejecuta su aplicación con npm start, ahora podrá ver la vista móvil como se muestra:

Aplicación de acciones en un dispositivo móvil

Vea el código hasta este paso en GitHub.

Resumen

Esta aplicación de hoja de cálculo Stocks muestra lo fácil que es crear una interfaz similar a una hoja de cálculo fácilmente en su aplicación web basada en datos usando React 16 y Sencha ExtReact. Puede ver la aplicación en ejecución completa en Sencha Fiddle.