CodePenを使ってReact.jsを学ぶ練習log その2
ページが重くなってきたので分けた
2020-11-20 07:32:39 問題1をやる
07:41:26 Random User Generatorのresponseの型定義を書く
08:00:08 できた
Table.tsximport * as React from "react";
import { RandomUserResponse } from "./RandomUserResponse";
import "./styles.css";
export const Table = () => {
const [data, setData] = React.useState<RandomUserResponse>();
React.useEffect(() => {
(async () => {
const user = (await fetch(
"https://randomuser.me/api/?results=5&nat=us&inc=gender,name,email"
).then((res) => res.json())) as RandomUserResponse;
setData(user);
})();
}, []);
const Header = (
<tr>
<th>
<abbr title="Name">Name</abbr>
</th>
<th>
<abbr title="Gender">Gender</abbr>
</th>
<th>
<abbr title="Emal">Email</abbr>
</th>
</tr>
);
return (
<div className="table-container">
<table className="table">
<thead>{Header}</thead>
<tfoot>{Header}</tfoot>
<tbody>
{data?.results.map((user, i) => (
<tr key={i}>
<th>{`${user.name.title} ${user.name.first} ${user.name.last}`}</th>
<td>{user.gender}</td>
<td>{user.email}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};RandomUserResponse.tsxexport interface RandomUserResponse {
results: {
gender: string;
name: {
title: string;
first: string;
last: string;
};
email: string;
}[];
info: {
seed: string;
results: number;
page: number;
version: string;
};
}08:05:10 問題2
custom Hooksを使う
08:15:54 できた
これに少し手を加えただけ
tippy.jsを使った
tsximport { useEffect } from "react";
import tippy from "tippy.js";
import "tippy.js/dist/tippy.css";
export function useTooltip(id: string, content: string) {
useEffect(() => {
tippy(`#${id}`, { content });
}, [id, content]);
}tsximport * as React from "react";
import "./styles.css";
import { useTooltip } from "./useTooltip";
export default function App() {
useTooltip("myButton", "Hello world!");
useTooltip("myParagraph", "This is another tooltip.");
return (
<>
<button id="myButton">Hover me</button>
<p>
<span id="myParagraph">Hover me too!</span>
</p>
</>
);
}08:22:14 問題1
おかしい編集できなくなった
App.tsx を編集しても、元に戻ってしまう08:32:22 タブを開き直したら直った
08:50:11 できた
useGifs.tsimport * as React from "react";
import { mockApi } from "./mockApi";
export const useGifIds = () => {
const [gifs, setGifs] = React.useState<{ id: string }[]>([]);
React.useEffect(() => {
(async () => {
const response = await mockApi();
setGifs(response);
})();
}, []);
return gifs;
};useSlider.tsimport React from "react";
import { Swiper } from "swiper";
export const useSlider = <T>(targetList: T[]) => {
const [slider, setSlider] = React.useState<Swiper>();
React.useEffect(
() =>
setSlider(
new Swiper("#slider", {
spaceBetween: 10,
slidesPerView: 2,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
})
),
[]
);
React.useEffect(() => {
if (targetList.length > 0) {
slider?.update();↑ここで「
slider がdependency listにない」と警告が出る slider の更新に合わせる必要はないので無視していいはずuseSlider.ts }
}, [targetList]);
};mockApi.tsexport function mockApi() {
return new Promise((ok: (json: { id: string }[]) => void) => {
setTimeout(
() =>
ok([
{ id: "10dU7AN7xsi1I4" },
{ id: "tBxyh2hbwMiqc" },
{ id: "ICOgUNjpvO0PC" },
{ id: "33OrjzUFwkwEg" },
{ id: "MCfhrrNN1goH6" },
{ id: "rwCX06Y5XpbLG" }
]),
1000
);
});
}App.tsximport * as React from "react";
import "./styles.css";
import { useGifIds } from "./useGifs";
import { useSlider } from "./useSlider";
function Gifs() {
const gifs = useGifIds();
useSlider(gifs);
return (
<div id="slider" className="swiper-container">
<div className="swiper-wrapper">
{gifs.map((gif) => (
<img
key={gif.id}
className="swiper-slide"
src={`https://media.giphy.com/media/${gif.id}/giphy.gif`}
alt=""
/>
))}
</div>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
</div>
);
}
export default function App() {
return (
<div className="App">
<Gifs />
</div>
);
}08:53:55 これでReact入門チュートリアルは終了した
#2020-11-20 07:32:26