Visão geral dos pacotes Ignite UI for React

    Ignite UI for React é um conjunto abrangente de componentes de interface do usuário, kits de ferramentas de design e serviços de suporte para React. Criado para capacitar os desenvolvedores a criar aplicativos React modernos e de alto desempenho para navegadores de desktop, experiências móveis e aplicativos Web progressivos (PWAs), o Ignite UI for React aproveita as práticas recomendadas e APIs mais recentes React.

    Charts & Graphs

    Ignite UI for React contém uma biblioteca de Tabelas e Gráficos que permite visualizar qualquer tipo de dados através de seus 65+ tipos de séries e combinações de gráficos em gráficos e painéis impressionantes e interativos. Criado para velocidade e beleza, projetado para funcionar em todos os navegadores modernos e com toque e interatividade completos, você pode criar rapidamente visuais responsivos em qualquer dispositivo.

    Medidores

    Ignite UI for React fornece componentes Radial Gauge, Linear Gauge e Bullet Graph usados para ilustrar dados de maneira fácil e intuitiva. O Radial Gauge tem uma variedade de opções de personalização para criar uma forma e escala predefinidas. O Medidor Linear fornece uma visualização simples de um valor comparado com uma escala e um ou mais intervalos. Ele suporta uma escala, um conjunto de marcas de escala e um conjunto de rótulos. O componente Gráfico de marcadores que permite criar visualizações de dados, substituindo medidores e medidores usados em painéis por gráficos de barras simples.

    Mapas

    Ignite UI for React Mapas Geográficos traz a capacidade de visualizar dados geográficos em seu aplicativo. Ele pode renderizar conjuntos de dados que consistem em muitas localizações geográficas em formas de marcadores, linhas, polígonos ou até mesmo bitmaps interativos. Ele permite que você sobreponha várias camadas de mapa com dados geográficos, marque localizações geográficas específicas e exiba informações usando marcadores e cores personalizados.

    Grids & Inputs

    Ignite UI for React fornece vários componentes de grades que permitem vincular e exibir dados com pouca configuração na forma de grade de dados, lista, árvore e até planilha. Ele também fornece recursos como filtragem, classificação, agrupamento, fixação e muito mais.

    Buttons, Inputs, Layouts & Menus

    Ignite UI for React fornece vários tipos de botões, entradas, menus e layouts que oferecem a capacidade de criar aplicativos da Web modernos usando encapsulamento e o conceito de componentes reutilizáveis em uma abordagem livre de dependências. Veja o livro de histórias aqui. Esses componentes são baseados no Indigo Design System, são totalmente suportados pelo App Builder e são apoiados por kits de interface do usuário prontos para uso para Sketch, Adobe XD e Figma.

    Introdução ao Ignite UI for React

    Install IgniteUI CLI

    Para criar um aplicativo do zero e configurá-lo para usar o Ignite UI React você pode usar a CLI Ignite UI. A primeira etapa é instalar o respectivo pacote globalmente da seguinte maneira:

    npm install -g igniteui-cli

    If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application. To start the guide, simply run the ig command:

    ig

    Then choose React as framework, React TS as type, select Default Top Navigation project template, add a specific component/view or select Complete & Run. Additionally, you can read more about the Ignite UI CLI here.

    Como alternativa, você pode usar frameworks populares como Next.js, Vite ou Expo, conforme recomendado pela equipe React. Veja a seguir instruções passo a passo para criar aplicativos React com Ignite UI React usando um desses métodos.

    Prerequisites

    1. Instale o NodeJS.
    2. Instale o Visual Studio Code.

    Creating New React Project

    Com os pré-requisitos acima instalados, podemos criar um novo aplicativo React.

    1 - Abra o VS Code, selecione o menu Terminal e depois a opção Novo Terminal.

    2 - Digite um destes comandos na janela do terminal:

    npx create-next-app@latest

    Then follow the prompts to choose a name for the project, whether to use Typescript or not and for various other options React provides. For this example npx and create-next-app are required. Refer to this topic for more information on the different ways to boilerplate a React application.

    Updating Existing App

    Se você quiser usar Ignite UI for React em um projeto React CLI existente (um que você já tenha). Nós temos você coberto! Tudo o que você precisa fazer é executar estes 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

    Ou

    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

    Isso instalará automaticamente os pacotes do Ignite UI for React, juntamente com todas as suas dependências, importações de fontes e referências de estilos para o projeto existente.

    Importing Component Modules

    Primeiro, temos que importar os módulos necessários dos componentes que queremos usar. Vamos em frente e faremos isso para o componente GeographicMap.

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

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

    Using Components

    Agora estamos prontos para usar o componente de mapa Ignite UI for React em nossa marcação! Vamos em frente e defini-lo:

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

    Running Application

    Finalmente, podemos executar nosso novo aplicativo usando um dos seguintes comandos:

    npm run-script start

    Após executar este comando, seu projeto será construído e servido localmente em seu computador. Ele será aberto automaticamente em seu navegador padrão e você poderá usar Ignite UI for React em seu projeto. O resultado final deve mostrar um mapa interativo do mundo: