Skip to content

Commit 9eb1d08

Browse files
sridhar-alagirisamysridhar-alagirisamy
authored
Merge pull request #2345 from syncfusion-content/EJ2-1011820-dev
documentation(EJ2-1011820): Need to include the UG section to render the Spreadsheet in different React Environments.
2 parents f8aeb9b + 81c7e92 commit 9eb1d08

15 files changed

Lines changed: 539 additions & 1 deletion

‎Document-Processing-toc.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5257,8 +5257,16 @@
52575257
<ul>
52585258
<li><a href="/document-processing/excel/spreadsheet/react/overview">Overview</a></li>
52595259
<li><a href="/document-processing/excel/spreadsheet/react/getting-started">Getting Started</a></li>
5260-
<li><a href="/document-processing/excel/spreadsheet/react/nextjs-getting-started">Getting Started with NextJS</a></li>
52615260
<li><a href="/document-processing/excel/spreadsheet/react/data-binding">Data Binding</a></li>
5261+
<li>Environment Integrations
5262+
<ul>
5263+
<li><a href="/document-processing/excel/spreadsheet/react/environment-integration/nextjs-getting-started">Using with NextJS</a></li>
5264+
<li><a href="/document-processing/excel/spreadsheet/react/environment-integration/create-react-app">Using with Create React App</a></li>
5265+
<li><a href="/document-processing/excel/spreadsheet/react/environment-integration/preact">Using with Preact</a></li>
5266+
<li><a href="/document-processing/excel/spreadsheet/react/environment-integration/remix">Using with Remix</a></li>
5267+
<li><a href="/document-processing/excel/spreadsheet/react/environment-integration/sharepoint">Using with SharePoint Framework (SPFx)</a></li>
5268+
</ul>
5269+
</li>
52625270
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-files">Open Excel Files</a>
52635271
<ul>
52645272
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-file/from-aws-s3-bucket">From AWS S3</a></li>

‎Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
layout: post
3+
title: React Spreadsheet getting started with Create React App | Syncfusion
4+
description: Checkout and learn how to use the React Spreadsheet component of Syncfusion Essential JS 2 in a Create React App project.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Getting Started with Syncfusion Spreadsheet using Create React App
11+
12+
This article provides a step-by-step guide for setting up a React application using Create React App and integrating Syncfusion Spreadsheet.
13+
14+
## Prerequisites
15+
16+
Ensure the following requirements are met before starting:
17+
[System requirements for Syncfusion React Spreadsheet](https://ej2.syncfusion.com/react/documentation/system-requirement)
18+
19+
## Create the React application
20+
21+
The recommended approach is to use the [`Create React App`](https://github.com/facebook/create-react-app) tool for initializing your project. This tool sets up a development environment and optimizes the build for production.
22+
23+
To create a new application using JavaScript:
24+
25+
```bash
26+
npx create-react-app my-app
27+
cd my-app
28+
```
29+
30+
or
31+
32+
```bash
33+
yarn create react-app my-app
34+
cd my-app
35+
```
36+
37+
To create a React application in `TypeScript` environment, run the following command:
38+
39+
```bash
40+
npx create-react-app my-app --template typescript
41+
cd my-app
42+
```
43+
44+
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`+.
45+
46+
```bash
47+
npm init react-app my-app
48+
cd my-app
49+
```
50+
51+
After running the above commands, the project will be created and all required dependencies will be installed automatically.
52+
53+
## Install Syncfusion React Spreadsheet Packages
54+
55+
To install the React Spreadsheet package, use the following command:
56+
57+
```bash
58+
npm install @syncfusion/ej2-react-spreadsheet --save
59+
```
60+
or
61+
62+
```bash
63+
yarn add @syncfusion/ej2-react-spreadsheet
64+
```
65+
66+
## Import CSS
67+
68+
Syncfusion React Spreadsheet come with built-in [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme). 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.
69+
70+
```css
71+
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
72+
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
73+
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
74+
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
75+
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
76+
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
77+
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
78+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
79+
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
80+
@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css';
81+
```
82+
83+
For more details on built-in themes and usage, refer to the [Themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme).
84+
85+
## Adding Spreadsheet component
86+
87+
Now, you can import the spreadsheet component into your `src/App.js` file.
88+
89+
{% tabs %}
90+
{% highlight js tabtitle="app.jsx" %}
91+
import * as React from 'react';
92+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
93+
import './App.css';
94+
export default function App() {
95+
return (<SpreadsheetComponent/>);
96+
}
97+
{% endhighlight %}
98+
{% highlight ts tabtitle="app.tsx" %}
99+
import * as React from 'react';
100+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
101+
import './App.css';
102+
export default function App() {
103+
return (<SpreadsheetComponent/>);
104+
}
105+
{% endhighlight %}
106+
{% endtabs %}
107+
108+
## Run the application
109+
Run the app using the following commands:
110+
111+
```bash
112+
npm start
113+
```
114+
115+
or
116+
117+
```bash
118+
yarn start
119+
```
120+
121+
## See Also
122+
* [Getting Started with Syncfusion React Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)

Document-Processing/Excel/Spreadsheet/React/nextjs-getting-started.md renamed to Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md

File renamed without changes.

‎Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
layout: post
3+
title: React Spreadsheet getting started with Preact | Syncfusion
4+
description: Checkout and learn how to use the React Spreadsheet component of Syncfusion Essential JS 2 in a Preact project.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Getting started with Syncfusion React Spreadsheet in Preact
11+
12+
This article outlines the steps required to set up a [`Preact`](https://preactjs.com) project and integrate Syncfusion React Spreadsheet.
13+
14+
`Preact` is a fast, lightweight JavaScript library that provides a modern API similar to React. It is optimized for minimal file size and fast performance, making it well-suited for projects where load time and bundle size are important.
15+
16+
## Prerequisites
17+
18+
Ensure the following requirements are met before starting:
19+
[System requirements for Syncfusion React Spreadsheet](https://ej2.syncfusion.com/react/documentation/system-requirement)
20+
21+
## Set up the Preact project
22+
23+
To create a new Preact project, use one of the commands that are specific to either NPM or Yarn.
24+
25+
```bash
26+
npm init preact@latest
27+
```
28+
or
29+
30+
```bash
31+
yarn create preact
32+
```
33+
34+
Using one of the above commands will lead you to set up additional configurations for the project, as below:
35+
36+
**Step 1: Define the project name** - You can specify the name of the project directly. Let’s specify the name of the project as `my-project` for this article.
37+
38+
```bash
39+
T Preact - Fast 3kB alternative to React with the same modern API
40+
|
41+
* Project directory:
42+
| my-project
43+
—
44+
```
45+
46+
**Step 2: Choose the project language** - Select JavaScript as the framework variant to build this Preact project using JavaScript.
47+
48+
```bash
49+
T Preact - Fast 3kB alternative to React with the same modern API
50+
|
51+
* Project language:
52+
| > JavaScript
53+
| TypeScript
54+
—
55+
```
56+
57+
**Step 3: Configure project options** - Configure the project as shown below for this article.
58+
59+
```bash
60+
T Preact - Fast 3kB alternative to React with the same modern API
61+
|
62+
* Use router?
63+
| Yes / > No
64+
—
65+
|
66+
* Prerender app (SSG)?
67+
| Yes / > No
68+
—
69+
|
70+
* Use ESLint?
71+
| Yes / > No
72+
—
73+
```
74+
75+
**Step 4: Navigate to the project directory** - After completing the above steps to create `my-project`, navigate to the project directory using the following command:
76+
77+
```bash
78+
cd my-project
79+
```
80+
81+
Ensure your HTML has a mount point for the app. For example, in `index.html` add:
82+
83+
84+
```html
85+
<div id="app"></div>
86+
```
87+
88+
Now that `my-project` is ready to run with default settings, let’s add Syncfusion components to the project.
89+
90+
## Install Syncfusion React packages.
91+
92+
To install the React Spreadsheet component package, use the following command:
93+
94+
```bash
95+
npm install @syncfusion/ej2-react-spreadsheet --save
96+
```
97+
or
98+
99+
```bash
100+
yarn add @syncfusion/ej2-react-spreadsheet
101+
```
102+
103+
## Adding CSS reference
104+
105+
Import the Syncfusion® component themes in the `src/style.css` file as shown below:
106+
107+
```css
108+
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
109+
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
110+
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
111+
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
112+
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
113+
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
114+
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
115+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
116+
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
117+
@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css';
118+
```
119+
120+
## Adding Spreadsheet component
121+
122+
Add the React Spreadsheet component in `src/index.js` file using the following code:
123+
124+
```js
125+
import * as React from 'react';
126+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
127+
import './App.css';
128+
export default function App() {
129+
return (<SpreadsheetComponent/>);
130+
}
131+
```
132+
133+
134+
## Run the project
135+
To run the project, use the following command:
136+
137+
```bash
138+
npm run dev
139+
```
140+
or
141+
142+
```bash
143+
yarn run dev
144+
```
145+
146+
## See also
147+
148+
[Getting Started with Syncfusion React Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)

0 commit comments

Comments
 (0)