sheetjs/docs.sheetjs.com
1
Fork 5
Code Issues1 Pull Requests2 Projects Releases Wiki Activity

chore: updated React demo deployment instructions and version info

Browse Source 
changes include:
- update test deployment versions and dates fro ViteJS, NextJS
- add CRA compatibility warning for React19+
- add dependency fix instruction for CRA
- refine NextJS deployment --no-turbopack flag
- remove unused React import - JSX transform handles conversion
This commit is contained in:
Asad Karimov 2024-12-12 15:13:34 -05:00
parent a9be043a0a
commit 61ec7ad63c
1 changed files with 35 additions and 23 deletions

58
docz/docs/03-demos/02-frontend/02-react.md

@ -277,27 +277,24 @@ This complete component example fetches a test file and displays the contents in
a HTML table. When the export button is clicked, a callback will export a file: a HTML table. When the export button is clicked, a callback will export a file:
```jsx title="src/SheetJSReactAoO.js" ```jsx title="src/SheetJSReactAoO.js"
import React, { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { read, utils, writeFileXLSX } from 'xlsx'; import { read, utils, writeFileXLSX } from 'xlsx';
export default function SheetJSReactAoO() { export default function SheetJSReactAoO() {
/* the component state is an array of presidents */ /* the component state is an array of presidents */
const [pres, setPres] = useState([]); const [pres, setPres] = useState([] /* as any[] */);
/* Fetch and update the state once */ /* Fetch and update the state once */
useEffect(() => { (async() => { useEffect(() => { (async() => {
const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer(); const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer();
// highlight-start
const wb = read(f); // parse the array buffer const wb = read(f); // parse the array buffer
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
const data = utils.sheet_to_json(ws); // generate objects const data = utils.sheet_to_json(ws); // generate objects
setPres(data); // update state setPres(data); // update state
// highlight-end
})(); }, []); })(); }, []);
/* get state data and export to XLSX */ /* get state data and export to XLSX */
const exportFile = useCallback(() => { const exportFile = useCallback(() => {
// highlight-next-line
const ws = utils.json_to_sheet(pres); const ws = utils.json_to_sheet(pres);
const wb = utils.book_new(); const wb = utils.book_new();
utils.book_append_sheet(wb, ws, "Data"); utils.book_append_sheet(wb, ws, "Data");
@ -306,16 +303,14 @@ export default function SheetJSReactAoO() {
return (<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody> return (<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
{ /* generate row for each president */ { /* generate row for each president */
// highlight-start pres.map((pres, index) => (<tr key={index}>
pres.map(pres => (<tr>
<td>{pres.Name}</td> <td>{pres.Name}</td>
<td>{pres.Index}</td> <td>{pres.Index}</td>
</tr>)) </tr>))
// highlight-end
} }
</tbody><tfoot><td colSpan={2}> </tbody><tfoot><tr><td colSpan={2}>
<button onClick={exportFile}>Export XLSX</button> <button onClick={exportFile}>Export XLSX</button>
</td></tfoot></table>); </td></tr></tfoot></table>);
} }
``` ```
@ -331,7 +326,7 @@ This demo was tested in the following environments:
| ReactJS | ViteJS | Date | | ReactJS | ViteJS | Date |
|:---------|:--------|:-----------| |:---------|:--------|:-----------|
| `18.2.0` | `5.1.6` | 2024-03-13 | | `18.3.1` | `6.0.1` | 2024-12-12 |
::: :::
@ -363,7 +358,7 @@ and the page will attempt to download `SheetJSReactAoO.xlsx`.
npm run build npm run build
``` ```
The generated site will be placed in the `dist` folder. The generated site will be placed in the `.next` folder.
6) Start a local web server: 6) Start a local web server:
@ -383,10 +378,17 @@ This demo was tested in the following environments:
| ReactJS | CRA | Date | | ReactJS | CRA | Date |
|:---------|:--------|:-----------| |:---------|:--------|:-----------|
| `18.2.0` | `5.0.1` | 2024-03-13 | | `18.2.0` | `5.0.1` | 2024-12-12 |
::: :::
:::caution
CRA has known compatibility issues with React 19+[^cra]. CRA no longer receives updates and the ReactJS docs no longer recommend using CRA. For new projects, it is strongly recommended to use ViteJS with the react or react-ts templates.
:::
1) Create a new site: 1) Create a new site:
```bash ```bash
@ -398,6 +400,7 @@ npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
<CodeBlock language="bash">{`\ <CodeBlock language="bash">{`\
cd sheetjs-react cd sheetjs-react
npm i npm i
npm i react@18.2.0 react-dom@18.2.0 web-vitals --save --save-exact # fixes CRA dependency conflicts w/ React 19
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm start`} npm start`}
</CodeBlock> </CodeBlock>
@ -426,6 +429,8 @@ npx http-server build
Access the displayed URL (typically `http://localhost:8080`) with a web browser Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page. and test the page.
[^cra]: See [Create React App Issue #13717](https://github.com/facebook/create-react-app/issues/13717) for details about React 19+ compatibility issues.
</TabItem> </TabItem>
<TabItem name="nextjs" value="NextJS"> <TabItem name="nextjs" value="NextJS">
@ -435,7 +440,7 @@ This demo was tested in the following environments:
| ReactJS | NextJS | Date | | ReactJS | NextJS | Date |
|:---------|:---------|:-----------| |:---------|:---------|:-----------|
| `18.2.0` | `14.1.3` | 2024-03-13 | | `19.0.0` | `15.1.0` | 2024-12-13 |
::: :::
@ -480,26 +485,26 @@ npx next telemetry disable
1) Create a new site: 1) Create a new site:
```bash ```bash
npx create-next-app@latest sheetjs-react --ts --no-eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*" npx create-next-app@latest sheetjs-nextjs --ts --no-eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*" --no-turbopack
``` ```
2) Install the SheetJS dependency and start the dev server: 2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\ <CodeBlock language="bash">{`\
cd sheetjs-react cd sheetjs-nextjs
npm i npm i
npx next telemetry disable npx next telemetry disable
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`} npm run dev`}
</CodeBlock> </CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`) 3) Open a web browser and access the displayed URL (`http://localhost:3000`)
4) Replace `src/App.jsx` with the `src/SheetJSReactAoO.js` example. 4) Replace `pages/index.tsx` with the `src/SheetJSReactAoO.js` example.
After replacing the code, add the following to the top of `src/App.jsx`: After replacing the code, add the following to the top of `pages/index.tsx`:
```js title="src/App.jsx (add to top)" ```js title="src/index.tsx (add to top)"
"use client"; "use client";
``` ```
@ -535,7 +540,7 @@ The generated site will be placed in the `dist` folder.
6) Start a local web server: 6) Start a local web server:
```bash ```bash
npx http-server dist npm run start
``` ```
Access the displayed URL (typically `http://localhost:8080`) with a web browser Access the displayed URL (typically `http://localhost:8080`) with a web browser
@ -566,7 +571,7 @@ export, the first `TABLE` child element can be parsed with [`table_to_book`](/do
generate a workbook object. generate a workbook object.
```jsx title="src/SheetJSReactHTML.js" ```jsx title="src/SheetJSReactHTML.js"
import React, { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { read, utils, writeFileXLSX } from 'xlsx'; import { read, utils, writeFileXLSX } from 'xlsx';
export default function SheetJSReactHTML() { export default function SheetJSReactHTML() {
@ -615,7 +620,7 @@ This demo was tested in the following environments:
| ReactJS | ViteJS | Date | | ReactJS | ViteJS | Date |
|:---------|:--------|:-----------| |:---------|:--------|:-----------|
| `18.2.0` | `5.1.6` | 2024-03-13 | | `18.3.1` | `6.0.1` | 2024-12-13 |
::: :::
@ -671,6 +676,12 @@ This demo was tested in the following environments:
::: :::
:::caution
CRA has known compatibility issues with React 19+[^cra]. CRA no longer receives updates and the ReactJS docs no longer recommend using CRA. For new projects, it is strongly recommended to use ViteJS with the react or react-ts templates.
:::
1) Create a new site: 1) Create a new site:
```bash ```bash
@ -682,6 +693,7 @@ npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
<CodeBlock language="bash">{`\ <CodeBlock language="bash">{`\
cd sheetjs-react cd sheetjs-react
npm i npm i
npm i react@18.2.0 react-dom@18.2.0 web-vitals --save --save-exact # fixes CRA dependency conflicts w/ React 19
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm start`} npm start`}
</CodeBlock> </CodeBlock>