Primeros pasos con Ignite UI for React

    Este tema proporciona 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 React CLI existente (uno que tenga antes). ¡Lo 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 definamos:

    // 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, el proyecto se compilará y se servirá localmente en el equipo. Se abrirá automáticamente en su navegador predeterminado y podrá usar Ignite UI for React componentes en su proyecto. El resultado final debería mostrar un mapa interactivo del mundo: