React Inline Content Doc: Add Init. Info, Restructure, Links (#8876)

Author: arman-boyakhchyan

api-reference/10 UI Components/dxDropDownBox/1 Configuration/contentTemplate.md

@@ -5,7 +5,7 @@ default: 'content'
 ---
 ---
 ##### shortDescription
-Specifies a custom template for the drop-down content.
+Specifies a custom template for drop-down content.
 
 ##### param(templateData): Object
 Data associated with the UI component.
@@ -28,5 +28,30 @@ A template name or container.
 }
 
 #####See Also#####
+
+---
+
+##### jQuery
+
 - [DropDownBox - Getting Started](/concepts/05%20UI%20Components/DropDownBox/00%20Getting%20Started%20with%20DropDownBox '/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/')
-- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+
+##### Angular
+
+- [DropDownBox - Getting Started](/concepts/05%20UI%20Components/DropDownBox/00%20Getting%20Started%20with%20DropDownBox '/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/')
+- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+##### Vue
+
+- [DropDownBox - Getting Started](/concepts/05%20UI%20Components/DropDownBox/00%20Getting%20Started%20with%20DropDownBox '/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/')
+- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+##### React
+
+- [DropDownBox - Getting Started](/concepts/05%20UI%20Components/DropDownBox/00%20Getting%20Started%20with%20DropDownBox '/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/')
+- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+---

api-reference/10 UI Components/dxOverlay/1 Configuration/contentTemplate.md

@@ -20,5 +20,30 @@ A template name or container.
 }
 
 #####See Also#####
+
+---
+
+##### jQuery
+
 - [Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/{WidgetName}/Customize_the_Appearance/Customize_the_Content/')
-- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+
+##### Angular
+
+- [Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/{WidgetName}/Customize_the_Appearance/Customize_the_Content/')
+- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+##### Vue
+
+- [Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/{WidgetName}/Customize_the_Appearance/Customize_the_Content/')
+- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+##### React
+
+- [Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/{WidgetName}/Customize_the_Appearance/Customize_the_Content/')
+- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+---

api-reference/10 UI Components/dxToast/1 Configuration/contentTemplate.md

@@ -3,5 +3,30 @@
 
 ---
 #####See Also#####
+
+---
+
+##### jQuery
+
 - [Customize Toast Content](/Documentation/Guide/UI_Components/Toast/Getting_Started_with_Toast/#Customize_Toast_Content)
-- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+
+##### Angular
+
+- [Customize Toast Content](/Documentation/Guide/UI_Components/Toast/Getting_Started_with_Toast/#Customize_Toast_Content)
+- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+##### Vue
+
+- [Customize Toast Content](/Documentation/Guide/UI_Components/Toast/Getting_Started_with_Toast/#Customize_Toast_Content)
+- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+##### React
+
+- [Customize Toast Content](/Documentation/Guide/UI_Components/Toast/Getting_Started_with_Toast/#Customize_Toast_Content)
+- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+---

api-reference/10 UI Components/dxTooltip/1 Configuration/contentTemplate.md

@@ -7,5 +7,30 @@
 }
 
 #####See Also#####
+
+---
+
+##### jQuery
+
 - [Customize the Content](/concepts/05%20Widgets/Tooltip/10%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Tooltip/Customize_the_Content/')
-- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+
+##### Angular
+
+- [Customize the Content](/concepts/05%20Widgets/Tooltip/10%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Tooltip/Customize_the_Content/')
+- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+##### Vue
+
+- [Customize the Content](/concepts/05%20Widgets/Tooltip/10%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Tooltip/Customize_the_Content/')
+- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+##### React
+
+- [Customize the Content](/concepts/05%20Widgets/Tooltip/10%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Tooltip/Customize_the_Content/')
+- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
+- [Declare Content in the Markup](/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup)
+
+---

concepts/50 React Components/40 Component Configuration Syntax/45 Declare Content in the Markup.md

@@ -1,4 +1,4 @@
-The following UI components allow you to declare their content directly in the markup:
+The following UI components allow you to declare content directly in the markup (inline):
 
 - [Drawer](/api-reference/10%20UI%20Components/dxDrawer '/Documentation/ApiReference/UI_Components/dxDrawer/')
 - [DropDownBox](/api-reference/10%20UI%20Components/dxDropDownBox '/Documentation/ApiReference/UI_Components/dxDropDownBox/')
@@ -7,58 +7,46 @@ The following UI components allow you to declare their content directly in the m
 - [Popup](/api-reference/10%20UI%20Components/dxPopup '/Documentation/ApiReference/UI_Components/dxPopup/')
 - [Resizable](/api-reference/10%20UI%20Components/dxResizable '/Documentation/ApiReference/UI_Components/dxResizable/')
 - [ScrollView](/api-reference/10%20UI%20Components/dxScrollView '/Documentation/ApiReference/UI_Components/dxScrollView/')
+- [Toast](/Documentation/ApiReference/UI_Components/dxToast/)
 - [Tooltip](/api-reference/10%20UI%20Components/dxTooltip '/Documentation/ApiReference/UI_Components/dxTooltip/')
 - [ValidationGroup](/api-reference/10%20UI%20Components/dxValidationGroup '/Documentation/ApiReference/UI_Components/dxValidationGroup/')
 
-The following is an example with ScrollView:
+The following code snippet specifies inline ScrollView content:
 
-    <!-- tab: Function component -->
-    import ScrollView from 'devextreme-react/scroll-view';
+    <!-- tab: App.tsx -->
+    import { ScrollView } from 'devextreme-react/scroll-view';
 
-    export default function App() {
+    function App() {
         return (
             <ScrollView>
-                <div>Some scrollable content</div>
+                <div>ScrollView content</div>
             </ScrollView>
         );
     }
-    
-    <!-- tab: Class component -->
-    import ScrollView from 'devextreme-react/scroll-view';
 
-    class App extends React.Component {
-        render() {
-            return (
-                <ScrollView>
-                    <div>Some scrollable content</div>
-                </ScrollView>
-            );
-        }
-    }
+[note]
 
-[important]
+- To specify dynamic or conditionally rendered content, wrap this content in a static element as follows:
 
-These UI components do not support dynamically or conditionally rendered content in their root element. For example, the following code **does not work**:
+        <!-- tab: App.tsx -->
+        <Popup ... >
+            <div>
+                {
+                    someCondition && <div> ... </div>
+                }
+            </div>
+        </Popup>
 
-    <!-- tab: App.js -->
-    <Drawer ... >
-        {
-            someCondition && <div> ... </div>
-            // when the condition changes in runtime, the UI component may not render content correctly
-        }
-    </Drawer>
+    Note that [Fragment](https://react.dev/reference/react/Fragment) is a dynamic element. Wrap content with tags such as `<div>` or `<span>`.
 
-Wrap the content in a static element:
+- React mounts inline content within DevExtreme components immediately at component initialization. This behavior ignores **deferRendering** options in components that do not render content immediately:
 
-    <!-- tab: App.js -->
-    <Drawer ... >
-        <div>
-            {
-                someCondition && <div> ... </div>
-            }
-        </div>
-    </Drawer>
+    - DropDownBox
+    - Popup
+    - Popover
+    - Toast
+    - Tooltip
 
-Note that `React.Fragment` is a dynamically rendered element and doesn't fit in this case. Use static elements such as `div` or `span` instead.
+    This behavior initializes and renders embedded UI components at parent component initialization. To ensure embedded components are initialized and rendered only when the parent component is rendered or opened, define **contentComponent** or **contentRender**.
 
-[/important]
+[/note]