You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Getting Started | {ProductName} | Infragistics
3
3
_description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts.
4
4
_keywords: {ProductName}, Infragistics, Getting Started
5
-
mentionedTypes: ["XamBulletGraph"]
5
+
mentionedTypes: ["XamBulletGraph", "IgrGrid"]
6
6
---
7
7
8
-
<!-- WebComponents -->
9
-
# {ProductName} Packages Overview
8
+
<!-- React -->
10
9
11
-
{ProductName} is a complete set of UI widgets, components, UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting the browsers web components APIs.
10
+
# Getting Started With {ProductName}
12
11
13
-
<!-- end: WebComponents -->
12
+
## Prerequisites
14
13
15
-
<!-- React -->
16
-
## {ProductName} Packages Overview
14
+
1. Install NodeJS.
15
+
2. Install Visual Studio Code.
17
16
18
-
{ProductName} is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), {ProductName} leverages the latest React best practices and APIs.
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:
23
39
24
-
## Charts & Graphs
25
-
{ProductName} contains a library of [Charts & Graphs](charts/chart-overview.md) that lets you visualize any type of data through its 65+ types of chart series and combinations into 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.
40
+
```cmd
41
+
npm install -g igniteui-cli
42
+
```
26
43
27
-
## Gauges
28
-
{ProductName} provides [Radial Gauge](radial-gauge.md), [Linear Gauge](linear-gauge.md), and [Bullet Graph](bullet-graph.md) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](radial-gauge.md) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](linear-gauge.md) 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](bullet-graph.md) component that lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts.
44
+
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 setup your new application. To start the guide, simply run the `ig` command:
29
45
30
-
## Maps
31
-
{ProductName} [Geographic Maps](geo-map.md) 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.
46
+
```cmd
47
+
ig
48
+
```
32
49
33
-
## Grids & Inputs
34
-
{ProductName} provides several [Grids](grids/grids-header.md) components that allows you to bind and display data with little configuration in form of [Data Grid](grids/data-grid.md), [List](grids/list.md), [Tree](grids/tree.md), and even [Spreadsheet](spreadsheet-overview.md). It also provides features such as filtering, sorting, grouping, pinning and more.
50
+
Then choose `React` as framework, `Ignite UI for React TS` as type, select `Default Top Navigation` project template, add a specific component/view or select `Complete & Run`.
51
+
For more information about the Ignite UI CLI, see the [CLI overview](general-cli-overview.md).
35
52
36
-
## Buttons, Inputs, Layouts & Menus
37
-
{ProductName} provides various types of [Buttons](inputs/button.md), [Inputs](inputs/input.md), [Menus](menus/navbar.md), and [Layouts](layouts/tabs.md) 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](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.
53
+
If you added a Grid component during the prompts, once the application is running you should see something similar to the following:
38
54
39
-
<!-- end: WebComponents, React -->
55
+
<imgsrc="../images/general/ig-cli-grid.png" />
40
56
41
-
<!--React -->
57
+
Alternatively, you can use popular frameworks such as Next.js, Vite or Expo as recommended by the React team. Following is a step-by-step instructions for creating React applications with Ignite UI React using one of these methods.
42
58
43
-
## Getting Started With {ProductName}
59
+
## Using Vite CLI
44
60
45
-
## Install IgniteUI CLI
61
+
### Creating a New React Project
62
+
63
+
All popular frameworks for React development provide powerful CLI tools for scaffolding a React application.
64
+
65
+
1 - Open **VS Code**, select **Terminal** menu and then **New Terminal** option.
46
66
47
-
To create an application from scratch and configure it to use the Ignite UI React you can use the Ignite UI CLI. The first step is to install the respective package globally as follows:
67
+
2 - Type the following command in the terminal window:
48
68
49
69
```cmd
50
-
npm install -g igniteui-cli
70
+
npm create vite@latest
51
71
```
52
72
53
-
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 setup your new application. To start the guide, simply run the `ig` command:
73
+
Then follow the prompts to choose a name for the project, React as a platform to create the project for, whether to use Typescript or not and for various other options Vite provides. Please, refer to this <ahref="https://react.dev/learn/creating-a-react-app"target="_blank">topic</a> for more information on the different ways to boilerplate a React application.
74
+
75
+
### Adding an Ignite UI React Grid Component
76
+
77
+
##### Package Installation
78
+
To add the Ignite UI React [**Grid**](grids/data-grid.md) component to the app you need to install the `igniteui-react-grids` package:
54
79
55
80
```cmd
56
-
ig
81
+
npm install igniteui-react-grids --save
57
82
```
58
83
59
-
Then choose React as framework, React TS as type, select **Default Top Navigation** project template, add a specific component/view or select `Complete & Run`.
60
-
Additionally, you can read more about the Ignite UI CLI in this [topic](general-cli-overview.md).
84
+
#### Importing Component Modules
61
85
62
-
Alternatively, you can use popular frameworks such as Next.js, Vite or Expo as recommended by the React team. Following is a step-by-step instructions for creating React applications with Ignite UI React using one of these methods.
86
+
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.
We are now ready to use the {ProductName} grid component in our markup! Let's go ahead and define it:
87
97
88
-
## Creating New React Project
98
+
```tsx
99
+
// App.txs
100
+
function App() {
101
+
const data = [
102
+
{ name: "John", age: 30 },
103
+
{ name: "Jane", age: 25 },
104
+
{ name: "Bob", age: 35 }
105
+
];
89
106
90
-
With above prerequisites installed, we can create a new React application.
107
+
return (
108
+
<divstyle={{ height: "100%", width: "100%" }}>
109
+
<IgrGrid
110
+
data={data}
111
+
autoGenerate={false}>
112
+
<IgrColumn
113
+
field="name"
114
+
header="Name"
115
+
dataType="string">
116
+
</IgrColumn>
117
+
<IgrColumn
118
+
field="age"
119
+
header="Age"
120
+
dataType="number">
121
+
</IgrColumn>
122
+
</IgrGrid>
123
+
</div>
124
+
);
125
+
}
126
+
```
91
127
92
-
1 - Open **VS Code**, select **Terminal** menu and then **New Terminal** option.
128
+
### Running Application
93
129
94
-
2 - Type one of these commands in terminal window:
130
+
Finally, we can run our new application:
95
131
96
132
```cmd
97
-
npx create-next-app@latest
133
+
npm run dev
98
134
```
99
135
100
-
Then follow the prompts to choose a name for the project, whether to use Typescript or not and for various other options React provides. For this example `npx` and `create-next-app` are required. Refer to this <ahref="https://react.dev/learn/creating-a-react-app"target="_blank">topic</a> for more information on the different ways to boilerplate a React application.
136
+
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 {ProductName} components in your project. The final result should show a data grid with sample data:
137
+
138
+
<imgsrc="../images/general/ig-vite-grid.png" />
101
139
102
140
<!-- end: React -->
103
141
104
142
<!-- WebComponents -->
105
-
##Getting Started With {ProductName}
143
+
# Getting Started With {ProductName}
106
144
107
145
This section provides step-by-step instructions for creating Web Components application with Ignite UI for Web Components.
108
146
@@ -346,7 +384,7 @@ npm run build
346
384
347
385
<!-- Angular, React -->
348
386
349
-
## Updating Existing App
387
+
## Updating Existing Apps
350
388
351
389
If you want to use {ProductName} in an existing {Platform} CLI project (one that you have from before). We have you covered! All you have to do is execute these commands:
This will automatically install packages for {ProductName}, along with all of their dependencies, font imports and styles references to the existing project.
375
413
376
-
## Importing Component Modules
377
-
378
-
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**](geo-map.md) component.
{ProductName} is a complete set of UI widgets, components, UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting the browsers web components APIs.
407
420
408
-
## Using Components
421
+
<!-- end: WebComponents -->
409
422
410
-
We are now ready to use the {ProductName} map component in our markup! Let's go ahead and define it:
423
+
<!-- React -->
424
+
# {ProductName} Packages Overview
411
425
412
-
```tsx
413
-
// App.txs
414
-
function App() {
415
-
return (
416
-
<divstyle={{ height: "100%", width: "100%" }}>
417
-
<IgrGeographicMap
418
-
width="800px"
419
-
height="500px"
420
-
zoomable="true" />
421
-
</div>
422
-
);
423
-
}
424
-
```
426
+
{ProductName} is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), {ProductName} leverages the latest React best practices and APIs.
425
427
426
-
```html
427
-
<divstyle="height: 100%, width: 100%">
428
-
<igc-geographic-map
429
-
width="800px"
430
-
height="500px"
431
-
zoomable="true">
432
-
</igc-geographic-map>
433
-
</div>
434
-
```
428
+
<!-- end: React -->
435
429
436
-
## Running Application
430
+
<!-- WebComponents, React -->
437
431
438
-
Finally, we can run our new application by using one of the following commands:
432
+
## Charts & Graphs
433
+
{ProductName} contains a library of [Charts & Graphs](charts/chart-overview.md) that lets you visualize any type of data through its 65+ types of chart series and combinations into 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.
439
434
440
-
```cmd
441
-
npm run-script start
442
-
```
435
+
## Gauges
436
+
{ProductName} provides [Radial Gauge](radial-gauge.md), [Linear Gauge](linear-gauge.md), and [Bullet Graph](bullet-graph.md) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](radial-gauge.md) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](linear-gauge.md) 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](bullet-graph.md) component that lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts.
443
437
444
-
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 {ProductName} components in your project. The final result should show interactive map of the world:
438
+
## Maps
439
+
{ProductName} [Geographic Maps](geo-map.md) 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.
{ProductName} provides several [Grids](grids/grids-header.md) components that allows you to bind and display data with little configuration in form of [Data Grid](grids/data-grid.md), [List](grids/list.md), [Tree](grids/tree.md), and even [Spreadsheet](spreadsheet-overview.md). It also provides features such as filtering, sorting, grouping, pinning and more.
{ProductName} provides various types of [Buttons](inputs/button.md), [Inputs](inputs/input.md), [Menus](menus/navbar.md), and [Layouts](layouts/tabs.md) 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](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.
0 commit comments