Merge pull request #1 from SyncfusionExamples/dev

thangavele · web-flow · commit 0fbb785fdc59 · 2023-09-21T15:32:48.000+05:30
Updating the README.md
diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
 # How to Integrate Syncfusion EJ2 React Components in Laravel project
+
 The following steps is used to Integrate Syncfusion EJ2 React Rich Text Editor in Laravel using Vite.
 
 Skip to the getting started section if you have already configured the environment.
 
 ## Prerequisites
 
 Before getting started with Syncfusion React Rich Text Editor component in Laravel using Vite, check whether the following are installed in the developer machine.
+
 * [PHP](https://www.php.net/downloads.php) - To download PHP.
 * [Node.js](https://nodejs.org/en/download/) - To download Node.js.
 * [Laravel](https://laravel.com/docs/8.x/installation) - To install Laravel.
@@ -34,7 +36,6 @@ composer global require laravel/installer
 
 ## Create a Laravel project
 
-
 #### For Windows users
 
 ```bash
@@ -47,35 +48,44 @@ Now change the directory to the example-app folder.
 cd example-app
 ```
 
-
 ## Getting started from Laravel Project
 
+This section describes how to add the React, EJ2 Components from scratch to the Laravel Project.
+
 ### 1. Install dependencies
-This section describes how to add the React, EJ2
+
 In the command prompt, run the following commands to install the dependencies.
 
 If you are cloning the github repository please goto Run the project.
 
 Install the dependencies of the laravel project.
+
 ```bash
 composer install
 ```
+
 If you are getting any error while installing the dependencies, run the following command.
+
 ```bash
 composer install --ignore-platform-req=ext-fileinfo
 ```
 
 Install the React js dependencies.
+
 ```bash
 npm install react react-dom @vitejs/plugin-react 
 ```
+
 Install the Syncfusion EJ2 React Rich Text Editor package.
+
 ```bash
 npm install @syncfusion/ej2-react-richtexteditor
 ```
 
 ### 2. Configure the vite.config.js file
+
 Add the following code to the vite.config.js file in the root directory of the project.
+
 ```js
 import { defineConfig } from "vite";
 import laravel from "laravel-vite-plugin";
@@ -94,7 +104,9 @@ export default defineConfig({
 ```
 
 ### 3. Add the root element to the welcome.blade.php file
+
 Add the root element to the welcome.blade.php file in the resources/views folder.
+
 ``` html
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@@ -123,6 +135,7 @@ Add the root element to the welcome.blade.php file in the resources/views folder
 ### 4. Add the following code to the app.jsx file to mount the React application
 
 Rename the `app.js` to `app.jsx` and mount the React component.
+
 ```js
 //Import and create a React root component
 import React from "react";
@@ -134,6 +147,7 @@ ReactDOM.render(<Welcome />, document.getElementById("app"));
 ```
 
 ### 5. Create a Welcome.React file in the resources/js folder and add the following code
+
 ```jsx
 
 import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
@@ -189,8 +203,13 @@ export default Welcome;
 ```
 
 ## Run the Project
+
+To run the application run the following commands.
+
 ### 1. Build the project
+
 To build the project, run the following command.
+
 ```bash
 npm run build
 ```
@@ -204,9 +223,11 @@ php artisan key:generate
 ```
 
 ### 3. Run the project
+
 To run the project, run the following command.
+
 ```bash
 php artisan serve
 ```
 
-Visit http://localhost:8000 in your browser to see the Laravel application with the integrated Syncfusion EJ2 React Rich Text Editor.
+Visit <http://localhost:8000> in your browser to see the Laravel application with the integrated Syncfusion EJ2 React Rich Text Editor.
