1011820: Addressed review comments.

Author: DinakarSF4212

Document-Processing/Excel/Spreadsheet/React/Environment Integrations/create-react-app.md

@@ -22,28 +22,28 @@ The recommended approach is to use the [`Create React App`](https://github.com/f
 
 To create a new application using JavaScript:
 
-```
+```bash
 npx create-react-app my-app
 cd my-app
 ```
 
 or
 
-```
+```bash
 yarn create react-app my-app
 cd my-app
 ```
 
 To create a React application in `TypeScript` environment, run the following command:
 
-```
+```bash
 npx create-react-app my-app --template typescript
 cd my-app
 ```
 
 Besides using the [npx](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`+.
 
-```
+```bash
 npm init react-app my-app
 cd my-app
 ```
@@ -54,13 +54,13 @@ After running the above commands, the project will be created and all required d
 
 To install the React Spreadsheet package, use the following command:
 
-```
+```bash
 npm install @syncfusion/ej2-react-spreadsheet --save
 ```
 or
 
-```
-yarn add @syncfusion/ej2-react-grids
+```bash
+yarn add @syncfusion/ej2-react-spreadsheet
 ```
 
 ## Import CSS
@@ -108,13 +108,13 @@ export default function App() {
 ## Run the application
 Run the app using the following commands:
 
-```
+```bash
 npm start
 ```
 
 or
 
-```
+```bash
 yarn start
 ```
 

Document-Processing/Excel/Spreadsheet/React/Environment Integrations/preact.md

@@ -22,20 +22,20 @@ Ensure the following requirements are met before starting:
 
 To create a new Preact project, use one of the commands that are specific to either NPM or Yarn.
 
-```
+```bash
 npm init preact@latest
 ```
 or
 
-```
+```bash
 yarn create preact
 ```
 
 Using one of the above commands will lead you to set up additional configurations for the project, as below:
 
 **Step 1: Define the project name** - You can specify the name of the project directly. Let’s specify the name of the project as `my-project` for this article.
 
-```
+```bash
 T  Preact - Fast 3kB alternative to React with the same modern API
 |
 *  Project directory:
@@ -45,7 +45,7 @@ T  Preact - Fast 3kB alternative to React with the same modern API
 
 **Step 2: Choose the project language** - Select JavaScript as the framework variant to build this Preact project using JavaScript.
 
-```
+```bash
 T  Preact - Fast 3kB alternative to React with the same modern API
 |
 *  Project language:
@@ -56,7 +56,7 @@ T  Preact - Fast 3kB alternative to React with the same modern API
 
 **Step 3: Configure project options** - Configure the project as shown below for this article.
 
-```
+```bash
 T  Preact - Fast 3kB alternative to React with the same modern API
 |
 *  Use router?
@@ -74,14 +74,14 @@ T  Preact - Fast 3kB alternative to React with the same modern API
 
 **Step 4: Navigate to the project directory** - After completing the above steps to create `my-project`, navigate to the project directory using the following command:
 
-```
+```bash
 cd my-project
 ```
 
 Ensure your HTML has a mount point for the app. For example, in `index.html` add:
 
 
-```
+```html
 <div id="app"></div>
 ```
 
@@ -91,12 +91,12 @@ Now that `my-project` is ready to run with default settings, let’s add Syncfus
 
 To install the React Spreadsheet component package, use the following command:
 
-```
+```bash
 npm install @syncfusion/ej2-react-spreadsheet --save
 ```
 or
 
-```
+```bash
 yarn add @syncfusion/ej2-react-spreadsheet
 ```
 
@@ -105,16 +105,16 @@ yarn add @syncfusion/ej2-react-spreadsheet
 Import the Syncfusion® component themes in the `src/style.css` file as shown below:
 
 ```css
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css';
 ```
 
 ## Adding Spreadsheet component
@@ -134,16 +134,15 @@ export default function App() {
 ## Run the project
 To run the project, use the following command:
 
-```
+```bash
 npm run dev
 ```
 or
 
-```
+```bash
 yarn run dev
 ```
 
-
 ## See also
 
 [Getting Started with Syncfusion React Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)

Document-Processing/Excel/Spreadsheet/React/Environment Integrations/remix.md

@@ -33,15 +33,15 @@ Remix automatically manages loading states during navigation or data fetching. D
 
 To set up a basic Remix sample, run the following command:
 
-```
+```bash
 npx create-react-router@latest
 ```
 
 The `create-react-router@latest` command create a remix app using the latest package versions.
 
 When you run this command, you will be asked the following questions.
 
-```
+```bash
    dir   Where should we create your new project?
          ./my-react-router-app
 
@@ -57,15 +57,15 @@ When you run this command, you will be asked the following questions.
 
 Navigate into the project directory with the below command and install the `react-router` package:
 
-```
+```bash
 cd my-react-router-app
 ```
 
 ## Adding Syncfusion Spreadsheet package
 
 To include the React Spreadsheet component in your project, use the following command:
 
-```
+```bash
 npm install @syncfusion/ej2-react-spreadsheet --save
 ```
 
@@ -74,23 +74,23 @@ npm install @syncfusion/ej2-react-spreadsheet --save
 Import the Syncfusion® component themes in the `app.css` file as shown below:
 
 ```css
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css';
 ```
 
 ## Configure Server-Side Rendering (SSR)
 
 For Syncfusion React Spreadsheet to function with Remix server-side rendering (via Vite), update your `vite.config.ts` file as shown:
 
-```
+```js
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -128,18 +128,18 @@ export default function Index() {
 
 Start your Remix application in development mode:
 
-```
+```bash
 npm run dev
 ```
 
 For deployment, build your app for production,
-```
+```bash
 npm run build
 ```
 
 Then run the app in production mode:
 
-```
+```bash
 npm run start
 ```
 

Document-Processing/Excel/Spreadsheet/React/Environment Integrations/sharepoint.md

@@ -5,7 +5,6 @@ description: Quickstart to integrate the Syncfusion React Spreadsheet into an SP
 control: Spreadsheet
 platform: document-processing
 documentation: ug
-domainurl: ##DomainURL##
 ---
 
 # Getting Started with React Spreadsheet in the SharePoint Framework
@@ -25,13 +24,13 @@ Create a new SPFx project using the following command:
 
 **Step 1:** To initiate the creation of a new SharePoint project, use the following command:
 
-```
+```bash
 yo @microsoft/sharepoint
 ```
 
 **Step 2:** Specify the name of the project as `my-project` and the name of the WebPart as `App` for this article. You will be prompted with a series of configuration questions as shown below:
 
-```
+```bash
 Let's create a new Microsoft 365 solution.
 ? What is your solution name? my-project
 ? Which type of client-side component to create? WebPart
@@ -42,7 +41,7 @@ Add new Web part to solution my-project.
 
 **Step 3:** To establish trust for the certificate in the development environment, execute the following command:
 
-```
+```bash
 gulp trust-dev-cert
 ```
 
@@ -52,7 +51,7 @@ With these steps complete, your `my-project` SharePoint Framework solution is re
 
 To install the React Spreadsheet component package, use the following command:
 
-```
+```bash
 npm install @syncfusion/ej2-react-spreadsheet --save
 ```
 
@@ -61,20 +60,38 @@ Themes for Syncfusion React Spreadsheet can be applied using CSS files from npm
 
 This example demonstrates importing the Material theme CSS within the `App.tsx` file located at `~/src/webparts/app/components/App.tsx`:
 
-```
+```ts
+require('@syncfusion/ej2-base/styles/tailwind3.css');
+require('@syncfusion/ej2-inputs/styles/tailwind3.css');
+require('@syncfusion/ej2-buttons/styles/tailwind3.css');
+require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css');
+require('@syncfusion/ej2-lists/styles/tailwind3.css');
+require('@syncfusion/ej2-navigations/styles/tailwind3.css');
+require('@syncfusion/ej2-popups/styles/tailwind3.css');
+require('@syncfusion/ej2-dropdowns/styles/tailwind3.css');
+require('@syncfusion/ej2-grids/styles/tailwind3.css');
 require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css');
 ```
 
 ## Add Spreadsheet Component
 
 Add the below code in the App.tsx file inside the ~/src/webparts/app/components folder to render the spreadsheet.
 
-```
+```ts
 import * as React from 'react';
 import { IAppProps } from './IAppProps';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 
-require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css');
+require('@syncfusion/ej2-base/styles/tailwind3.css');
+require('@syncfusion/ej2-inputs/styles/tailwind3.css');
+require('@syncfusion/ej2-buttons/styles/tailwind3.css');
+require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css');
+require('@syncfusion/ej2-lists/styles/tailwind3.css');
+require('@syncfusion/ej2-navigations/styles/tailwind3.css');
+require('@syncfusion/ej2-popups/styles/tailwind3.css');
+require('@syncfusion/ej2-dropdowns/styles/tailwind3.css');
+require('@syncfusion/ej2-grids/styles/tailwind3.css');
+require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css');;
 
 export default class App extends React.Component<IAppProps, {}> {
   
@@ -87,7 +104,7 @@ export default class App extends React.Component<IAppProps, {}> {
 ## Run the project
 To run the project, use the following command:
 
-```
+```bash
 gulp serve
 ```