Reactは、UIパーツを構築するためのJavaScriptライブラリ
プロジェクトを作成
$ npm create vite@latest
$ npm install
$ npm run dev
$ npm run dev したら自動でブラウザを開くように設定ファイルを変更
Vite で最速 React & TypeScript
$ vi src/App.jsx して、
https://raw.githubusercontent.com/hiroyuki12/vite-react-pages/main/src/components/qiita/App.jsx
の内容で置き換え。
//import '../../QiitaApp.css';にして、コメントアウト
vite-react-pages/App.jsx at main · hiroyuki12/vite-react-pages · GitHub
$ npm install axios
$ npm install lodash
$ npm install moment
$ npm run dev
QiitaApp.cssを追加して、import '../../QiitaApp.css';にして、コメントアウトを解除。パスを合わせる
vite-react-pages/QiitaApp.css at main · hiroyuki12/vite-react-pages · GitHub
$ curl curl https://qiita.com/api/v2/tags/react/items | jq | more
$ npm install axios --save
[axios] axios の導入と簡単な使い方 - Qiita
[フロントエンド] axiosライブラリを使って、柔軟にHTTP通信を行う - YoheiM .NET
React Qiita API から記事情報を取得して表示させる - Qiita
imgタグはQiitaのページを参照
safariの設定で、Advanced - Show Develop menu in menu barのチェックをON
safariのDevelop - Show Web Inspector
アイコンを選択して、imgタグをコピー
次ページの記事を表示する時に、元の配列にconcatで追加する
Array.prototype.concat() - JavaScript | MDN
IntersectionObserverで要素が画面内に入ってきたかを判定する
無限ローディング、無限スクロール
functionの時は、componentDidMount()ではなく、useEffectを使う
useEffectの第二引数を空配列にすると、最初に１回だけ処理する
無限ローディング機能を作る｜React + TwitterAPI + Lambda でwebアプリを作ってみる
読み込み中にLoading表示
React Hooksでデータを取得する方法 - Qiita
axiosをfetchに置き換え
[JavaScript] Fetchの代わりにAxiosを使ってみる | Today's Commit
【リソース取得APIの比較】fetchとaxiosの4つの相違点
参考
Next.jsでQiitaAPIを使って記事情報を取得して表示 Vercel - MBP(はてな)
hours agoのフォントサイズを小さくする
CSSで左に画像を右にテキストを表示した横並びにする
はみ出た文字を...で省略。CSSのみで対応（複数行可能）、CSSのみで対応（1行のみ）
複数行にも対応！はみ出た文字を三点リーダー（…）で省略する方法 | 【運用・改善が得意な仙台のホームページ制作会社】AndHA（アンドエイチエー）
タグ一覧を表示。JSX内で配列をループ処理する
JSX内で配列・オブジェクトをループ処理する - Qiita
