diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md index 872e58322..6e1c5ba9a 100644 --- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md @@ -2,72 +2,51 @@ layout: post title: Getting started with React Spreadsheet component | Syncfusion description: Checkout and learn about Getting started with React Spreadsheet component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: Getting started platform: document-processing documentation: ug --- -# Getting started with React Spreadsheet component +# Getting Started with React Spreadsheet component -This section explains the steps to create a simple Spreadsheet component in a React application. +This section explains how to create a simple React application and add the [Syncfusion® React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) component with the minimum required setup. -To get start quickly with React Spreadsheet, you can check on this video: +## Prerequisites -{% youtube "https://www.youtube.com/watch?v=3Cx9AnKAHdY" %} - -## Dependencies - -The following list of dependencies are required to use the Spreadsheet component in your application: - -```js -|-- @syncfusion/ej2-react-spreadsheet - |-- @syncfusion/ej2-react-base - |-- @syncfusion/ej2-spreadsheet - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-grids - -``` +[System requirements for Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/system-requirement) -## Setup for Local Development +## Create a React application -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. +Use [`Vite`](https://vite.dev/guide/) to create a new React application, as it provides a faster development environment, smaller bundle sizes, and optimized builds. -> **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. +To create a new React application, run one of the following commands based on your preferred environment. -To create a new React application, run the following command. +{% tabs %} +{% highlight js tabtitle="JavaScript" %} -```bash -npm create vite@latest my-app -``` -To set-up a React application in TypeScript environment, run the following command. +npm create vite@latest spreadsheet-app -- --template react +cd spreadsheet-app -```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. +{% endhighlight %} +{% highlight ts tabtitle="TypeScript" %} -```bash -npm create vite@latest my-app -- --template react -cd my-app -npm run dev -``` +npm create vite@latest spreadsheet-app -- --template react-ts +cd spreadsheet-app +{% endhighlight %} +{% endtabs %} -## Adding Syncfusion® packages +## Install the Syncfusion® React Spreadsheet package -All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. To install Spreadsheet component use the following command. +Install the [React Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-react-spreadsheet) package from npm using the following command: ``` npm install @syncfusion/ej2-react-spreadsheet --save ``` -## Adding CSS reference +## Add CSS references - Add components style as given below in `src/App.css`. +Add the following style references to the `src/App.css` file. ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -82,45 +61,46 @@ npm install @syncfusion/ej2-react-spreadsheet --save @import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css'; ``` -> To refer `App.css` in the application then import it in the `src/App.tsx` file. +## Add the Syncfusion® React Spreadsheet component to the application -## Adding Spreadsheet component +Now, import the `SpreadsheetComponent` into your `src/App.jsx` or `src/App.tsx` file and render it. -Now, you can import the spreadsheet component into your `src/App.tsx` file. +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/getting-started-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/getting-started-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} -```ts -import * as React from 'react'; -import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; -import './App.css'; -export default function App() { - return (); -} -``` +> **Note:** The [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Web Services`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/web-services/webservice-overview) section. ## Run the application -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. +Run the following command to start the development server: ``` npm run dev ``` -The following example shows a basic spreadsheet component. +After the application starts, open the local URL shown in the terminal to view the React Spreadsheet Editor in the browser. -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/getting-started-cs1/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/getting-started-cs1/app/app.tsx %} -{% endhighlight %} -{% endtabs %} +The following example shows a basic spreadsheet component. - {% previewsample "/document-processing/code-snippet/spreadsheet/react/getting-started-cs1" %} +{% previewsample "/document-processing/code-snippet/spreadsheet/react/getting-started-cs1" %} > You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-components/react-spreadsheet) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/default) that shows you how to present and manipulate data. -## See Also +## Video tutorial + +To get started quickly with React Spreadsheet, you can watch this video: + +{% youtube "https://www.youtube.com/watch?v=3Cx9AnKAHdY" %} + +## See also * [Data Binding](./data-binding) -* [Open and Save](./open-save) \ No newline at end of file +* [Open Excel files](./open-excel-files) +* [Save Excel files](./save-excel-files) +* [Web Services](./web-services/webservice-overview)