Getting Started With Ignite UI for React

    The Ignite UI for React is a complete set of React components designed to enable developers to build the most modern, high-performance HTML5 & TypeScript apps for modern desktop browsers.

    Setting Up Computer

    Before you can run Ignite UI for React, there are 2 steps to get everything on your machine set up to run any React app, including Ignite UI for React, and to build React apps. To get started, you must install both NodeJS and Visual Studio Code on your machine. Modern web development with React requires NodeJS, it’s sort of like an ASP.NET app running in the browser and requires ASP.NET runtime deployed on the server. For development, there is nothing better than Visual Studio Code to build React apps. Getting started is easy, just download and install both Node.js and Visual Studio Code.

    Now that we have everything we need, we can create a new React application.
    Open VS Code, select Terminal menu, New Terminal option and type this command in terminal window:
    npx create-react-app my-app-name --typescript
    or
    yarn create react-app my-app-name --typescript
    Refer to this website for more information on above commands.

    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-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 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 } from 'igniteui-react-maps';
    import { 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
    render() {
        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 look something like this screenshot: