APIキーを取得 Youtube Data API で取得したデータをPython（Pandas/matplotlib）で可視化する。 - Qiita Google Cloud Platform Youtube APIを使って検索+再生をやってみた(React+Typescript) - QiitaYoutube Data API で取得したデータをPython（Pandas/ma…

$ npm install react-chartjs-2 chart.js$ vi src/page/chart/LinePlot.js export const LinePlot: React.FC = () => { return ( <div> <Line data={data} /> </div> ) } $ vi src/page/chart/PiePlot.js export const PiePlot: React.FC = () => { return ( <div> <Pie data={data} /> <Doughnut data={data} /> </div> ) …

Spotify API を使って開発をしてみた！Reactでaccess tokenの取得編 - QiitaSpotify API + Next.jsで作る選曲支援Webアプリ - Qiita Spotify Developer Platform: Spotify APIアクセスしてデータ取得してみてみた - Qiitacurl -H "Authorization: Bearer YOU…

FirebaseのAuthenticationでGitHubを有効にする。$ vi src/page/firebase/auth/LoginGithub.jsx const LoginGithub = ({ history }) => { firebase.auth().onAuthStateChanged((user) => { if (user) { console.log('login'); } else { console.log('not log…

ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている

Reactチュートリアル1：犬画像ギャラリーを作ろう

$ vi public/admin.html <h1>Admin Page</h1>$ vi staticwebapp.config.json { "routes": [ { "route": "/login", "rewrite": "/.auth/login/github" }, { "route": "/logout", "rewrite": "/.auth/logout" }, { "route": "/admin.html", "allowedRoles": ["admin"] }…

AzureにVirtual machineを作成。(8/10 1:30起動)MacにMicrosoft Remote Desktopアプリをインストールして、 ダウンロードしたrdpファイルをダブルクリックすると、 ユーザー名とパスワードを入力する画面が表示され、 入力するとデスクトップが表示される。…

DenoでZennのAPIモジュールを作る$ deno run --allow-net main.ts

無限スクロールの処理 useEffectを使って、pageが変化したらhandleClick()を実行するように変更 handleClick()の中にpageを+1する処理があると無限ループになるので注意 useEffect(() => { //document.title = `page = ${page}, message = ${message}`; hand…

先に、Netlify Fuctionsを設定。 Netlify FunctionsでHello World - MBP(はてな)$ vi functions/trendTech.ts して、 zenn-trend-api/trendTech.ts at main · HelloRusk/zenn-trend-api · GitHub と同じ内容にする。 $ npm install axios $ npm install chee…

先に、NetlifyでReact Appを作成 netlifyでReact App - MBP(はてな) Netlify Functionsで作るサーバーサイド機能 | 第1回 Netlify Functionsとは | CodeGrid

$ npx create-react-app amplify-react-pages $ cd amplifyapp $ npm startGitHubにリポジトリを作成して、push $ git remote add origin git@github.com:hiroyuki12/amplify-react-pages.git $ git branch -M main $ git push -u origin mainAWSコンソール…

$ npx create-react-app typescript-react-pages --template typescript$ cd typescript-react-pages $ vi src/App.tsxReactでQiita APIから記事情報を取得して表示 - MBP(はてな)Githubにリポジトリを作成して、push プロジェクトのトップディレクトリで、 …

Githubにリポジトリを作成して、 $ npx create-react-app azure-static-web-react-pages $ cd azure-static-web-react-pages $ git remote add origin git@github.com:hiroyuki12/azure-static-web-react-pages.git $ git branch -M main $ git push -u orig…

プロジェクトのトップディレクトリで、 $ git remote add origin git@github.com:hiroyuki12/vercel-react-pages.git $ git branch -M main $ git push -u origin main でエラーが出たので、公開鍵をGithubにアップするとpushできた。公開鍵のアップ GitHub …

githubでリポジトリ名：netlify-react-pagesで作成して、 $ git remote add origin https://github.com/hiroyuki12/netlify-react-pages.gitpublished になるまで少し時間がかかった。完了するとメールが届いた。https://netlify-react-pages.netlify.appnet…

コードで学ぶAWS入門

HerokuにログインしてNewを選択して、Create New Appで作成Heroku CLIをインストール $ curl https://cli-assets.heroku.com/install.sh | sh $ /usr/local/bin/heroku -v heroku/7.56.1 darwin-x64 node-v12.21.0$ heroku login$ cd github $ npx create-re…

zenn.dev

$ curl https://zenn-api.netlify.app/.netlify/functions/trendTech | jq | moreQiitaを元に作成 ReactでQiita APIから記事情報を取得して表示 - MBP(はてな)Netlify Functions を使って Zenn のトレンド API を非公式で作ってみた