Integrated latest changes at 05-08-2025 7:32:01 PM

Author: SyncfusionBuild

ej2-react/accordion/getting-started.md

@@ -28,40 +28,30 @@ The following list of dependencies are required to use the React Accordion compo
 
 ## Setup for Local Development
 
-To set-up a React application, choose any of the following ways. The best and easiest way is to use the [create-react-app](https://github.com/facebook/create-react-app). It sets up your development environment in JavaScript and improvise your application for production. Refer to the [installation instructions](https://github.com/facebook/create-react-app#creating-an-app) of `create-react-app`.
+To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
 
-```bash
-npx create-react-app my-app
-cd my-app
-npm start
-```
+> **Note:**  To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
 
-or
+To create a new React application, run the following command.
 
 ```bash
-yarn create react-app my-app
-cd my-app
-yarn start
+npm create vite@latest my-app
 ```
-
-To set-up a React application in `TypeScript` environment, run the following command.
+To set-up a React application in TypeScript environment, run the following command.
 
 ```bash
-npx create-react-app my-app --template typescript
+npm create vite@latest my-app -- --template react-ts
 cd my-app
-npm start
+npm run dev
 ```
-
-Besides using the [npm](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) package runner tool, also create an application from the `npm init`. To begin with the `npm init`, upgrade the `npm` version to `npm 6+`.
+To set-up a React application in JavaScript environment, run the following command.
 
 ```bash
-npm init react-app my-app
+npm create vite@latest my-app -- --template react
 cd my-app
-npm start
+npm run dev
 ```
 
-
-
 ## Adding Syncfusion<sup style="font-size:70%">&reg;</sup> packages
 
 All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
@@ -83,17 +73,17 @@ npm install @syncfusion/ej2-react-navigations --save
 
 ```
 
-> To refer `App.css` in the application then import it in the `src/App.ts` file.
+> To refer `App.css` in the application then import it in the `src/App.tsx` file.
 
 ## Initialize the Accordion using Items
 
 The React Accordion can be rendered by defining an array of [`items`](https://ej2.syncfusion.com/react/documentation/api/accordion/#items).
 
-* Import the Accordion component to your `src/App.ts` file using following code.
+* Import the Accordion component to your `src/App.tsx` file using following code.
 
 
 
-```ts
+```tsx
 import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-react-navigations';
 import * as React from 'react';
 
@@ -132,10 +122,10 @@ export default ReactApp;
 
 
 
-* Run the application in the browser using the following command.
+Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
 
 ```
-npm start
+npm run dev
 ```
         
 {% previewsample "page.domainurl/code-snippet/accordion/accordion-cs4" %}
@@ -161,10 +151,10 @@ You need to follow the below structure of HTML elements to render the Accordion.
 ```
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="app.jsx" %}
 {% include code-snippet/accordion/accordion-cs5/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 {% include code-snippet/accordion/accordion-cs5/app/index.tsx %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}

ej2-react/ai-assistview/accessibility.md

@@ -73,4 +73,4 @@ The AI AssistView component's accessibility levels are ensured through an [acces
 
 ## See also
 
-* [Accessibility in Syncfusion React components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> React components](../common/accessibility)

ej2-react/ai-assistview/getting-started.md

@@ -61,9 +61,9 @@ cd my-app
 npm start
 ```
 
-## Adding Syncfusion packages
+## Adding Syncfusion<sup style="font-size:70%">&reg;</sup> packages
 
-All the available Essential JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install.
+All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install.
 
 To install AI AssistView component, use the following command
 

ej2-react/appbar/getting-started.md

@@ -25,40 +25,30 @@ The following list of dependencies are required to use the AppBar component in y
 
 ## Setup your development environment
 
-To set-up a React application, choose any of the following ways. The best and easiest way is to use the [create-react-app](https://github.com/facebook/create-react-app). It sets up your development environment in JavaScript and improvise your application for production. Refer to the [installation instructions](https://github.com/facebook/create-react-app#creating-an-app) of `create-react-app`.
+To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
 
-```bash
-npx create-react-app my-app
-cd my-app
-npm start
-```
+> **Note:**  To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
 
-or
+To create a new React application, run the following command.
 
 ```bash
-yarn create react-app my-app
-cd my-app
-yarn start
+npm create vite@latest my-app
 ```
-
-To set-up a React application in `TypeScript` environment, run the following command.
+To set-up a React application in TypeScript environment, run the following command.
 
 ```bash
-npx create-react-app my-app --template typescript
+npm create vite@latest my-app -- --template react-ts
 cd my-app
-npm start
+npm run dev
 ```
-
-Besides using the [npm](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) package runner tool, also create an application from the `npm init`. To begin with the `npm init`, upgrade the `npm` version to `npm 6+`.
+To set-up a React application in JavaScript environment, run the following command.
 
 ```bash
-npm init react-app my-app
+npm create vite@latest my-app -- --template react
 cd my-app
-npm start
+npm run dev
 ```
 
-
-
 ## Adding Syncfusion<sup style="font-size:70%">&reg;</sup> packages
 
 All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
@@ -85,11 +75,11 @@ Add AppBar component's styles as given below in `App.css`.
 
 ## Add AppBar to the project
 
-Now, you can create `AppBar` component in the application. Add `AppBar` component in `src/App.ts` file using the following code snippet.
+Now, you can create `AppBar` component in the application. Add `AppBar` component in `src/App.tsx` file using the following code snippet.
 
 
 
-```ts
+```tsx
 import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
 import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
 import * as React from "react";
@@ -112,10 +102,10 @@ export default App;
 
 ## Run the application
 
-Run the application in the browser using the following command:
+Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
 
 ```
-npm start
+npm run dev
 ```
 
  {% previewsample "page.domainurl/code-snippet/appbar/getting-started-cs1" %}

ej2-react/auto-complete/getting-started.md

@@ -35,18 +35,29 @@ The following list of dependencies are required to use the `AutoComplete` compon
 
 ## Installation and configuration
 
-You can use [`Create-react-app`](https://github.com/facebook/create-react-app) to setup the applications. To install `create-react-app` run the following command.
+To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
 
-   ```bash
-    npm install -g create-react-app
-   ```
+> **Note:**  To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
 
-Start a new project using create-react-app command as follows
+To create a new React application, run the following command.
 
-   ```bash
-    create-react-app quickstart --scripts-version=react-scripts-ts
-    cd quickstart
-  ```
+```bash
+npm create vite@latest my-app
+```
+To set-up a React application in TypeScript environment, run the following command.
+
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm run dev
+```
+To set-up a React application in JavaScript environment, run the following command.
+
+```bash
+npm create vite@latest my-app -- --template react
+cd my-app
+npm run dev
+```
 
 ## Adding syncfusion<sup style="font-size:70%">&reg;</sup> packages
 
@@ -55,9 +66,7 @@ All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages
 To install AutoComplete component, use the following command
 
 ```bash
-
 npm install @syncfusion/ej2-react-dropdowns --save
-
 ```
 
 ## Adding AutoComplete component
@@ -68,7 +77,7 @@ Add the below code in the `src/App.tsx` to initialize the AutoComplete.
 
 `[Class-component]`
 
-```ts
+```tsx
 
 import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
 import * as React from 'react';
@@ -87,7 +96,7 @@ ReactDOM.render(<App />, document.getElementById('sample'));
 
 `[Functional-component]`
 
-```ts
+```tsx
 import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
 import * as React from 'react';
 import * as ReactDOM from "react-dom";
@@ -121,7 +130,7 @@ After initialization, populate the data using [`dataSource`](https://ej2.syncfus
 
 `[Class-component]`
 
-```ts
+```tsx
 
 import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
 import * as React from 'react';
@@ -142,7 +151,7 @@ ReactDOM.render(<App />, document.getElementById('sample'));
 
 `[Functional-component]`
 
-```ts
+```tsx
 
 import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
 import * as React from 'react';
@@ -161,19 +170,19 @@ ReactDOM.render(<App />, document.getElementById('sample'));
 
 ## Run the application
 
-After completing the configuration required to render a basic  AutoComplete, run the following command to display the output in your default browser.
+Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
 
 ```
-npm start
+npm run dev
 ```
 
 `[Class-component]`
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="app.jsx" %}
 {% include code-snippet/dropdownlist/basic-cs3/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 {% include code-snippet/dropdownlist/basic-cs3/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -183,10 +192,10 @@ npm start
 `[Functional-component]`
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="app.jsx" %}
 {% include code-snippet/dropdownlist/basic-cs4/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 {% include code-snippet/dropdownlist/basic-cs4/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -204,10 +213,10 @@ In the following sample, popup list's width and height are configured.
 `[Class-component]`
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="app.jsx" %}
 {% include code-snippet/autocomplete/basic-cs19/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 {% include code-snippet/autocomplete/basic-cs19/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -217,10 +226,10 @@ In the following sample, popup list's width and height are configured.
 `[Functional-component]`
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="app.jsx" %}
 {% include code-snippet/autocomplete/basic-cs20/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 {% include code-snippet/autocomplete/basic-cs20/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}