Introdução ao Ignite UI for React

Ignite UI for Reacté um conjunto completo de widgets de UI, componentes e kits de interface Sketch para React por Infragistics. Ele permite que desenvolvedores criem aplicativos modernos e de alto desempenho em HTML5 e JavaScript para navegadores desktop, experiências móveis e aplicativos web progressivos (PWAs).

Ignite UI for React compreende vários pacotes disponíveis sob licença MIT ou comercial, dependendo dos componentes e serviços que contêm. Para uma lista detalhada de componentes e suas licenças, consulte as perguntas frequentes e instalações de licenças e os tópicos Open Source vs Premium.

Prerequisites

Instale o NodeJS.
Instale o Visual Studio Code.

NÓ DE DOWNLOAD

BAIXAR VS CODE

Using Ignite UI CLI

Para criar uma aplicação do zero e configurá-la para usar Ignite UI React você pode usar a CLI Ignite UI. O primeiro passo é instalar o respectivo pacote globalmente da seguinte forma:

npm install -g igniteui-cli

Se você quiser uma experiência guiada pelas opções disponíveis, pode inicializar o modo passo a passo que vai te ajudar a criar e configurar sua nova aplicação. Para começar o guia, basta executar oig comando:

ig

Depois, escolhaReact como framework eIgnite UI for React TS como tipo de projeto. Selecione oDefault Top Navigation modelo do projeto, adicione um componente/visualização específica ou selecioneComplete & Run. Para mais informações sobre a CLI Ignite UI, veja a visão geral da CLI.

Se você adicionou um componente Grid durante os prompts, uma vez que o aplicativo esteja rodando, você deve ver algo parecido com o seguinte:

[!NOTE] Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under commercial license.

Alternativamente, você pode usar frameworks populares como Next.js, Vite ou Expo, conforme recomendado pela equipe React. A seguir, estão instruções passo a passo para criar React aplicações com Ignite UI for React usando um desses métodos.

Using Vite CLI

Creating a New React Project

Todos os frameworks populares para desenvolvimento React fornecem poderosas ferramentas de CLI para estruturar uma aplicação React.

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

2 - Digite o seguinte comando na janela do terminal:

npm create vite@latest

Depois, siga os prompts para escolher um nome para o projeto, React como framework, se deve usar o TypeScript e várias outras opções fornecidas pelo Vite. Por favor, consulte este tópico para mais informações sobre as diferentes formas de fazer a formulação de uma aplicação React.

Adding an Ignite UI React Grid Component

Instalação de Pacotes

Para adicionar o componente Ignite UI React Grid ao app, você precisa instalar oigniteui-react-grids pacote:

npm install igniteui-react-grids --save

Importação de Módulos de Componentes

Depois, podemos importar os módulos necessários dos componentes que queremos usar. Vamos fazer isso para os componentes Grid e Column que também usaremos no template. Também precisamos importar um dos temas.

import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';

Uso de Componentes

Agora estamos prontos para usar o componente Ignite UI for React grid em nossa marcação! Vamos definir assim:

// App.txs
function App() {
  const data = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Bob", age: 35 }
  ];

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGrid
        data={data}
        autoGenerate={false}>
        <IgrColumn
          field="name"
          header="Name"
          dataType="string">
        </IgrColumn>
        <IgrColumn
          field="age"
          header="Age"
          dataType="number">
        </IgrColumn>
      </IgrGrid>
    </div>
  );
}

Running Application

Finalmente, podemos rodar nossa nova aplicação:

npm run dev

Após executar esse comando, seu projeto será construído e servido localmente no seu computador. Ele será aberto automaticamente no seu navegador padrão e você poderá usar Ignite UI for React componentes no seu projeto. O resultado final deve mostrar uma grade de dados com dados de exemplo:

Updating Existing Apps

Se você quiser usar Ignite UI for React em um projeto existente de React CLI, nós temos tudo para você! 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

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.

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 Charts & Graphs que permite visualizar qualquer tipo de dado por meio de suas 65+ séries e combinações de gráficos para criar gráficos e dashboards impressionantes e interativos. Feito para velocidade e beleza, projetado para funcionar em qualquer navegador moderno e com toque e interatividade completos, você pode criar visuais responsivos rapidamente em qualquer dispositivo.

Medidores

Ignite UI for React fornece componentes de Radial Gauge, Linear Gauge e Bullet Graph usados para ilustrar dados de forma fácil e intuitiva. O Medidor Radial oferece várias opções de personalização para criar uma forma e escala pré-definidas. A Bitola Linear oferece uma visão simples de um valor comparada a uma escala e uma ou mais faixas. Ele suporta uma escala, um conjunto de marcas de marca e um conjunto de etiquetas. O componente Gráfico de Pontos permite criar visualizações de dados, substituindo medidores e medidores usados em dashboards por gráficos de barras simples.

Mapas

O componente Ignite UI for React Geographic Map traz a capacidade de visualizar dados geográficos na sua aplicação. Ele pode renderizar conjuntos de dados compostos por muitas localizações geográficas em formas de marcadores, linhas, polígonos ou até bitmaps interativos. Ele permite sobrepor múltiplas camadas de mapas com dados geográficos, marcar locais específicos e exibir informações usando marcadores e cores personalizados.

Grids & Inputs

Ignite UI for React oferece vários componentes de Grid que permitem vincular e exibir dados com pouca configuração, na forma de Grid Lite– um componente de grade leve sob licença do MIT, Data Grid– um componente de grade rico em recursos sob licença comercial, List, Tree e até mesmo Planilha.

Buttons, Inputs, Layouts, and Menus

Ignite UI for React oferece vários tipos de Botões, Entradas, Menus e Layouts que permitem construir aplicações web modernas usando encapsulamento e o conceito de componentes reutilizáveis em uma abordagem sem dependências. Veja o Livro de Fadas aqui. Esses componentes são baseados no Indigo Design System, são totalmente suportados pela App Builder e contam com kits de interface prontos para uso para Sketch, Adobe XD e Figma.