Movatterモバイル変換

■今のフロントエンドのコードを書いてるとCOBOLの頃を思い出す

constを上から順にひたすら羅列していく感じがなんかね

と思うオブジェクト指向おじさんなのだった

以下chatgptによるremixjsの例

import { useEffect, useState } from "react";

import {json } from "@remix-run/node";

import { useLoaderData } from "@remix-run/react";

exportconst loader = async () => {

constresponse = await fetch("https://api.example.com/data");

const data = awaitresponse.json();

returnjson({ initialData: data });

};

export default functionIndex() {

const { initialData } = useLoaderData();

const [data, setData] = useState(initialData);

useEffect(() => {

const fetchData = async () => {

constresponse = await fetch("http://api.com/get");

const newData = awaitresponse.json();

setData(newData);

};

fetchData();

}, []);

if (initialData.value === null || data.value === null) {

return (

);

}

return (

<h1>Remix:SSR +クライアント処理</h1>

サーバーサイドの初期データ: {initialData.value}

クライアントで更新したデータ: {data.value}