Skip to content

Commit 8037541

Browse files
vladaskorohodovavladaskorohodova
authored
Update the First Steps topic (DevExpress#7990)
1 parent 00c9829 commit 8037541

File tree

11 files changed

+91
-53
lines changed

11 files changed

+91
-53
lines changed

‎concepts/Common/First Steps/00 First Steps.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
##### Angular
33

4-
[important] You should be familiar with basic concepts and patterns of {Framework} to use DevExtreme components. If you are not, refer to the <a href="https://angular.dev/overview" target="_blank">{Framework} documentation</a> to follow its getting-started tutorial first.
4+
[note] You should be familiar with the basic concepts and patterns of {Framework} to use DevExtreme components. If you are not, refer to the <a href="https://angular.dev/overview" target="_blank">{Framework} documentation</a> and follow the getting-started tutorial first.
55

66
##### Vue
77

8-
[important] You should be familiar with basic concepts and patterns of {Framework} to use DevExtreme components. If you are not, refer to the <a href="https://vuejs.org/guide/introduction.html#getting-started" target="_blank">{Framework} documentation</a> to follow its getting-started tutorial first.
8+
[note] You should be familiar with the basic concepts and patterns of {Framework} to use DevExtreme components. If you are not, refer to the <a href="https://vuejs.org/guide/introduction.html#getting-started" target="_blank">{Framework} documentation</a> and follow the getting-started tutorial first.
99

1010
##### React
1111

12-
[important] You should be familiar with basic concepts and patterns of {Framework} to use DevExtreme components. If you are not, refer to the <a href="https://react.dev/learn" target="_blank">{Framework} documentation</a> to follow its getting-started tutorial first.
12+
[note] You should be familiar with the basic concepts and patterns of {Framework} to use DevExtreme components. If you are not, refer to the <a href="https://react.dev/learn" target="_blank">{Framework} documentation</a> and follow the getting-started tutorial first.
1313

1414
---
1515

‎concepts/Common/First Steps/05 Setup Your Project.md‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
##### jQuery
33

4-
First, create an empty web application. Then add jQuery and DevExtreme source files to the `<head>`:
4+
Create an empty web application. Then add jQuery and DevExtreme source files to the `<head>`:
55

66
<!-- tab: index.html -->
77
<head>
@@ -13,32 +13,45 @@ For complete installation instructions, refer to the following help topic: [Add
1313

1414
##### Angular
1515

16-
First, create an empty Angular application (see [Angular Documentation: Set up a new project locally](https://angular.dev/installation#set-up-a-new-project-locally)). Then, in the project file directory, run the following [DevExtreme CLI](/concepts/Common/DevExtreme%20CLI/00%20DevExtreme%20CLI.md '/Documentation/Guide/Common/DevExtreme_CLI/') command to add DevExtreme to your app:
16+
Create an empty Angular application (see [Angular Documentation: Set up a new project locally](https://angular.dev/installation#set-up-a-new-project-locally)). Run the following commands:
17+
18+
npm install -g @angular/cli
19+
ng new first-steps-project
20+
21+
Then, in the project file directory, run the following [DevExtreme CLI](/concepts/Common/DevExtreme%20CLI/00%20DevExtreme%20CLI.md '/Documentation/Guide/Common/DevExtreme_CLI/') command to add DevExtreme to your app:
1722

1823
npx -p devextreme-cli devextreme add devextreme-angular
1924

2025
For complete installation instructions, refer to the following help topic: [Add DevExtreme to an Angular CLI Application](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/').
2126

22-
[note] For a quick start, try [DevExtreme Application Template](/concepts/40%20Angular%20Components/30%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/Angular_Components/Application_Template/'). This template includes a navigation menu and several sample views in a responsive layout.
27+
[note] To start with an application that contains predefined components, try CLI-based [DevExtreme Application Template](/concepts/40%20Angular%20Components/30%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/Angular_Components/Application_Template/'). This template includes a navigation menu and several sample views in a responsive layout.
2328

2429
##### Vue
2530

26-
First, create an empty Vue JavaScript application (see [Vue Documentation: Creating a Vue Application](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)). Then, in the project file directory, run the following [DevExtreme CLI](/concepts/Common/DevExtreme%20CLI/00%20DevExtreme%20CLI.md '/Documentation/Guide/Common/DevExtreme_CLI/') command to add DevExtreme to your app:
31+
Create an empty Vue JavaScript application (see [Vue Documentation: Creating a Vue Application](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)). Run the following command:
32+
33+
npm create vue@latest
34+
35+
Then, in the project file directory, run the following [DevExtreme CLI](/concepts/Common/DevExtreme%20CLI/00%20DevExtreme%20CLI.md '/Documentation/Guide/Common/DevExtreme_CLI/') command to add DevExtreme to your app:
2736

2837
npx -p devextreme-cli devextreme add devextreme-vue
2938

3039
For complete installation instructions, refer to the following help topic: [Add DevExtreme to a Vue Application](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/00%20Add%20DevExtreme%20to%20a%20Vue%20Application.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/').
3140

32-
[note] For a quick start, try [DevExtreme Application Template](/concepts/55%20Vue%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/Vue_Components/Application_Template/'). This template includes a navigation menu and several sample views in a responsive layout.
41+
[note] To start with an application that contains predefined components, try CLI-based [DevExtreme Application Template](/concepts/55%20Vue%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/Vue_Components/Application_Template/'). This template includes a navigation menu and several sample views in a responsive layout.
3342

3443
##### React
3544

36-
First, create an empty React JavaScript application (see [React Documentation: Build a React app from Scratch](https://react.dev/learn/build-a-react-app-from-scratch#vite)). Then, in the project file directory, run the following [DevExtreme CLI](/concepts/Common/DevExtreme%20CLI/00%20DevExtreme%20CLI.md '/Documentation/Guide/Common/DevExtreme_CLI/') command to add DevExtreme to your app:
45+
Create an empty React JavaScript application (see [React Documentation: Build a React app from Scratch](https://react.dev/learn/build-a-react-app-from-scratch#vite)). For instance, to create an application with [Vite](https://vite.dev/), run the following command:
46+
47+
npm create vite@latest my-app -- --template react
48+
49+
Then, in the project file directory, run the following [DevExtreme CLI](/concepts/Common/DevExtreme%20CLI/00%20DevExtreme%20CLI.md '/Documentation/Guide/Common/DevExtreme_CLI/') command to add DevExtreme to your app:
3750

3851
npx -p devextreme-cli devextreme add devextreme-react
3952

4053
For complete installation instructions, refer to the following help topic: [Add DevExtreme to a React Application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/').
4154

42-
[note] For a quick start, try [DevExtreme Application Template](/concepts/50%20React%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/React_Components/Application_Template/'). This template includes a navigation menu and several sample views in a responsive layout.
55+
[note] To start with an application that contains predefined components, try CLI-based [DevExtreme Application Template](/concepts/50%20React%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/React_Components/Application_Template/'). This template includes a navigation menu and several sample views in a responsive layout.
4356

4457
---

‎concepts/Common/First Steps/07 Style the App.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@ To apply a theme, import a stylesheet where DevExtreme components are used or in
5656

5757
---
5858

59-
If you want to apply theme colors and typography settings to all page elements (and not only to DevExtreme UI components), add a `dx-viewport` class to the `<body>` tag of your application's index.html file.
59+
If you want to apply theme colors and typography settings to all page elements (and not only to DevExtreme UI components), add a `dx-viewport` class to the `<body>` tag of your application's `index.html` file.
6060

61-
To configure component styles manually, use CSS:
61+
To configure component styles manually, create an `index.css` file and import it alongside the DevExtreme theme CSS file:
6262

6363
<!-- tab: index.css -->
6464
#dashboard {

‎concepts/Common/First Steps/10 Specify the Page Layout.md‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ Next, specify the component layout in the HTML file:
99
<div id="task-grid"></div>
1010
</div>
1111

12+
The `dashboard` is the container for two components: ProgressBar and DataGrid.
13+
1214
##### Angular
1315

14-
Next, import components into `app.component.ts`. For detailed instructions on imports, refer to the [Import DevExtreme Components](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application/40%20Import%20DevExtreme%20Components.md '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/#Import_DevExtreme_Components') help topic.
16+
Next, import components into `app.component.ts`:
1517

1618
<!-- tab: app.component.ts -->
1719
import { Component } from '@angular/core';
@@ -35,9 +37,13 @@ Specify the component layout in the HTML file:
3537
<dx-data-grid id="task-grid"></dx-data-grid>
3638
</div>
3739

40+
The `dashboard` is the container for two components: ProgressBar and DataGrid.
41+
42+
For detailed instructions on imports, refer to the [Import DevExtreme Components](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application/40%20Import%20DevExtreme%20Components.md '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/#Import_DevExtreme_Components') help topic.
43+
3844
##### Vue
3945

40-
Next, import components and specify their layout. For detailed instructions on imports, refer to the [Import DevExtreme Components](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/60%20Import%20DevExtreme%20Components.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/#Import_DevExtreme_Components') help topic.
46+
Next, import components and specify their layout:
4147

4248
<!-- tab: App.vue -->
4349
<template>
@@ -51,9 +57,13 @@ Next, import components and specify their layout. For detailed instructions on i
5157
import DxDataGrid from 'devextreme-vue/data-grid';
5258
</script>
5359

60+
The `dashboard` is the container for two components: ProgressBar and DataGrid.
61+
62+
For detailed instructions on imports, refer to the [Import DevExtreme Components](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/60%20Import%20DevExtreme%20Components.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/#Import_DevExtreme_Components') help topic.
63+
5464
##### React
5565

56-
Next, import components and specify their layout. For detailed instructions on imports, refer to the [Import DevExtreme Components](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/60%20Import%20DevExtreme%20Components.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/#Import_DevExtreme_Components') help topic.
66+
Next, import components and specify their layout:
5767

5868
<!-- tab: App.tsx -->
5969
import DataGrid from 'devextreme-react/data-grid';
@@ -70,4 +80,8 @@ Next, import components and specify their layout. For detailed instructions on i
7080

7181
export default App;
7282

83+
The `dashboard` is the container for two components: ProgressBar and DataGrid.
84+
85+
For detailed instructions on imports, refer to the [Import DevExtreme Components](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/60%20Import%20DevExtreme%20Components.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/#Import_DevExtreme_Components') help topic.
86+
7387
---

‎concepts/Common/First Steps/15 Configure DataGrid/05 Bind DataGrid to Data.md‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,11 @@ The DataGrid component can [load and update data](/concepts/05%20UI%20Components
3535

3636
2. Assign the array to the [dataSource](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/dataSource.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataSource') property.
3737
3. Specify [keyExpr](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/keyExpr.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#keyExpr') (`id` in this case).
38-
4. Use the nested `dxi-data-grid-column` component to define [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') you want to display.
38+
4. Use the nested `dxi-data-grid-column` configuration component to define [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') you want to display.
3939

4040
<!-- tab: app.component.html -->
41-
<dx-data-grid ...
41+
<dx-data-grid
42+
id="task-grid"
4243
[dataSource]="tasks"
4344
keyExpr="id"
4445
>
@@ -61,7 +62,7 @@ The DataGrid component can [load and update data](/concepts/05%20UI%20Components
6162
})
6263
export class AppComponent { ... }
6364

64-
For more information about the nested components, refer to the following help topics:
65+
For more information about the nested configuration components, refer to the following help topics:
6566

6667
- [Collections](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/17%20Collections.md 'Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Collections')
6768
- [Properties of the Object Type](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/14%20Properties%20of%20the%20Object%20Type.md '/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Properties_of_the_Object_Type')
@@ -72,25 +73,20 @@ For more information about the nested components, refer to the following help to
7273
1. Create the `tasks` array.
7374
2. Assign the array to the [dataSource](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/dataSource.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataSource') property.
7475
3. Specify [keyExpr](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/keyExpr.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#keyExpr') (`id` in this case).
75-
4. Use the nested `DxColumn` component to define [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') you want to display. Remember to import the necessary nested components.
76+
4. Use the nested `DxColumn` configuration component to define [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') you want to display. Remember to import the necessary configuration components.
7677

7778
<!-- tab: App.vue -->
7879
<template>
7980
<div id="dashboard">
8081
<DxProgressBar id="progress" />
81-
<DxDataGrid ...
82+
<DxDataGrid
83+
id="task-grid"
8284
:data-source="tasks"
8385
key-expr="id"
8486
>
85-
<DxColumn
86-
data-field="task"
87-
/>
88-
<DxColumn
89-
data-field="dueDate"
90-
/>
91-
<DxColumn
92-
data-field="done"
93-
/>
87+
<DxColumn data-field="task" />
88+
<DxColumn data-field="dueDate" />
89+
<DxColumn data-field="done" />
9490
</DxDataGrid>
9591
</div>
9692
</template>
@@ -103,7 +99,7 @@ For more information about the nested components, refer to the following help to
10399
];
104100
</script>
105101

106-
For more information about the nested components, refer to the following help topics:
102+
For more information about the nested configuration components, refer to the following help topics:
107103

108104
- [Collections](/concepts/55%20Vue%20Components/20%20Component%20Configuration%20Syntax/17%20Collections.md '/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Collections')
109105
- [Properties of the Object Type](/concepts/55%20Vue%20Components/20%20Component%20Configuration%20Syntax/14%20Properties%20of%20the%20Object%20Type.md '/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Properties_of_the_Object_Type')
@@ -113,7 +109,7 @@ For more information about the nested components, refer to the following help to
113109
1. Create the `tasks` array.
114110
2. Assign the array to the [dataSource](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/dataSource.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataSource') property.
115111
3. Specify [keyExpr](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/keyExpr.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#keyExpr') (`id` in this case).
116-
4. Use the nested `Column` component to define [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') you want to display. Remember to import the necessary nested components.
112+
4. Use the nested `Column` configuration component to define [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') you want to display. Remember to import the necessary configuration components.
117113

118114
<!-- tab: App.tsx -->
119115
import DataGrid, { Column } from 'devextreme-react/data-grid';
@@ -127,27 +123,22 @@ For more information about the nested components, refer to the following help to
127123
return(
128124
<div id="dashboard">
129125
<ProgressBar id="progress" />
130-
<DataGrid ...
126+
<DataGrid
127+
id="task-grid"
131128
dataSource={tasks}
132129
keyExpr="id"
133130
>
134-
<Column
135-
dataField="task"
136-
/>
137-
<Column
138-
dataField="dueDate"
139-
/>
140-
<Column
141-
dataField="done"
142-
/>
131+
<Column dataField="task" />
132+
<Column dataField="dueDate" />
133+
<Column dataField="done" />
143134
</DataGrid>
144135
</div>
145136
);
146137
}
147138

148139
export default App;
149140

150-
For more information about the nested components, refer to the following help topics:
141+
For more information about the nested configuration components, refer to the following help topics:
151142

152143
- [Collections](/concepts/50%20React%20Components/40%20Component%20Configuration%20Syntax/20%20Collections.md '/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Collections')
153144
- [Properties of the Object Type](/concepts/50%20React%20Components/40%20Component%20Configuration%20Syntax/12%20Properties%20of%20the%20Object%20Type.md '/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Properties_of_the_Object_Type')

0 commit comments

Comments
 (0)