Descripción general de los paquetes de Ignite UI for React

    Ignite UI for React es un conjunto completo de componentes de interfaz de usuario, kits de herramientas de diseño y servicios de soporte para React. Diseñado para capacitar a los desarrolladores para crear aplicaciones React modernas y de alto rendimiento para navegadores de escritorio, experiencias móviles y aplicaciones web progresivas (PWA), Ignite UI for React aprovecha las API y las mejores prácticas React más recientes.

    Charts & Graphs

    Ignite UI for React contiene una biblioteca de tablas y gráficos que le permite visualizar cualquier tipo de datos a través de sus 65+ tipos de series y combinaciones de gráficos en gráficos y paneles impresionantes e interactivos. Diseñado para la velocidad y la belleza, diseñado para funcionar en todos los navegadores modernos y con un toque e interactividad completos, puede crear rápidamente imágenes receptivas en cualquier dispositivo.

    Calibres

    Ignite UI for React proporciona componentes de Medidor radial, Medidor lineal y Bullet Graph que se utilizan para ilustrar los datos de una manera fácil e intuitiva. El Medidor radial tiene una variedad de opciones de personalización para crear una forma y escala predefinidas. El Medidor lineal proporciona una vista simple de un valor comparado con una escala y uno o más rangos. Admite una escala, un conjunto de marcas de graduación y un conjunto de etiquetas. El componente Bullet Graph que le permite crear visualizaciones de datos, reemplazando los medidores y medidores que se utilizan en los paneles con gráficos de barras simples.

    mapas

    Ignite UI for React Mapas geográficos ofrece la capacidad de visualizar datos geográficos en su aplicación. Puede representar conjuntos de datos que constan de muchas ubicaciones geográficas en forma de marcadores, líneas, polígonos o incluso mapas de bits interactivos. Le permite superponer varias capas de mapa con datos geográficos, marcar ubicaciones geográficas específicas y mostrar información utilizando marcadores y colores personalizados.

    Grids & Inputs

    Ignite UI for React proporciona varios componentes de cuadrículas que le permiten vincular y mostrar datos con poca configuración en forma de cuadrícula de datos, lista, árbol e incluso hoja de cálculo. También proporciona funciones como filtrado, ordenación, agrupación, fijación y más.

    Buttons, Inputs, Layouts & Menus

    Ignite UI for React proporciona varios tipos de botones, entradas, menús y diseños que le brindan la capacidad de crear aplicaciones web modernas utilizando la encapsulación y el concepto de componentes reutilizables en un enfoque libre de dependencias. Vea el libro de cuentos aquí. Estos componentes se basan en el Design System Indigo, son totalmente compatibles con App Builder y están respaldados por kits de interfaz de usuario listos para usar para Sketch, Adobe XD y Figma.

    Primeros pasos con Ignite UI for React

    Install IgniteUI CLI

    Para crear una aplicación desde cero y configurarla para que utilice la Ignite UI React puede utilizar la CLI de Ignite UI. El primer paso es instalar el paquete respectivo globalmente de la siguiente manera:

    npm install -g igniteui-cli

    Si deseas obtener una experiencia guiada a través de las opciones disponibles, puedes inicializar el modo paso a paso que te ayudará a crear y configurar tu nueva aplicación. Para iniciar la guía, simplemente ejecute el comando ig:

    ig

    A continuación, elija React como marco, React TS como tipo, seleccione Default Top Navigation la plantilla de proyecto, agregue un componente/vista específicos o seleccione Complete & Run. Además, puede leer más sobre la CLI de Ignite UI aquí.

    Alternativamente, puede utilizar marcos populares como Next.js, Vite o Expo según lo recomendado por el equipo de React. A continuación se muestran instrucciones paso a paso para crear aplicaciones React con Ignite UI React utilizando uno de estos métodos.

    Prerequisites

    1. Instale NodeJS.
    2. Instale el código de Visual Studio.

    Creating New React Project

    Con los requisitos previos anteriores instalados, podemos crear una nueva aplicación React.

    1 - Abra VS Code, seleccione el menú Terminal y luego la opción Nueva Terminal.

    2 - Escriba uno de estos comandos en la ventana de terminal:

    npx create-next-app@latest

    A continuación, siga las indicaciones para elegir un nombre para el proyecto, si desea utilizar Typescript o no y para otras opciones React proporciona. Para este ejemplo npx y create-next-app son obligatorios. Consulte este tema para obtener más información sobre las diferentes formas de aplicar un texto estándar a una aplicación React.

    Updating Existing App

    Si desea utilizar Ignite UI for React en un proyecto de CLI de React existente (uno que tenga de antes). ¡Te tenemos cubierto! Todo lo que tienes que hacer es ejecutar estos comandos:

    npm install --save igniteui-react
npm install --save igniteui-react-charts igniteui-react-core
npm install --save igniteui-react-excel igniteui-react-core
npm install --save igniteui-react-gauges igniteui-react-core
npm install --save igniteui-react-grids igniteui-react-core
npm install --save igniteui-react-maps igniteui-react-core
npm install --save igniteui-react-spreadsheet igniteui-react-core

    O

    yarn add igniteui-react-charts igniteui-react-core
yarn add igniteui-react-excel igniteui-react-core
yarn add igniteui-react-gauges igniteui-react-core
yarn add igniteui-react-grids igniteui-react-core
yarn add igniteui-react-maps igniteui-react-core
yarn add igniteui-react-spreadsheet igniteui-react-core

    Esto instalará automáticamente los paquetes para Ignite UI for React, junto con todas sus dependencias, importaciones de fuentes y referencias de estilos al proyecto existente.

    Importing Component Modules

    Primero tenemos que importar los módulos requeridos de los componentes que queremos usar. Continuaremos y haremos esto para el componente GeographicMap.

    import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();

    Using Components

    ¡Ahora estamos listos para usar el componente de mapa Ignite UI for React en nuestro marcado! Sigamos adelante y definámoslo:

    // App.txs
function App() {
  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGeographicMap
        width="800px"
        height="500px"
        zoomable="true" />
    </div>
  );
}

    Running Application

    Finalmente, podemos ejecutar nuestra nueva aplicación usando uno de los siguientes comandos:

    npm run-script start

    Después de ejecutar este comando, tu proyecto se creará y se publicará localmente en tu computadora. Se abrirá automáticamente en tu navegador predeterminado y podrás usar los componentes de Ignite UI for React en tu proyecto. El resultado final debería mostrar un mapa interactivo del mundo: