React: update TypeScript support article

concepts/50 React Components/70 TypeScript Support/00 TypeScript Support.md

@@ -3,56 +3,39 @@ DevExtreme React components are supplied with TypeScript declarations. Strict ty
 The following code shows an example of using TypeScript with DevExtreme components:
 
     <!-- tab: App.tsx -->
-    import React from 'react';
+    import React, { useState } from 'react';
     import List from 'devextreme-react/list';
-
     import 'devextreme/dist/css/dx.light.css';
 
     interface IListItemProps {
         text: string;
     }
 
-    interface IComponentState {
-        counter: number;
-    }
-
     const items: IListItemProps[] = [
         { text: "Item 1" },
         { text: "Item 2" },
         { text: "Item 3" }
     ];
 
-    class Item extends React.Component<IListItemProps, IComponentState> {
-        constructor(props: IListItemProps) {
-            super(props);
-            this.state = {
-                counter: 0
-            };
-            this.addCounter = this.addCounter.bind(this);
-        }
-
-        public render() {
-            return (
-                <div onClick={this.addCounter}>
-                    {this.props.data.text} was clicked {this.state.counter} times
-                </div>
-            );
-        }
-
-        private addCounter() {
-            this.setState({
-                counter: this.state.counter + 1
-            });
-        }
-    }
-
-    class App extends React.Component {
-        render() {
-            return (
-                <List items={items} itemComponent={Item} />
-            );
-        }
-    }
+    const Item: React.FC<IListItemProps> = (props) => {
+        const [counter, setCounter] = useState<number>(0);
+
+        const addCounter = () => {
+            setCounter(counter + 1);
+        };
+
+        return (
+            <div onClick={addCounter}>
+            {props.text} was clicked {counter} times
+            </div>
+        );
+    };
+
+    const App: React.FC = () => {
+        return (
+            <List items={items} itemRender={(props: any) => <Item {...props.data} />} />
+        );
+    };
 
     export default App;
 

concepts/50 React Components/70 TypeScript Support/05 Component-Specific Types.md

@@ -1,9 +1,9 @@
-To import component-specific types, use the `ComponentTypes` declaration where `Component` is the component name:
+To get component-specific types, import the `ComponentTypes` declaration where `Component` is the component name:
 
     <!-- tab: App.tsx -->
-    import DateBox, { DateBoxTypes } from "devextreme-react/date-box";
+    import DateBox, { DateBoxTypes } from 'devextreme-react/date-box';
 
-    const dateType: DateBoxTypes.DateType = "datetime";
+    const dateType: DateBoxTypes.DateType = 'datetime';
 
     function App() {
         return (
@@ -12,4 +12,20 @@ To import component-specific types, use the `ComponentTypes` declaration where `
     }
     </script>
 
-You can also [import component-specific types](/concepts/Common/Modularity/02%20DevExtreme%20Modules%20Structure '/Documentation/Guide/Common/Modularity/DevExtreme_Modules_Structure/') from the `devextreme/ui` package.
+If you need the same type for multiple components, you can also import this type from `common` submodule:
+
+    <!-- tab: App.tsx -->
+    // In the sample below, ValidationRule is imported for each component:
+
+    import { DataGridTypes } from 'devextreme-react/data-grid';
+    import { FormTypes } from 'devextreme-react/form';
+
+    const dataGridValidationRule: DataGridTypes.ValidationRule;
+    const formValidationRule: FormTypes.ValidationRule;
+
+    // In the sample below, ValidationRule is imported from the common submodule:
+
+    import { ValidationRule } from 'devextreme-react/common';
+
+    const dataGridValidationRule: ValidationRule;
+    const formValidationRule: ValidationRule;