Primeros pasos con Ignite UI for React

    En este tema se proporcionan instrucciones paso a paso para crear aplicaciones React con Ignite UI for React

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

    yarn create react-app MyAppName --typescript

    Dependiendo del enfoque npx o yarn se requerirá. Consulte este sitio web para obtener más información sobre los comandos anteriores.

    cd MyAppName

    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: