Update readme files, add image

Author: AlisherAmonulloev

ASP.NET Core/Readme.md

@@ -1,84 +1,30 @@
 # ASP.NET Core DevExtreme Example
 
-## Installation
+For more information about this example check the [Readme](../README.md).
 
-Download the example and use Visual Studio 2022 (or later) or Visual Studio Code to open the project. This project targets .NET 8.0. 
+## Build and Run
 
-## Client-side resources and bundling
+Prerequisites: .NET 8 SDK, Node.js (for npm/gulp resource bundling).
 
-This project uses [NPM](https://www.npmjs.com/) and [Gulp.js](https://gulpjs.com/) to install client-side libraries. The project restores NPM packages before the first build. Then, Gulp bundles required scripts and CSS files into the resulting package during the first and every next build.
+Restore and build:
+```sh
+dotnet restore
+dotnet build
+```
 
-The project includes:
-- DevExtreme 24.2.3
-- DevExtreme.AspNet.Core 24.2.*
-- DevExtreme.AspNet.Data 5.*
-- jQuery 3.7.1
-- Bootstrap 5.3.3 
+Run (HTTPS on 5001, HTTP on 5000 by default):
+```sh
+dotnet run
+```
 
-The resulted bundles will be located in the `wwwroot` folder:
-* `css/vendor.css` - a file with all CSS styles.
-* `css/icons` and `css/fonts` - folders that contain fonts and icons for DevExtreme themes.
-* `js/vendor.js` - a file that contains all scripts.
-
-The default bundle includes jQuery, Bootstrap, and DevExtreme.
-
-### Add more 3rd-party libraries for additional features/components 
-
-The main logic is located in the the `gulpfile.js` file at the root application level. The file contains two tasks:
-
-* the `add-resources` task  
-
-    * copies JavaScript files located in the `scripts` array and adds them to `vendor.js`. The script bundle is moved to `wwwroot\js`.
-    * copies CSS styles located in the `styles` array and merges them into the `vendor.css` bundle. Then, this bundle is moved to `wwwroot\css`
-    * copies DevExtreme `fonts` and `icons` folders from NPM  to `wwwroot\css`
-
-*  the `clean` task removes all previously created files (`vendor.js` and `vendor.css`) and folders (`icons` and `fonts`)
-
-If you need to include more features, you can uncomment one of the following sections:
-
-* Gantt - scripts and styles for [dxGantt](https://js.devexpress.com/DevExtreme/Guide/UI_Components/Gantt/Getting_Started_with_Gantt/).
-* Diagram - scripts and styles for [dxDiagram](https://js.devexpress.com/DevExtreme/Guide/UI_Components/Diagram/Getting_Started_with_Diagram/).
-* Export  - scripts and styles for the exporting feature: [Export Data to Excel](https://js.devexpress.com/DevExtreme/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/#Export_Data). 
-* HtmlEditor - scripts and styles for [dxHtmlEditor](https://js.devexpress.com/DevExtreme/Guide/UI_Components/HtmlEditor/Overview/).
-* Full Bundle - scripts and styles for all above mentioned features/components.  
-
-## Code
-
-Take a look at the following files of this example to see the required code:
-
-**Controllers:**
-- `Controllers/HomeController.cs` - Main controller with Index action
-- `Controllers/SampleDataController.cs` - API controller for sample data
-
-**Models:**
-- `Models/SampleData.cs` - Sample data model
-- `Models/SampleOrder.cs` - Sample order model
-
-**Views:**
-- `Views/Home/Index.cshtml` - Main page with DevExtreme components
-- `Views/Shared/_Layout.cshtml` - Layout template
-- `Views/_ViewImports.cshtml` - Global imports
-- `Views/_ViewStart.cshtml` - View start configuration
-
-**Configuration:**
-- `Program.cs` - Application entry point
-- `Startup.cs` - Service configuration
-- `gulpfile.js` - Build automation
-- `package.json` - NPM dependencies
-- `ASP.NET Core.csproj` - Project file
-
-## Development server
-
-Use the Visual Studio `Run (F5)` command or `dotnet run` command to run the project. The application will be available at `https://localhost:5001` (HTTPS) or `http://localhost:5000` (HTTP).
+You can also use Visual Studio: F5 / Ctrl+F5.
 
 ## Further help
 
-You can learn more about the ASP.NET Core components' syntax in our documentation: [Concepts](https://docs.devexpress.com/AspNetCore/400574/devextreme-based-controls/concepts/razor-syntax)
-The client-side API is based on jQuery [jQuery documentation](https://api.jquery.com/) and described in the following topics: 
-* [Get and Set Properties](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties)
-* [Call Methods](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Call_Methods)
-* [Get a UI Component Instance](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_a_UI_Component_Instance)
-
-To get more help on DevExtreme submit an issue in the [Support Center](https://supportcenter.devexpress.com/ticket/create)
-
+DevExtreme ASP.NET Core Razor syntax: https://docs.devexpress.com/AspNetCore/400574/devextreme-based-controls/concepts/razor-syntax
+Client-side API basics:
+* Get/Set properties: https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties
+* Call methods: https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Call_Methods
+* Get instance: https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_a_UI_Component_Instance
 
+To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).

Angular/README.md

@@ -1,35 +1,33 @@
 # Angular DevExtreme Example
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.4 and includes DevExtreme Angular components version 25.1.3.
+For more information about this example check the [Readme](../README.md).
 
-## Development server
+## Build and Lint
 
-Run `npm start` or `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+Install dependencies:
+```sh
+npm install
+```
 
-## Code scaffolding
+Start dev server:
+```sh
+npm start
+```
+Open: http://localhost:4200/
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Build production bundle:
+```sh
+npm run build
+```
 
-## Build
-
-Run `npm run build` or `ng build` to build the project. The build artifacts will be stored in the `dist/Angular/` directory.
-
-## Running unit tests
-
-Run `npm test` or `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Linting
-
-Run `npm run lint` to execute linting checks for TypeScript, CSS/SCSS, and HTML formatting.
-- `npm run lint-ts` - ESLint for TypeScript files
-- `npm run lint-css` - Stylelint for CSS/SCSS files  
-- `npm run lint-html` - Prettier for HTML formatting
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+Run linter:
+```sh
+npm run lint
+```
 
 ## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
-To get more help on DevExtreme submit an issue on [GitHub](https://github.com/DevExpress/devextreme/issues) or [Support Center](https://supportcenter.devexpress.com/ticket/create)
+Angular CLI docs: https://angular.dev/tools/cli
+DevExtreme Angular docs: https://js.devexpress.com/Angular/Documentation
+
+To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).

README.md

@@ -8,6 +8,8 @@
 
 This is the repository template for creating new examples. 
 
+![Example image](images/image-template.png)
+
 Use **DevExtreme _Product_ - _Task_** template for a title. 
 
 Describe the solved task in this section.
@@ -18,16 +20,18 @@ Then, add implementation details (steps, code snippets, and other technical info
 
 ## Files to Review
 
-- **jQuery**
-    - [index.js](jQuery/src/index.js)
 - **Angular**
     - [app.component.html](Angular/src/app/app.component.html)
     - [app.component.ts](Angular/src/app/app.component.ts)
-- **Vue**
-    - [Home.vue](Vue/src/components/HomeContent.vue)
 - **React**
     - [App.tsx](React/src/App.tsx)
-- **NetCore**    
+- **Vue**
+    - [App.vue](Vue/src/App.vue)
+    - [Home.vue](Vue/src/components/HomeContent.vue)
+- **jQuery**
+    - [index.html](jQuery/src/index.html)
+    - [index.js](jQuery/src/index.js)
+- **ASP.NET Core**    
     - [Index.cshtml](ASP.NET%20Core/Views/Home/Index.cshtml)
 
 ## Documentation

React/README.md

@@ -1,128 +1,34 @@
 # React + TypeScript + Vite + DevExtreme
 
-This template provides a minimal setup to get React working in Vite with HMR, ESLint rules, and DevExtreme components.
+For more information about this example check the [Readme](../README.md).
 
-This project includes:
-- React 18.2.0
-- TypeScript 5.8.2
-- Vite for fast development and building
-- DevExtreme React 25.1.3
-- Vitest for testing
-- ESLint and Stylelint for code quality
+## Build and Lint
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Getting Started
-
-### Installation
-
-```bash
+Install dependencies:
+```sh
 npm install
 ```
 
-### Development
-
-Start the development server:
-```bash
+Start dev server:
+```sh
 npm run dev
 ```
+Open: http://localhost:5173/
 
-The application will be available at `http://localhost:5173/`
-
-### Building
-
-Build the project for production:
-```bash
+Build production bundle:
+```sh
 npm run build
 ```
 
-### Testing
-
-Run tests:
-```bash
-npm test
-npm run test:watch  # Run tests in watch mode
-```
-
-### Linting
-
-Run linting checks:
-```bash
-npm run lint      # Run all linting checks
-npm run lint-ts   # ESLint for TypeScript files
-npm run lint-css  # Stylelint for CSS files
-```
-
-## Code Structure
-
-**Source Files:**
-- `src/App.tsx` - Main React component with DevExtreme Button example
-- `src/App.test.tsx` - Tests for the main component
-- `src/main.tsx` - Application entry point
-- `src/App.css` - Component styles
-- `src/index.css` - Global styles
-- `src/setupTests.ts` - Test setup configuration
-- `src/vite-env.d.ts` - Vite environment type definitions
-
-**Configuration Files:**
-- `vite.config.ts` - Vite configuration
-- `package.json` - Dependencies and scripts
-- `tsconfig.json` - TypeScript configuration
-- `vitest.config.ts` - Vitest testing configuration
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+Run linter:
+```sh
+npm run lint
 ```
 
 ## Further help
 
-You can learn more about React in the [React documentation](https://react.dev/learn).
-You can learn more about Vite in the [Vite documentation](https://vite.dev/).
-You can learn more about DevExtreme React components in the [DevExtreme React documentation](https://js.devexpress.com/React/).
+React docs: https://react.dev/learn
+Vite docs: https://vite.dev/
+DevExtreme React docs: https://js.devexpress.com/React/Documentation
 
-To get more help on DevExtreme submit an issue in the [Support Center](https://supportcenter.devexpress.com/ticket/create)
+To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).