Skip to content

1021957: Updated Vite details and added installation commands as tabs #2677

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sridhar-alagirisamy merged 1 commit into from
Apr 24, 2026
Merged

1021957: Updated Vite details and added installation commands as tabs #2677

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 47 additions & 67 deletions Document-Processing/Excel/Spreadsheet/React/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<sup style="font-size:70%">&reg;</sup> packages
## Install the Syncfusion® React Spreadsheet package

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. 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';
Expand All @@ -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 (<SpreadsheetComponent/>);
}
```
> **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)
* [Open Excel files](./open-excel-files)
* [Save Excel files](./save-excel-files)
* [Web Services](./web-services/webservice-overview)