Introdução ao Ignite UI for React

    Este tópico fornece instruções passo a passo para criar aplicativos React com Ignite UI for React

    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-react-app MyAppName --typescript

    yarn create react-app MyAppName --typescript

    Dependendo da abordagem, npx ou yarn serão necessários. Consulte este site para obter mais informações sobre os comandos acima.

    cd MyAppName

    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: