From 61ec7ad63c599fbdc96c1b4ef7bc53e6f7fc27a4 Mon Sep 17 00:00:00 2001 From: Asad Date: Thu, 12 Dec 2024 15:13:34 -0500 Subject: [PATCH] chore: updated React demo deployment instructions and version info 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 --- docz/docs/03-demos/02-frontend/02-react.md | 58 +++++++++++++--------- 1 file changed, 35 insertions(+), 23 deletions(-) diff --git a/docz/docs/03-demos/02-frontend/02-react.md b/docz/docs/03-demos/02-frontend/02-react.md index 47e1f59..85a89fe 100644 --- a/docz/docs/03-demos/02-frontend/02-react.md +++ b/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: ```jsx title="src/SheetJSReactAoO.js" -import React, { useCallback, useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { read, utils, writeFileXLSX } from 'xlsx'; export default function SheetJSReactAoO() { /* the component state is an array of presidents */ - const [pres, setPres] = useState([]); + const [pres, setPres] = useState([] /* as any[] */); /* Fetch and update the state once */ useEffect(() => { (async() => { const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer(); - // highlight-start const wb = read(f); // parse the array buffer const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet const data = utils.sheet_to_json(ws); // generate objects setPres(data); // update state - // highlight-end })(); }, []); /* get state data and export to XLSX */ const exportFile = useCallback(() => { - // highlight-next-line const ws = utils.json_to_sheet(pres); const wb = utils.book_new(); utils.book_append_sheet(wb, ws, "Data"); @@ -306,16 +303,14 @@ export default function SheetJSReactAoO() { return ( { /* generate row for each president */ -// highlight-start - pres.map(pres => ( + pres.map((pres, index) => ()) -// highlight-end } -
NameIndex
{pres.Name} {pres.Index}
+
-
); + ); } ``` @@ -331,7 +326,7 @@ This demo was tested in the following environments: | 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 ``` -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: @@ -383,10 +378,17 @@ This demo was tested in the following environments: | 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: ```bash @@ -398,6 +400,7 @@ npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react {`\ cd sheetjs-react 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 start`} @@ -426,6 +429,8 @@ npx http-server build Access the displayed URL (typically `http://localhost:8080`) with a web browser 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. + @@ -435,7 +440,7 @@ This demo was tested in the following environments: | 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: ```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: {`\ -cd sheetjs-react +cd sheetjs-nextjs npm i npx next telemetry disable npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz npm run dev`} -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"; ``` @@ -535,7 +540,7 @@ The generated site will be placed in the `dist` folder. 6) Start a local web server: ```bash -npx http-server dist +npm run start ``` 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. ```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'; export default function SheetJSReactHTML() { @@ -615,7 +620,7 @@ This demo was tested in the following environments: | 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: ```bash @@ -682,6 +693,7 @@ npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react {`\ cd sheetjs-react 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 start`}