diff --git a/.github/workflows/demos_visual_tests.yml b/.github/workflows/demos_visual_tests.yml
index 70cb7177b94f..9d7d7ee550b3 100644
--- a/.github/workflows/demos_visual_tests.yml
+++ b/.github/workflows/demos_visual_tests.yml
@@ -416,19 +416,23 @@ jobs:
           pnpm run lint-demos
         fi
 
-  check-generated-demos:
-    name: Check generated demos
+  check-generated-demos-changed:
+    name: Check generated demos (changed only)
     runs-on: devextreme-shr2
     timeout-minutes: 10
     needs: [check-should-run, get-changes, build-devextreme, determine-framework-tests-scope]
-    if: needs.check-should-run.outputs.should-run == 'true' && needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none'
+    if: |
+      always() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      needs.determine-framework-tests-scope.result == 'success' &&
+      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'changed' &&
+      needs.build-devextreme.result == 'success'
 
     steps:
     - name: Get sources
       uses: actions/checkout@v4
 
-    - name: Download artifacts
-      if: github.event_name == 'pull_request'
+    - name: Download changed demos
       uses: actions/download-artifact@v4
       with:
         name: changed-demos
@@ -506,6 +510,82 @@ jobs:
           exit 1
         fi
 
+  check-generated-demos-all:
+    name: Check generated demos (${{ matrix.CONSTEL }})
+    runs-on: devextreme-shr2
+    timeout-minutes: 15
+    needs: [check-should-run, build-devextreme, determine-framework-tests-scope]
+    if: |
+      always() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      needs.determine-framework-tests-scope.result == 'success' &&
+      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'all' &&
+      needs.build-devextreme.result == 'success'
+    strategy:
+      fail-fast: false
+      matrix:
+        CONSTEL: ['1/5', '2/5', '3/5', '4/5', '5/5']
+
+    steps:
+    - name: Get sources
+      uses: actions/checkout@v4
+
+    - uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Download devextreme sources
+      uses: actions/download-artifact@v4
+      with:
+        name: devextreme-sources
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Install tgz
+      working-directory: apps/demos
+      run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz
+
+    - name: Prepare JS
+      working-directory: apps/demos
+      run: pnpm run prepare-js
+
+    - name: Check generated JS demos
+      working-directory: apps/demos
+      env:
+        CONSTEL: ${{ matrix.CONSTEL }}
+      run: |
+        echo "Running convert-to-js for split $CONSTEL"
+        pnpm run convert-to-js
+
+        git add ./Demos -N
+
+        if git diff --exit-code . ':!package.json' ; then
+          echo "Generated JS demos are up-to-date for split $CONSTEL"
+        else
+          echo "Generated JS demos are outdated for split $CONSTEL. Execute 'pnpm run convert-to-js split' and commit changes."
+          echo "If you see another diff, ensure that extra listed files have LF endings."
+          exit 1
+        fi
+
   testcafe-jquery:
     needs: [check-should-run, build-devextreme]
     if: |
diff --git a/apps/demos/Demos/Charts/AreaSparklines/React/App.tsx b/apps/demos/Demos/Charts/AreaSparklines/React/App.tsx
index 73614bb9cb75..5d275f9d8908 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/React/App.tsx
+++ b/apps/demos/Demos/Charts/AreaSparklines/React/App.tsx
@@ -5,7 +5,7 @@ const years = ['2010', '2011', '2012'];
 
 function App() {
   return (
-    <React.Fragment>
+    <>
       <div className="long-title"><h3>Monthly Prices of Copper, Nickel and Palladium</h3></div>
       <div id="chart-demo">
         <table className="demo-table" style={{ border: 1 }}>
@@ -22,7 +22,7 @@ function App() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/AreaSparklines/ReactJs/App.js b/apps/demos/Demos/Charts/AreaSparklines/ReactJs/App.js
index 4b937e69f36a..4056fe5381a0 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/AreaSparklines/ReactJs/App.js
@@ -4,7 +4,7 @@ import RowTemplate from './RowTemplate.js';
 const years = ['2010', '2011', '2012'];
 function App() {
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Monthly Prices of Copper, Nickel and Palladium</h3>
       </div>
@@ -29,7 +29,7 @@ function App() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/BarSparklines/React/App.tsx b/apps/demos/Demos/Charts/BarSparklines/React/App.tsx
index 8227ce072edb..50c8581d92e3 100644
--- a/apps/demos/Demos/Charts/BarSparklines/React/App.tsx
+++ b/apps/demos/Demos/Charts/BarSparklines/React/App.tsx
@@ -25,7 +25,7 @@ function App() {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="long-title"><h3>Monthly Prices of Aluminium, Nickel and Copper</h3></div>
       <div id="chart-demo">
         <table
@@ -58,7 +58,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/BarSparklines/ReactJs/App.js b/apps/demos/Demos/Charts/BarSparklines/ReactJs/App.js
index c37d56d7353a..2a684e7b4972 100644
--- a/apps/demos/Demos/Charts/BarSparklines/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/BarSparklines/ReactJs/App.js
@@ -25,7 +25,7 @@ function App() {
     dataSource.load();
   }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Monthly Prices of Aluminium, Nickel and Copper</h3>
       </div>
@@ -61,7 +61,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/Colorization/React/App.tsx b/apps/demos/Demos/Charts/Colorization/React/App.tsx
index a511cc86e7c5..31544cf8a0ee 100644
--- a/apps/demos/Demos/Charts/Colorization/React/App.tsx
+++ b/apps/demos/Demos/Charts/Colorization/React/App.tsx
@@ -20,7 +20,7 @@ function App() {
   }, [setTypeOptions]);
 
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         id="treemap"
         dataSource={salesAmount}
@@ -49,7 +49,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/Colorization/ReactJs/App.js b/apps/demos/Demos/Charts/Colorization/ReactJs/App.js
index d255e755cfbf..b80c46294c8b 100644
--- a/apps/demos/Demos/Charts/Colorization/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Colorization/ReactJs/App.js
@@ -20,7 +20,7 @@ function App() {
     [setTypeOptions],
   );
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         id="treemap"
         dataSource={salesAmount}
@@ -49,7 +49,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/React/App.tsx b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/React/App.tsx
index 9370cb88f8d4..7c9fb6bfd8d2 100644
--- a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/React/App.tsx
+++ b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/React/App.tsx
@@ -43,7 +43,7 @@ function App() {
   }, [setVisualRange]);
 
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="zoomedChart"
         palette="Soft"
@@ -79,7 +79,7 @@ function App() {
           <CommonSeriesSettingsOptions type="bar" ignoreEmptyPoints ={true} />
         </ChartOptions>
       </RangeSelector>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/ReactJs/App.js b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/ReactJs/App.js
index bb36ea88a2be..fef276a0b769 100644
--- a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/ReactJs/App.js
@@ -48,7 +48,7 @@ function App() {
     [setVisualRange],
   );
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="zoomedChart"
         palette="Soft"
@@ -95,7 +95,7 @@ function App() {
           />
         </ChartOptions>
       </RangeSelector>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/DiscreteData/React/App.tsx b/apps/demos/Demos/Charts/DiscreteData/React/App.tsx
index 6acc8acfb139..c788c047326e 100644
--- a/apps/demos/Demos/Charts/DiscreteData/React/App.tsx
+++ b/apps/demos/Demos/Charts/DiscreteData/React/App.tsx
@@ -16,7 +16,7 @@ function App() {
   }, [setCurrentType]);
 
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Average temperature in London</h3>
       </div>
@@ -53,7 +53,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/DiscreteData/ReactJs/App.js b/apps/demos/Demos/Charts/DiscreteData/ReactJs/App.js
index fed22e615368..53737012e5a2 100644
--- a/apps/demos/Demos/Charts/DiscreteData/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/DiscreteData/ReactJs/App.js
@@ -14,7 +14,7 @@ function App() {
     [setCurrentType],
   );
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Average temperature in London</h3>
       </div>
@@ -51,7 +51,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/DrillDown/React/App.tsx b/apps/demos/Demos/Charts/DrillDown/React/App.tsx
index e5bd80135070..740d4152e661 100644
--- a/apps/demos/Demos/Charts/DrillDown/React/App.tsx
+++ b/apps/demos/Demos/Charts/DrillDown/React/App.tsx
@@ -39,7 +39,7 @@ function App() {
   }, [setDrillInfo]);
 
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         dataSource={citiesPopulation}
         interactWithGroup={true}
@@ -59,7 +59,7 @@ function App() {
         onItemClick={drillInfoClick}
         treeInfo={drillInfo}
       />
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/DrillDown/ReactJs/App.js b/apps/demos/Demos/Charts/DrillDown/ReactJs/App.js
index 1afbb8129122..e58247424061 100644
--- a/apps/demos/Demos/Charts/DrillDown/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/DrillDown/ReactJs/App.js
@@ -32,7 +32,7 @@ function App() {
     [setDrillInfo],
   );
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         dataSource={citiesPopulation}
         interactWithGroup={true}
@@ -52,7 +52,7 @@ function App() {
         onItemClick={drillInfoClick}
         treeInfo={drillInfo}
       />
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/ExportAndPrintingAPI/React/App.tsx b/apps/demos/Demos/Charts/ExportAndPrintingAPI/React/App.tsx
index f6ffaf66c60a..8482513e49d3 100644
--- a/apps/demos/Demos/Charts/ExportAndPrintingAPI/React/App.tsx
+++ b/apps/demos/Demos/Charts/ExportAndPrintingAPI/React/App.tsx
@@ -33,7 +33,7 @@ function App() {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="chart"
         ref={chartRef}
@@ -54,7 +54,7 @@ function App() {
         &nbsp;
         <Button icon="export" text="Export" onClick={exportChart} />
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/ExportAndPrintingAPI/ReactJs/App.js b/apps/demos/Demos/Charts/ExportAndPrintingAPI/ReactJs/App.js
index 967624e511af..78d47a5fa02a 100644
--- a/apps/demos/Demos/Charts/ExportAndPrintingAPI/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ExportAndPrintingAPI/ReactJs/App.js
@@ -28,7 +28,7 @@ function App() {
     chartRef.current.instance().exportTo('Example', 'png');
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="chart"
         ref={chartRef}
@@ -65,7 +65,7 @@ function App() {
           onClick={exportChart}
         />
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/Line/React/App.tsx b/apps/demos/Demos/Charts/Line/React/App.tsx
index 6c0c52373bf2..e0961b5ec570 100644
--- a/apps/demos/Demos/Charts/Line/React/App.tsx
+++ b/apps/demos/Demos/Charts/Line/React/App.tsx
@@ -31,7 +31,7 @@ function App() {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Chart palette="Violet" dataSource={countriesInfo}>
         <CommonSeriesSettings argumentField="country" type={type} />
         {energySources.map((item) => (
@@ -64,7 +64,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/Line/ReactJs/App.js b/apps/demos/Demos/Charts/Line/ReactJs/App.js
index 2be1e03c11e1..69c95833be75 100644
--- a/apps/demos/Demos/Charts/Line/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Line/ReactJs/App.js
@@ -25,7 +25,7 @@ function App() {
     setType(e.value);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Chart
         palette="Violet"
         dataSource={countriesInfo}
@@ -71,7 +71,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/Palette/React/App.tsx b/apps/demos/Demos/Charts/Palette/React/App.tsx
index ac4c7d073d22..c3e009a07368 100644
--- a/apps/demos/Demos/Charts/Palette/React/App.tsx
+++ b/apps/demos/Demos/Charts/Palette/React/App.tsx
@@ -22,7 +22,7 @@ function App() {
   }, [setExtensionMode]);
 
   return (
-    <React.Fragment>
+    <>
       <div className="flex-container">
         <PieChart
           id="pie"
@@ -68,7 +68,7 @@ function App() {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/Palette/ReactJs/App.js b/apps/demos/Demos/Charts/Palette/ReactJs/App.js
index 7540643e8e53..5d21b451e087 100644
--- a/apps/demos/Demos/Charts/Palette/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Palette/ReactJs/App.js
@@ -26,7 +26,7 @@ function App() {
     [setExtensionMode],
   );
   return (
-    <React.Fragment>
+    <>
       <div className="flex-container">
         <PieChart
           id="pie"
@@ -72,7 +72,7 @@ function App() {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/App.tsx b/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/App.tsx
index ace98618a4b3..31c5a000f0f3 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/App.tsx
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/App.tsx
@@ -27,7 +27,7 @@ function App() {
   }, [setResolveMode]);
 
   return (
-    <React.Fragment>
+    <>
       <PieChart
         id="pie"
         dataSource={dataSource}
@@ -58,7 +58,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/ReactJs/App.js b/apps/demos/Demos/Charts/PieResolveLabelOverlap/ReactJs/App.js
index a174a17bd30d..a9f4b50fedfb 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/ReactJs/App.js
@@ -23,7 +23,7 @@ function App() {
     [setResolveMode],
   );
   return (
-    <React.Fragment>
+    <>
       <PieChart
         id="pie"
         dataSource={dataSource}
@@ -57,7 +57,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/React/App.tsx b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/React/App.tsx
index 624a76ac1768..bdf27fc6753f 100644
--- a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/React/App.tsx
+++ b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/React/App.tsx
@@ -30,7 +30,7 @@ function App() {
   }, [setVisualRange]);
 
   return (
-    <React.Fragment>
+    <>
       <PolarChart
         id="zoomedChart"
         dataSource={dataSource}
@@ -86,7 +86,7 @@ function App() {
         </Scale>
         <Behavior valueChangeMode="onHandleMove" />
       </RangeSelector>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/ReactJs/App.js b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/ReactJs/App.js
index 54289e96eb18..81e86135157d 100644
--- a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/ReactJs/App.js
@@ -26,7 +26,7 @@ function App() {
     [setVisualRange],
   );
   return (
-    <React.Fragment>
+    <>
       <PolarChart
         id="zoomedChart"
         dataSource={dataSource}
@@ -80,7 +80,7 @@ function App() {
         </Scale>
         <Behavior valueChangeMode="onHandleMove" />
       </RangeSelector>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/React/App.tsx b/apps/demos/Demos/Charts/ResolveLabelOverlap/React/App.tsx
index c9c4db5c75bc..04ea07f651b2 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/React/App.tsx
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/React/App.tsx
@@ -17,7 +17,7 @@ function App() {
   }, [setCurrentMode]);
 
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="chart"
         dataSource={population}
@@ -44,7 +44,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/ReactJs/App.js b/apps/demos/Demos/Charts/ResolveLabelOverlap/ReactJs/App.js
index ecb2637becef..6e9d8b731fdd 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/ReactJs/App.js
@@ -14,7 +14,7 @@ function App() {
     [setCurrentMode],
   );
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="chart"
         dataSource={population}
@@ -41,7 +41,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/React/App.tsx b/apps/demos/Demos/Charts/SimpleSparklines/React/App.tsx
index eb5bfaa2415a..914899cbf2b2 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/React/App.tsx
+++ b/apps/demos/Demos/Charts/SimpleSparklines/React/App.tsx
@@ -6,7 +6,7 @@ const years = ['2010', '2011', '2012'];
 
 function App() {
   return (
-    <React.Fragment>
+    <>
       <div className="long-title"><h3>Monthly Prices of Oil, Gold and Silver</h3></div>
       <div id="chart-demo">
         <table className="demo-table">
@@ -23,7 +23,7 @@ function App() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/App.js b/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/App.js
index c2006dfa49ce..4ce77479625b 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/App.js
@@ -4,7 +4,7 @@ import RowTemplate from './RowTemplate.js';
 const years = ['2010', '2011', '2012'];
 function App() {
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Monthly Prices of Oil, Gold and Silver</h3>
       </div>
@@ -26,7 +26,7 @@ function App() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/Spline/React/App.tsx b/apps/demos/Demos/Charts/Spline/React/App.tsx
index 9240138946e5..be76636f822f 100644
--- a/apps/demos/Demos/Charts/Spline/React/App.tsx
+++ b/apps/demos/Demos/Charts/Spline/React/App.tsx
@@ -27,7 +27,7 @@ function App() {
   }, [setType]);
 
   return (
-    <React.Fragment>
+    <>
       <Chart
         palette="Violet"
         dataSource={sharingStatisticsInfo}
@@ -74,7 +74,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/Spline/ReactJs/App.js b/apps/demos/Demos/Charts/Spline/ReactJs/App.js
index 011b9cf1dd0c..a38113b6339e 100644
--- a/apps/demos/Demos/Charts/Spline/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Spline/ReactJs/App.js
@@ -26,7 +26,7 @@ function App() {
     [setType],
   );
   return (
-    <React.Fragment>
+    <>
       <Chart
         palette="Violet"
         dataSource={sharingStatisticsInfo}
@@ -74,7 +74,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx b/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx
index 9306cf7bdadc..86cfe32bbc4c 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx
@@ -22,7 +22,7 @@ function App() {
   }, [setSelectedAlgorithm, setCurrentAlgorithm]);
 
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         id="treemap"
         dataSource={populationByAge}
@@ -52,7 +52,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/App.js b/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/App.js
index 1a6778e71cf9..f4d4c7282360 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/App.js
@@ -15,7 +15,7 @@ function App() {
     [setSelectedAlgorithm, setCurrentAlgorithm],
   );
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         id="treemap"
         dataSource={populationByAge}
@@ -45,7 +45,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 const customAlgorithm = (arg) => {
diff --git a/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx b/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx
index 6c0c16fb5865..00b8b97889fb 100644
--- a/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx
+++ b/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx
@@ -29,7 +29,7 @@ function App() {
   }, [showTooltip]);
 
   return (
-    <React.Fragment>
+    <>
       <PieChart
         ref={pieChartRef}
         dataSource={populationData}
@@ -59,7 +59,7 @@ function App() {
           onValueChanged={onRegionChanged}
         />
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/TooltipAPI/ReactJs/App.js b/apps/demos/Demos/Charts/TooltipAPI/ReactJs/App.js
index 419407b89e52..1fe13d2323b4 100644
--- a/apps/demos/Demos/Charts/TooltipAPI/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/TooltipAPI/ReactJs/App.js
@@ -32,7 +32,7 @@ function App() {
     [showTooltip],
   );
   return (
-    <React.Fragment>
+    <>
       <PieChart
         ref={pieChartRef}
         dataSource={populationData}
@@ -62,7 +62,7 @@ function App() {
           onValueChanged={onRegionChanged}
         />
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/React/App.tsx b/apps/demos/Demos/Charts/WinlossSparklines/React/App.tsx
index 389b22883963..09d5f14431c1 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/React/App.tsx
+++ b/apps/demos/Demos/Charts/WinlossSparklines/React/App.tsx
@@ -6,7 +6,7 @@ const years = ['2010', '2011', '2012'];
 
 function App() {
   return (
-    <React.Fragment>
+    <>
       <div className="long-title"><h3>Monthly Prices of Aluminium, Nickel and Copper</h3></div>
       <div id="chart-demo">
         <table
@@ -26,7 +26,7 @@ function App() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/App.js b/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/App.js
index bc50ccb447cc..1f2368495a98 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/App.js
@@ -4,7 +4,7 @@ import RowTemplate from './RowTemplate.js';
 const years = ['2010', '2011', '2012'];
 function App() {
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Monthly Prices of Aluminium, Nickel and Copper</h3>
       </div>
@@ -29,7 +29,7 @@ function App() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/React/App.tsx b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/React/App.tsx
index 1dac8551da0a..6b24be08e9e0 100644
--- a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/React/App.tsx
+++ b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/React/App.tsx
@@ -25,7 +25,7 @@ function App() {
   }, [setVisualRange]);
 
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="zoomedChart"
         palette="Harmony Light"
@@ -55,7 +55,7 @@ function App() {
           <Series argumentField="arg" valueField="y3" />
         </ChartOptions>
       </RangeSelector>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/ReactJs/App.js b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/ReactJs/App.js
index 38d782ae16a5..e12dbd01743e 100644
--- a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/ReactJs/App.js
@@ -24,7 +24,7 @@ function App() {
     [setVisualRange],
   );
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="zoomedChart"
         palette="Harmony Light"
@@ -76,7 +76,7 @@ function App() {
           />
         </ChartOptions>
       </RangeSelector>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
index 1dbb36bde9c0..d0b21ca3e593 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
@@ -247,7 +247,7 @@ export default function App() {
 
 function PopupContentFunc(props) {
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Name</div>
@@ -331,6 +331,6 @@ function PopupContentFunc(props) {
         <Button text="Update" type="default" onClick={props.updateEmployeeClick}></Button>
         <Button text="Cancel" onClick={props.cancelEditEmployeeClick}></Button>
       </div>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
index 5657facdbdb0..2820f55f2da7 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
@@ -271,7 +271,7 @@ export default function App() {
 }
 function PopupContentFunc(props) {
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Name</div>
@@ -362,6 +362,6 @@ function PopupContentFunc(props) {
           onClick={props.cancelEditEmployeeClick}
         ></Button>
       </div>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/apps/demos/Demos/Gantt/ExportToPDF/React/App.tsx b/apps/demos/Demos/Gantt/ExportToPDF/React/App.tsx
index 808dc622b7f0..1ecd7cbf4826 100644
--- a/apps/demos/Demos/Gantt/ExportToPDF/React/App.tsx
+++ b/apps/demos/Demos/Gantt/ExportToPDF/React/App.tsx
@@ -104,7 +104,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <Gantt
           ref={this.ganttRef}
           taskListWidth={500}
@@ -239,7 +239,7 @@ class App extends React.Component {
             </div>
           </div>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 
diff --git a/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/App.js b/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/App.js
index 7b6a5e6c6435..6cf6b5dbfb8a 100644
--- a/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/App.js
@@ -77,7 +77,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <Gantt
           ref={this.ganttRef}
           taskListWidth={500}
@@ -223,7 +223,7 @@ class App extends React.Component {
             </div>
           </div>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 
diff --git a/apps/demos/Demos/Gantt/Toolbar/React/App.tsx b/apps/demos/Demos/Gantt/Toolbar/React/App.tsx
index f834129f98be..fabb9417e172 100644
--- a/apps/demos/Demos/Gantt/Toolbar/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Toolbar/React/App.tsx
@@ -36,7 +36,7 @@ function App() {
   }, [ganttConfig]);
 
   return (
-    <React.Fragment>
+    <>
       <Gantt
         taskListWidth={500}
         scaleType="weeks"
@@ -92,7 +92,7 @@ function App() {
           levels of detail.
         </div>
       </Popup>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Gantt/Toolbar/ReactJs/App.js b/apps/demos/Demos/Gantt/Toolbar/ReactJs/App.js
index 99080906d93a..204bf7f2d7de 100644
--- a/apps/demos/Demos/Gantt/Toolbar/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/Toolbar/ReactJs/App.js
@@ -42,7 +42,7 @@ function App() {
     });
   }, [ganttConfig]);
   return (
-    <React.Fragment>
+    <>
       <Gantt
         taskListWidth={500}
         scaleType="weeks"
@@ -110,7 +110,7 @@ function App() {
           wheel to zoom (in or out) to browse data across various levels of detail.
         </div>
       </Popup>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Pagination/Overview/React/App.tsx b/apps/demos/Demos/Pagination/Overview/React/App.tsx
index 839f98ec0113..43ffc99aae3b 100644
--- a/apps/demos/Demos/Pagination/Overview/React/App.tsx
+++ b/apps/demos/Demos/Pagination/Overview/React/App.tsx
@@ -11,7 +11,7 @@ const App = () => {
   const [pageIndex, setPageIndex] = useState(1);
 
   return (
-    <React.Fragment>
+    <>
       <EmployeeGallery
         employees={employees}
         pageSize={pageSize}
@@ -27,7 +27,7 @@ const App = () => {
         onPageIndexChange={setPageIndex}
         onPageSizeChange={setPageSize}
       />
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/App.js b/apps/demos/Demos/Pagination/Overview/ReactJs/App.js
index 23eb27a81f2c..6499bc6c982d 100644
--- a/apps/demos/Demos/Pagination/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Pagination/Overview/ReactJs/App.js
@@ -8,7 +8,7 @@ const App = () => {
   const [pageSize, setPageSize] = useState(4);
   const [pageIndex, setPageIndex] = useState(1);
   return (
-    <React.Fragment>
+    <>
       <EmployeeGallery
         employees={employees}
         pageSize={pageSize}
@@ -24,7 +24,7 @@ const App = () => {
         onPageIndexChange={setPageIndex}
         onPageSizeChange={setPageSize}
       />
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Resizable/Overview/React/App.tsx b/apps/demos/Demos/Resizable/Overview/React/App.tsx
index dd7ac54248d4..5456428019bf 100644
--- a/apps/demos/Demos/Resizable/Overview/React/App.tsx
+++ b/apps/demos/Demos/Resizable/Overview/React/App.tsx
@@ -28,7 +28,7 @@ const App = () => {
   }, [setHandles, setResizableClasses]);
 
   return (
-    <React.Fragment>
+    <>
       <div className='widget-container'>
         <div className='dx-fieldset'>
           <div className='dx-fieldset-header'>Resizable DataGrid</div>
@@ -82,7 +82,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Resizable/Overview/ReactJs/App.js b/apps/demos/Demos/Resizable/Overview/ReactJs/App.js
index c66bcbb483d4..ec7e96075f41 100644
--- a/apps/demos/Demos/Resizable/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Resizable/Overview/ReactJs/App.js
@@ -28,7 +28,7 @@ const App = () => {
     [setHandles, setResizableClasses],
   );
   return (
-    <React.Fragment>
+    <>
       <div className="widget-container">
         <div className="dx-fieldset">
           <div className="dx-fieldset-header">Resizable DataGrid</div>
@@ -99,7 +99,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/Adaptability/React/App.tsx b/apps/demos/Demos/Scheduler/Adaptability/React/App.tsx
index 29e5ba8f0520..2845e54458b5 100644
--- a/apps/demos/Demos/Scheduler/Adaptability/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Adaptability/React/App.tsx
@@ -17,7 +17,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         ref={schedulerRef}
         timeZone="America/Los_Angeles"
@@ -41,7 +41,7 @@ const App = () => {
         icon="plus"
         onClick={showAppointmentPopup}
       />
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js
index d8f8bb62bb4b..278d5cb0dfbf 100644
--- a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js
@@ -12,7 +12,7 @@ const App = () => {
     schedulerRef.current?.instance().showAppointmentPopup();
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         ref={schedulerRef}
         timeZone="America/Los_Angeles"
@@ -36,7 +36,7 @@ const App = () => {
         icon="plus"
         onClick={showAppointmentPopup}
       />
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx
index 7b58b4008229..6b4c4dc26166 100644
--- a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx
@@ -20,7 +20,7 @@ const App = () => {
   }, [setAllDayPanelMode]);
 
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         timeZone="America/Los_Angeles"
         dataSource={data}
@@ -45,7 +45,7 @@ const App = () => {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js
index 32aac40e2c2c..d34680fc970c 100644
--- a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js
@@ -22,7 +22,7 @@ const App = () => {
     [setAllDayPanelMode],
   );
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         timeZone="America/Los_Angeles"
         dataSource={data}
@@ -47,7 +47,7 @@ const App = () => {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx b/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx
index 4f16846fa38b..e9c954b0d0d0 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx
@@ -114,7 +114,7 @@ const App = () => {
   }, [groups]);
 
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         ref={schedulerRef}
         timeZone="America/Los_Angeles"
@@ -145,7 +145,7 @@ const App = () => {
         onItemClick={onContextMenuItemClick}
         itemComponent={AppointmentMenuTemplate}
       />
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js
index 46ba883ecd67..2a7dd7ceb3a7 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js
@@ -103,7 +103,7 @@ const App = () => {
     [groups],
   );
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         ref={schedulerRef}
         timeZone="America/Los_Angeles"
@@ -134,7 +134,7 @@ const App = () => {
         onItemClick={onContextMenuItemClick}
         itemComponent={AppointmentMenuTemplate}
       />
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx
index af4b6ad05086..3a415c2a8e58 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx
@@ -41,7 +41,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         dataSource={data}
         views={views}
@@ -109,7 +109,7 @@ const App = () => {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js
index e0aeb204f7d3..a81524b173e8 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js
@@ -31,7 +31,7 @@ const App = () => {
     setUpdateInterval(e.value);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         dataSource={data}
         views={views}
@@ -95,7 +95,7 @@ const App = () => {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/React/App.tsx b/apps/demos/Demos/Scheduler/DragAndDrop/React/App.tsx
index d484ce20e11f..629a96fd0926 100644
--- a/apps/demos/Demos/Scheduler/DragAndDrop/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/DragAndDrop/React/App.tsx
@@ -63,7 +63,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <ScrollView id="scroll">
         <Draggable
           id="list"
@@ -101,7 +101,7 @@ const App = () => {
           onAdd={onAppointmentAdd as any}
         />
       </Scheduler>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js
index bf5cd436dc9f..70fcdccdb2f6 100644
--- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js
@@ -46,7 +46,7 @@ const App = () => {
     });
   }, []);
   return (
-    <React.Fragment>
+    <>
       <ScrollView id="scroll">
         <Draggable
           id="list"
@@ -85,7 +85,7 @@ const App = () => {
           onAdd={onAppointmentAdd}
         />
       </Scheduler>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/Editing/React/App.tsx b/apps/demos/Demos/Scheduler/Editing/React/App.tsx
index ee238ccd10dd..68a06c6374a4 100644
--- a/apps/demos/Demos/Scheduler/Editing/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Editing/React/App.tsx
@@ -42,7 +42,7 @@ const App = () => {
   const onAllowUpdatingChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => setAllowUpdating(e.value), []);
 
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         timeZone="America/Los_Angeles"
         dataSource={data}
@@ -106,7 +106,7 @@ const App = () => {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js b/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js
index 8c0fe99fef7a..ad8b3e9bdc5d 100644
--- a/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js
@@ -30,7 +30,7 @@ const App = () => {
   const onAllowDraggingChanged = useCallback((e) => setAllowDragging(e.value), []);
   const onAllowUpdatingChanged = useCallback((e) => setAllowUpdating(e.value), []);
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         timeZone="America/Los_Angeles"
         dataSource={data}
@@ -94,7 +94,7 @@ const App = () => {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx
index a69d742f9614..909d34cd94eb 100644
--- a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx
@@ -27,7 +27,7 @@ const currentDate = new Date(2017, 4, 25);
 const views: SchedulerTypes.ViewType[] = ['day', 'workWeek', 'month'];
 
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="long-title">
       <h3>Tasks for Employees (USA Office)</h3>
     </div>
@@ -45,7 +45,7 @@ const App = () => (
       textExpr="summary"
       timeZone="America/Los_Angeles"
     />
-  </React.Fragment>
+  </>
 );
 
 export default App;
diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js
index eeb33be53cb1..8f8b36ead4d3 100644
--- a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js
@@ -18,7 +18,7 @@ const dataSource = new CustomStore({
 const currentDate = new Date(2017, 4, 25);
 const views = ['day', 'workWeek', 'month'];
 const App = () => (
-  <React.Fragment>
+  <>
     <div className="long-title">
       <h3>Tasks for Employees (USA Office)</h3>
     </div>
@@ -36,6 +36,6 @@ const App = () => (
       textExpr="summary"
       timeZone="America/Los_Angeles"
     />
-  </React.Fragment>
+  </>
 );
 export default App;
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx
index a53f57252529..6476613b62c4 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx
@@ -19,10 +19,10 @@ type DateCellProps = {
 };
 
 const DateCell = ({ data: cellData }: DateCellProps) => (
-  <React.Fragment>
+  <>
     <div className="name">{dayOfWeekNames[cellData.date.getDay()]}</div>
     <div className="number">{cellData.date.getDate()}</div>
-  </React.Fragment>
+  </>
 );
 
 const App = () => (
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js
index 34c2e4685644..1b6cf72dcde0 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js
@@ -13,10 +13,10 @@ const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const typeGroups = ['typeId'];
 const priorityGroups = ['priorityId'];
 const DateCell = ({ data: cellData }) => (
-  <React.Fragment>
+  <>
     <div className="name">{dayOfWeekNames[cellData.date.getDay()]}</div>
     <div className="number">{cellData.date.getDate()}</div>
-  </React.Fragment>
+  </>
 );
 const App = () => (
   <Scheduler
diff --git a/apps/demos/Demos/Scheduler/Resources/React/App.tsx b/apps/demos/Demos/Scheduler/Resources/React/App.tsx
index 260e553082c2..8cbbc9cfb16b 100644
--- a/apps/demos/Demos/Scheduler/Resources/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Resources/React/App.tsx
@@ -25,7 +25,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         timeZone="America/Los_Angeles"
         dataSource={data}
@@ -90,7 +90,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js
index 70233568ee8e..c680aff016ef 100644
--- a/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js
@@ -18,7 +18,7 @@ const App = () => {
     setCurrentResource(e.value);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Scheduler
         timeZone="America/Los_Angeles"
         dataSource={data}
@@ -87,7 +87,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx b/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx
index 62ed9a0ad714..02efa162bf9d 100644
--- a/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx
@@ -45,7 +45,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="option">
         <span>Office Time Zone</span>
         <SelectBox
@@ -71,7 +71,7 @@ const App = () => {
       >
         <Editing allowTimeZoneEditing={true} />
       </Scheduler>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js
index ebe5da241ebd..92b45c7c02dc 100644
--- a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js
@@ -32,7 +32,7 @@ const App = () => {
     }
   }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="option">
         <span>Office Time Zone</span>
         <SelectBox
@@ -58,7 +58,7 @@ const App = () => {
       >
         <Editing allowTimeZoneEditing={true} />
       </Scheduler>
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx b/apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx
index f77dee0a5349..b30ff057e091 100644
--- a/apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx
@@ -11,7 +11,7 @@ const views: SchedulerTypes.ViewType[] = ['day', 'workWeek'];
 const App = () => {
   const [currentShift, setCurrentShift] = useState(shifts[0]);
 
-  return <React.Fragment>
+  return <>
     <div className="options">
       <div className="option">
         <div className="label">Work Hours:</div>
@@ -38,7 +38,7 @@ const App = () => {
       cellDuration={60}
       showAllDayPanel={false}
     />
-  </React.Fragment>;
+  </>;
 };
 
 export default App;
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js
index a66c6f51e634..fa9ed84d5736 100644
--- a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js
@@ -8,7 +8,7 @@ const views = ['day', 'workWeek'];
 const App = () => {
   const [currentShift, setCurrentShift] = useState(shifts[0]);
   return (
-    <React.Fragment>
+    <>
       <div className="options">
         <div className="option">
           <div className="label">Work Hours:</div>
@@ -35,7 +35,7 @@ const App = () => {
         cellDuration={60}
         showAllDayPanel={false}
       />
-    </React.Fragment>
+    </>
   );
 };
 export default App;
diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx
index c10484ac43b4..d88795df2b22 100644
--- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx
+++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx
@@ -35,7 +35,7 @@ const App = () => {
   }, [vectorMapRef]);
 
   return (
-    <React.Fragment>
+    <>
       <VectorMap
         ref={vectorMapRef}
         id="vector-map"
@@ -47,7 +47,7 @@ const App = () => {
         <Tooltip enabled={true} customizeTooltip={customizeTooltip} />
       </VectorMap>
       <Button text="Reset" id="reset" onClick={reset} />
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js b/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js
index 8dcb7517115e..b876c84f5f29 100644
--- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js
+++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js
@@ -24,7 +24,7 @@ const App = () => {
     vectorMapRef.current.instance().zoomFactor(null);
   }, [vectorMapRef]);
   return (
-    <React.Fragment>
+    <>
       <VectorMap
         ref={vectorMapRef}
         id="vector-map"
@@ -46,7 +46,7 @@ const App = () => {
         id="reset"
         onClick={reset}
       />
-    </React.Fragment>
+    </>
   );
 };
 export default App;