React と JSON を連携してページを量産する

const SPREAD_SHEET_ID = [スプシのID];
const SHEET_NAME = 'items';//スプシのシート名
function doGet() {
  const app = SpreadsheetApp.openById(SPREAD_SHEET_ID);
  const sheet = app.getSheetByName(SHEET_NAME);
  const last = parseInt(sheet.getRange(1, 1).getNextDataCell(SpreadsheetApp.Direction.DOWN).getRow());
  const labels = sheet.getRange( 1,1,1,4).getValues()[0]
  const values = sheet.getRange( 2,1, last-1, 4).getValues().reverse();
  data = values.map(arry=>{
    param = {}
    arry.map((item, num)=>{
      param[labels[num]] = item;
    })
    return param;
  })

  const result = ContentService.createTextOutput();
  result.setMimeType(ContentService.MimeType.JSON);
  result.setContent(JSON.stringify(data));
  return result
}

npx create-react-app my-app

npm start

npm run build

my-app/
  └ src/
    ├ App.css（編集）
    ├ index.css（編集）
    ├ logo.svg
    ...
    └ App.js（編集）

import "./App.css";

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <h1>銀ねこ商会</h1>
      </header>
      <footer className="App-header">
        <p>
          <small>(C)銀ねこ商会</small>
        </p>
      </footer>
    </div>
  );
}
export default App;

.App {
  min-height: 100vh;
  color: #333;
}

.App-header {
  font-size: 20px;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.App-footer {
  padding: 20px;
  text-align: center;
  font-size: 12px;
}

npm i axios

src/
  └ App.js（編集）

src/
  ├ components/（新規作成）
  | ├ List.js（新規作成）
  | └ Item.js（新規作成）
  ...
  └ App.js（編集）

npm i react-router-dom

const List = () => {
  return <p>一覧</p>;
};
export default List;

import { useContext } from "react";
import { Link } from "react-router-dom";
import { ItemList } from "../App";
const List = () => {
  const itemList = useContext(ItemList);

  if (itemList.length !== 0) {
    return (
      <ul className="App-list">
        {itemList.map((item, index) => {
          return (
            <li key={`item${index}`}>
              <Link to={`item/${item.id}`}>
                <img
                  src={item.img01}
                  alt={item.title}
                  width="150"
                  height="150"
                />
                <h2>{item.title}</h2>
              </Link>
            </li>
          );
        })}
      </ul>
    );
  } else {
    return <p style={{ textAlign: "center" }}>読み込み中・・・</p>;
  }
};
export default List;

import { Link } from "react-router-dom";

// 省略
<Link to={`item/${item.id}`}>
// 省略
</Link>

src/
  ├ components/
  | ├ List.js
  | └ Item.js（編集）
  ...
  └ App.js（編集）

import { useContext } from "react";
import { useParams } from "react-router-dom";
import { ItemList } from "../App";
const Item = () => {
  const itemList = useContext(ItemList);
}
export default Item;

.App {
  min-height: 100vh;
  color: #333;
}
.App-header {
  font-size: 20px;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.App-footer {
  padding: 20px;
  text-align: center;
  font-size: 12px;
}
.App-main {
  padding: 16px;
  max-width: 750px;
  margin: 0 auto;
}
.App-main img {
  max-width: 100%;
  height: auto;
}
.App-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -4px;
  margin-right: -4px;
}
.App-list li {
  width: 33.333%;
  padding: 0 4px 16px;
}

.App-item .App-item-title {
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 20px;
}

.App-item .App-item-img {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

npm i react-helmet

// 省略
import { Helmet } from "react-helmet";
  // 省略
  return (
    // 省略
      <div className="App-item">
        <Helmet>
          <title>{item.title} | かみーゆ商会</title>
          <meta name="description" content={item.description} />
        </Helmet>
      </div>
    // 省略
  )
};

npm run build

my-app/
  ├ src/
  ├ build/（新規自動生成）
  └ public/

serve i -g

serve -s build

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html

src/
  ├ pages/
  | └ NotFound.js（新規追加）
  ...
  └ Apps.js（編集）

// 省略
import NotFound from "./pages/NotFound";

const App = () => {
// 省略
  return (
    // 省略
    <BrowserRouter>
      <Routes>
      // 省略
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
    // 省略
  )
// 省略
}

import { Link } from "react-router-dom";
const NotFound = () => {
  return (
    <>
      <h2>404 Page Not Found</h2>
      <p>お探しのページは見つかりませんでした。</p>
      <Link to="/">ページの先頭に戻る</Link>
    </>
  );
}
export default NotFound;