githubでリポジトリ名：vite-react-pagesで作成して、
$ git remote add origin https://github.com/hiroyuki12/vite-react-pages.git
プロジェクトを作成
$ npm create vite@latest
$ npm run dev
ソースを変更して保存すると、画面も更新される
$ npm run preview
$ npm run dev したら自動でブラウザを開くように設定ファイルを変更
Vite で最速 React & TypeScript
https://vite-react-pages.netlify.app
netlifyのSite settingsで、site nameを変更すると、URLも変更される。
$ git push すると、netlifyのReact Appが更新される。
Netlify: Develop & deploy the best web experiences in record time
GitHub - hiroyuki12/vite-react-pages
Qiita APIを叩く
https://github.com/hiroyuki12/vite-react-pages/blob/main/src/components/App.jsx
ReactでQiitaAPIを叩いてアプリを作る入門 - Qiita
記事を2つ表示、レイアウト変更
https://github.com/hiroyuki12/vite-react-pages/blob/main/src/components/App.jsx
参考
react-pages/Qiita.js at main · hiroyuki12/react-pages · GitHub
記事を5つ表示、+1,-1ボタンを追加
https://github.com/hiroyuki12/vite-react-pages/blob/main/src/components/App.jsx
postList, list.mapを使うように変更
・constructorにthis.renderImageListを追加
・renderImageList(list)を追加
・{this.renderImageList(this.state.postsList)}を追加
https://github.com/hiroyuki12/vite-react-pages/blob/main/src/components/App.jsx
参考
React Qiita API から記事情報を取得して表示させる - Qiita
レイアウトを変更
https://github.com/hiroyuki12/vite-react-pages/blob/main/src/components/App.jsx
参考
react-pages/Qiita.js at main · hiroyuki12/react-pages · GitHub
useEffectがうまく動かないので、functionに変更
functionに変更すると、useEffectがうまく動いた
参考
ReactでQiita APIを叩く - MBP(はてな)
useEffectを追加して、pageが変化した時に、getQiitaPosts();を実行するように変更
参考
react-pages/Qiita.js at main · hiroyuki12/react-pages · GitHub
データを読み込んだ時に、concatでpostsListに追加するように変更
setPostsList(postsList.concat(response.data));
参考
react-pages/Qiita.js at main · hiroyuki12/react-pages · GitHub
一番下に到達したら getQiitaPosts()でページを更新
参考
react-pages/Qiita.js at main · hiroyuki12/react-pages · GitHub
参考
netlifyでReact App - MBP(はてな)
うまくいかなかった。何も表示されない
Vite + React で作成したAppをGitHub Pagesにデプロイする
Vite で React 新規プロジェクトを作成 - MBP(はてな)
PWA化 vite-plugin-pwa
Vite で最速 React & TypeScript
parseInt、文字列をIntに変換
const tmp = parseInt(target,10); // 10進数
parseInt() - JavaScript | MDN
固定されたフッターを追加
position: fixed;を使わずにヘッダー/フッターを固定する方法【FlexBox解説】
テキスト中央寄せ text-align: center;
CSS: 中央に配置する
moment.js -> day.js へ移行
$ npm remove moment
$ npm install dayjs
moment.js→day.jsへ移行してダイエットしよう - Qiita
Reactで作成したSPAをNetlifyでホストする際のコツ
Vercelにログインして、New Projectを選択して、
GitHubのvite-reapct-pagesのリポジトリをImportすると、
デプロイできた。
https://vite-react-pages.vercel.app
PWA
vite.config.tsにmanifestを追加して、pngを追加すると、
アイコンが追加したpngになった。
Vite (React, TypeScript)プロジェクトをPWA化 | 定年後にWeb開発者目指す
