1046476: UG documentation of React DOCX Editor Syncfusion CLI

Document-Processing/Word/Word-Processor/react/getting-started.md

@@ -10,125 +10,134 @@ domainurl: ##DomainURL##
 
 # Getting started with React DOCX Editor
 
-[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a React application. 
+[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a React application.
 
 {% tabcontents %}
 
-{% tabcontent TypeScript %}
+{% tabcontent Syncfusion CLI %}
 
-## Prerequisites
+## Install the Syncfusion CLI 
 
-* [System requirements for React components](https://ej2.syncfusion.com/react/documentation/system-requirement)
-* [Browser Compatibility](https://ej2.syncfusion.com/react/documentation/browser)
+Install the Syncfusion CLI globally using the following command:
 
-## Create a new React application
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
 
-To set up a React application in a TypeScript environment, run the following commands:
+npm install -g @syncfusion/syncfusion-cli
 
-```bash
-npm create vite@latest documenteditor-app -- --template react-ts
-cd documenteditor-app
-```
+{% endhighlight %}
+{% endtabs %}
 
-## Install the React DOCX Editor npm package
+## Set up the Vite project using Syncfusion CLI
 
-The DOCX Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
+You can create a React Vite application using the Syncfusion CLI. The CLI provides two ways to create a project:
 
+### Non-interactive mode
 
-To install the DOCX Editor component, use the following command:
+Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.
 
-```bash
-npm install @syncfusion/ej2-react-documenteditor --save
-```
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
 
-## Register a Syncfusion License Key
+sf new syncfusion-react-app --framework react --template DOCX-Editor --theme tailwind3
 
-Before initializing the React DOCX Editor control, generate a Syncfusion license key and register it in your application.
+{% endhighlight %}
+{% endtabs %}
 
-- [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate)
-- [Register a Syncfusion License Key in React](https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration)
+In this mode, the project configuration is passed directly in the command. The above command creates a React Vite application configured with the Syncfusion<sup style="font-size:70%">&reg;</sup> `DOCX Editor` component.
 
-## Import the required CSS styles
+### Interactive mode
 
-Add the DOCX Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file.
+Interactive mode guides you through the project creation process with step-by-step prompts.
 
 {% tabs %}
-{% highlight css tabtitle="index.css" %}
+{% highlight bash tabtitle="CMD" %}
 
-@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-popups/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-splitbuttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-react-documenteditor/styles/tailwind3.css';
+sf
 
 {% endhighlight %}
 {% endtabs %}
 
-N> This example uses the `Tailwind 3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application.
+When you run the `sf` command, the CLI prompts you to select the required project configuration. To create a React Vite application with the Syncfusion<sup style="font-size:70%">&reg;</sup> `DOCX Editor` component, select the following options:
 
-## Initialize the DOCX Editor
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+√ Project name? ... Syncfusion-react-app
+√ Choose Framework: » React
+√ Choose Build Tool: » Vite
+√ Choose Language: » JavaScript
+√ Choose Template: » DOCX-Editor
+√ Choose Theme: » Tailwind3
+√ Choose Style Format: » CSS
+√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
+√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no      
+√ Install dependencies and start app now? ... no
 
-Add the DOCX Editor component to your application. In the `src/App.tsx` file, add the following code to initialize the component:
+{% endhighlight %}
+{% endtabs %}
 
-{% tabs %}
-{% highlight ts tabtitle="App.tsx" %}
+The above selections generate a React Vite application configured with the Syncfusion<sup style="font-size:70%">&reg;</sup> `DOCX Editor` component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.
 
-import * as React from 'react';
-import {
-  DocumentEditorContainerComponent,
-  Toolbar
-} from '@syncfusion/ej2-react-documenteditor';
+The Syncfusion<sup style="font-size:70%">&reg;</sup> CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.
 
-DocumentEditorContainerComponent.Inject(Toolbar);
+## Run the project
 
-function App() {
-  return (
-<DocumentEditorContainerComponent 
-            id="container" 
-            height="590px" 
-            // Use the following service URL only for demo purposes
-            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
-            enableToolbar={true}
-        />
-  );
-}
+Once the project is created, navigate to the project directory and run the following commands in your terminal.
 
-export default App;
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+cd syncfusion-react-app
+npm install
+npm run dev
 
 {% endhighlight %}
 {% endtabs %}
 
-N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
+The output will appear as follows:
 
-## Run the application
-
-Run the application using the following command:
-
-```bash
-npm run dev
-```
+![Output of React DOCX Editor Using Syncfusion CLI](./images/syncfusion_cli_getting_started.png)
 
 {% endtabcontent %}
 
-{% tabcontent JavaScript %}
+{% tabcontent Vite CLI %}
 
 ## Prerequisites
 
+{% tabcontents %}
+{% tabcontent TypeScript %}
+* [System requirements for React components](https://ej2.syncfusion.com/react/documentation/system-requirement)
+* [Browser Compatibility](https://ej2.syncfusion.com/react/documentation/browser)
+{% endtabcontent %}
+
+{% tabcontent JavaScript %}
 * [System requirements for DOCX Editor](https://ej2.syncfusion.com/react/documentation/system-requirement)
 * [Browser Compatibility](https://ej2.syncfusion.com/react/documentation/browser)
+{% endtabcontent %}
+{% endtabcontents %}
 
 ## Create a new React application
 
+{% tabcontents %}
+{% tabcontent TypeScript %}
+To set up a React application in a TypeScript environment, run the following commands:
+
+```bash
+npm create vite@latest documenteditor-app -- --template react-ts
+cd documenteditor-app
+```
+{% endtabcontent %}
+
+{% tabcontent JavaScript %}
 To set up a React application in a JavaScript environment, run the following commands:
 
 ```bash
 npm create vite@latest documenteditor-app -- --template react
 cd documenteditor-app
 ```
+{% endtabcontent %}
+{% endtabcontents %}
 
 ## Install the React DOCX Editor npm package
 
@@ -146,11 +155,11 @@ npm install @syncfusion/ej2-react-documenteditor --save
 Before initializing the React DOCX Editor control, generate a Syncfusion license key and register it in your application.
 
 - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate)
-- [Register a Syncfusion License Key in React](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#reactjs)
+- [Register a Syncfusion License Key in React](https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration)
 
 ## Import the required CSS styles
 
-Add the DOCX Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file:
+Add the DOCX Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file.
 
 {% tabs %}
 {% highlight css tabtitle="index.css" %}
@@ -168,8 +177,44 @@ Add the DOCX Editor component and its dependent component styles available in th
 {% endhighlight %}
 {% endtabs %}
 
+N> This example uses the `Tailwind 3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application.
+
 ## Initialize the DOCX Editor
 
+{% tabcontents %}
+{% tabcontent TypeScript %}
+Add the DOCX Editor component to your application. In the `src/App.tsx` file, add the following code to initialize the component:
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+
+import * as React from 'react';
+import {
+  DocumentEditorContainerComponent,
+  Toolbar
+} from '@syncfusion/ej2-react-documenteditor';
+
+DocumentEditorContainerComponent.Inject(Toolbar);
+
+function App() {
+  return (
+<DocumentEditorContainerComponent 
+            id="container" 
+            height="590px" 
+            // Use the following service URL only for demo purposes
+            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
+            enableToolbar={true}
+        />
+  );
+}
+
+export default App;
+
+{% endhighlight %}
+{% endtabs %}
+{% endtabcontent %}
+
+{% tabcontent JavaScript %}
 Add the DOCX Editor component to your application. In the `src/App.jsx` file, add the following code to initialize the component:
 
 {% tabs %}
@@ -195,6 +240,8 @@ export default App;
 
 {% endhighlight %}
 {% endtabs %}
+{% endtabcontent %}
+{% endtabcontents %}
 
 N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
 
@@ -205,9 +252,6 @@ Run the application using the following command:
 ```bash
 npm run dev
 ```
-{% endtabcontent %}
-
-{% endtabcontents %}
 
 After the application starts, open the localhost URL shown in the terminal. The React DOCX Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
 
@@ -219,6 +263,10 @@ You can also explore the DOCX Editor interactively using the live sample below.
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/React-DOCX-Editor-Examples/tree/master/getting-started).
 
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 ## Online Demo
 
 Explore how to create, edit, and print Word documents using the React DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/default).