Getting Started with React Spreadsheet Editor using Create React App

3 Jul 20262 minutes to read

This article provides a step-by-step guide for setting up a React application using Create React App and integrating React Spreadsheet Editor.

Prerequisites

Ensure the following requirements are met before starting:
System requirements for React Spreadsheet Editor

Create the React application

The recommended approach is to use the Create React App tool for initializing your project. This tool sets up a development environment and optimizes the build for production.

To create a new application using JavaScript:

npx create-react-app my-app
cd my-app

or

yarn create react-app my-app
cd my-app

To create a React application in TypeScript environment, run the following command:

npx create-react-app my-app --template typescript
cd my-app

Besides using the npx package runner tool, also create an application from the npm init. To begin with the npm init, upgrade the npm version to npm 6+.

npm init react-app my-app
cd my-app

After running the above commands, the project will be created and all required dependencies will be installed automatically.

Install Syncfusion React Spreadsheet Packages

To install the React Spreadsheet package, use the following command:

npm install @syncfusion/ej2-react-spreadsheet --save

or

yarn add @syncfusion/ej2-react-spreadsheet

Import CSS

The React Spreadsheet Editor come with built-in themes. Import the CSS styles for the Spreadsheet component and its dependent components in the src/App.css file. The example below demonstrates importing the Tailwind 3 theme.

@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';

For more details on built-in themes and usage, refer to the Themes topic.

Adding Spreadsheet component

Now, you can import the spreadsheet component into your src/App.js file.

app.jsx

import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import './App.css';
export default function App() {
    return  (<SpreadsheetComponent/>);
}

app.tsx

import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import './App.css';
export default function App() {
    return  (<SpreadsheetComponent/>);
}

Run the application

Run the app using the following commands:

npm start

or

yarn start

NOTE

Looking for the full React Spreadsheet Editor component overview, features, pricing, and documentation? Visit the React Spreadsheet Editor page.

See Also

• Getting Started with React Spreadsheet