Getting Started with React Spreadsheet in Create React App

27 Aug 20262 minutes to read

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

Note: Create React App (CRA) is no longer actively maintained, and the React team recommends modern build tools such as Vite or Next.js for new projects. This guide remains available for existing CRA-based projects. To start a new project with Next.js, see Getting Started with the React Spreadsheet Component in a Next.js Project.

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

You can also initialize a project with npm init react-app instead of npx. This requires npm 6 or later (npm 10+ is recommended, bundled with current Node.js LTS).

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 the required CSS styles

Themes for Spreadsheet can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

Add the required Spreadsheet theme style reference to src/App.css file. Replace the existing content with the theme import code below.

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css';

Add the Syncfusion® React Spreadsheet Component

Now, import the SpreadsheetComponent into src/App.js file and replace the existing code with the following:

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

npm start

or

yarn start

See Also