Closed3
D1 + cloudflare workers + hono, CSR的な例
knaka Tech-Blog概要
honoで、CSR的なReact実装メモになります
- 今回は、環境準備編です
- CDNで、React読み込む方法です。
環境
- cloudflare workers
- D1
- hono: 3.7.2
- React 18
関連
関連のページ
作成したコード
- 関連のパス
- /csr1
- /csr2
- src/views/layout.tsx
- 上位レイヤーで、React読み込む例です
layout.tsx
import type { FC } from 'hono/jsx'
import { html } from 'hono/html'
//
export const Layout: FC = (props) => {
return (
<html>
<head>
{html`
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
`}
</head>
<div>
<a href="/">[ home ]</a>
<a href="/test/test_index">[test]</a>
<a href="/csr1">[ Csr1 ]</a>
<a href="/csr2">[ Csr2 ]</a>
</div>
<hr />
<body>{props.children}</body>
</html>
)
}
- views/csr1/App.tsx
- hono/htmlで、scriptタグを読み込めるようでした
- JSコードを、フロント側に送信する例です
App.tsx
export const Csr1: FC<{ items: any[] }> = (props: { items: any[] }) => {
const timeStamp = Date.now();
return (
<Layout>
<div>
<h1>Csr1 </h1>
<hr />
<div id="root"></div>
{html`<script type="text/babel" src="/js/csr/csr1.js?${timeStamp}"></script>`}
</div>
</Layout>
)
}
- public/js/csr/csr1.js
- public下の、js読込ます
- 固定文字を、reactで表示するサンプル
csr1.js
let items = [];
let message = "";
//
function App() {
const [updatetime, setUpdatetime] = React.useState("");
React.useEffect(() => {
(async () => {
console.log("#start");
message = "hoge";
updateTimestap();
})()
}, []);
//
const updateTimestap = function() {
const dt = new Date().toString();
setUpdatetime(dt);
}
//
return (
<div className="App">
<h1>Hello React 123</h1>
<hr />
<p>updatetime:{updatetime}</p>
<p>message: {message}</p>
<hr />
</div>
);
};
//
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
);
- 参考の見た目、 CSR React実装
knaka Tech-Blog- /csr2 は、api連携し。D1からデータ読込、React CSR表示する例です
このスクラップは2023/09/29にクローズされました