Ignite UI for React 시작하기

    Ignite UI for React is a complete set of UI widgets, components, and Sketch UI kits for React by Infragistics. It enables developers to build modern, high-performance HTML5 and JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWAs).

    Ignite UI for React comprises several packages available under either an MIT or a commercial license, depending on the components and services they contain. For a detailed list of components and their license, please refer to the License FAQ and Installation and Open Source vs Premium topics.

    Prerequisites

    1. NodeJS를 설치합니다.
    2. 비주얼 스튜디오 코드를 설치합니다.

    Using Ignite UI CLI

    To create an application from scratch and configure it to use Ignite UI React you can use the Ignite UI CLI. The first step is to install the respective package globally as follows:

    npm install -g igniteui-cli

    If you want to get a guided experience through the available options, you can initialize the step-by-step mode that will help you create and set up your new application. To start the guide, simply run the ig command:

    ig

    Then choose React as the framework and Ignite UI for React TS as the project type. Select the Default Top Navigation project template, add a specific component/view, or select Complete & Run. For more information about the Ignite UI CLI, see the CLI overview.

    If you added a Grid component during the prompts, once the application is running you should see something similar to the following:

    [!NOTE] Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under commercial license.

    Alternatively, you can use popular frameworks such as Next.js, Vite, or Expo as recommended by the React team. The following are step-by-step instructions for creating React applications with Ignite UI for React using one of these methods.

    Using Vite CLI

    Creating a New React Project

    All popular frameworks for React development provide powerful CLI tools for scaffolding a React application.

    1 -VS Code를 열고 터미널 메뉴를 선택한 다음 새 터미널 옵션을 선택합니다.

    2 - Type the following command in the terminal window:

    npm create vite@latest

    Then follow the prompts to choose a name for the project, React as the framework, whether to use TypeScript, and various other options provided by Vite. Please refer to this topic for more information on the different ways to boilerplate a React application.

    Adding an Ignite UI React Grid Component

    Package Installation

    To add the Ignite UI React Grid component to the app you need to install the igniteui-react-grids package:

    npm install igniteui-react-grids --save

    Importing Component Modules

    Then we can import the required modules of the components we want to use. Let's do this for the Grid and Column components that we will also use in the template. We also need to import one of the themes.

    import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';

    Using Components

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

    // App.txs
function App() {
  const data = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Bob", age: 35 }
  ];

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGrid
        data={data}
        autoGenerate={false}>
        <IgrColumn
          field="name"
          header="Name"
          dataType="string">
        </IgrColumn>
        <IgrColumn
          field="age"
          header="Age"
          dataType="number">
        </IgrColumn>
      </IgrGrid>
    </div>
  );
}

    Running Application

    Finally, we can run our new application:

    npm run dev

    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 a data grid with sample data:

    Updating Existing Apps

    If you want to use Ignite UI for React in an existing React CLI project, 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

    또는

    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

    이렇게 하면 기존 프로젝트에 대한 Ignite UI for React 패키지와 모든 종속성, 글꼴 가져오기 및 스타일 참조가 자동으로 설치됩니다.

    Ignite UI for React 패키지 개요

    Ignite UI for React는 React를 위한 포괄적인 UI 구성 요소, 디자인 툴킷 및 지원 서비스 제품군입니다. 개발자가 데스크톱 브라우저, 모바일 경험 및 프로그레시브 웹 앱(PWA)을 위한 최신 고성능 React 애플리케이션을 만들 수 있도록 구축된 Ignite UI for React는 최신 React 모범 사례와 API를 활용합니다.

    Charts & Graphs

    Ignite UI for React contains a library of Charts & Graphs that lets you visualize any type of data through its 65+ types of chart series and combinations to create stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device.

    게이지

    Ignite UI for React provides Radial Gauge, Linear Gauge, and Bullet Graph components used to illustrate data in an easy and intuitive way. The Radial Gauge has a variety of customization options in order to create a predefined shape and scale. The Linear Gauge provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The Bullet Graph component lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts.

    지도

    The Ignite UI for React Geographic Map component brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors.

    Grids & Inputs

    Ignite UI for React provides several Grid components that allow you to bind and display data with little configuration in the form of Grid Lite - a light-weight grid component under MIT license, Data Grid - a feature-rich grid component under commercial license, List, Tree, and even Spreadsheet.

    Buttons, Inputs, Layouts, and Menus

    Ignite UI for React provides various types of Buttons, Inputs, Menus, and Layouts that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the Storybook here. These components are based on the Indigo Design System, are fully supported by App Builder and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.