Getting Started With Ignite UI for React

    This topic provides step-by-step instructions for creating React applications with Ignite UI for React

    Prerequisites

    1. Install NodeJS.
    2. Install Visual Studio Code.

    Creating New React Project

    With above prerequisites installed, we can create a new React application.

    1 - Open VS Code, select Terminal menu and then New Terminal option.

    2 - Type one of these commands in terminal window:

    npx create-react-app MyAppName --typescript 
    yarn create react-app MyAppName --typescript

    Depending on the approach npx or yarn will be required. Refer to this website for more information on above commands.

    cd MyAppName

    Updating Existing App

    If you want to use Ignite UI for React in an existing React CLI project (one that you have from before). We have you covered! All you have to do is execute these commands:

    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

    Or

    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

    This will automatically install packages for Ignite UI for React, along with all of their dependencies, font imports and styles references to the existing project.

    Importing Component Modules

    First we have to import the required modules of the components we want to use. We will go ahead and do this for the GeographicMap component.

    import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps'; import { IgrDataChartInteractivityModule } from 'igniteui-react-charts'; IgrGeographicMapModule.register(); IgrDataChartInteractivityModule.register();

    Using Components

    We are now ready to use the Ignite UI for React map component in our markup! Let's go ahead and define it:

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

    Running Application

    Finally, we can run our new application by using one of the following commands:

    npm run-script start

    After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use Ignite UI for React components in your project. The final result should show interactive map of the world: