Getting Started with the React Spreadsheet Editor in Create React App

22 Jul 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

Add CSS references

Add the following Spreadsheet and dependent component style references to the src/App.css file. Replace the existing content with the theme import code below.

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

Note: This example uses the Tailwind3 theme. To use a different built-in theme, replace the tailwind3.css references with the corresponding theme stylesheets. Refer to the Themes documentation for information about the available themes and the different ways to include theme styles in a React application.

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