この投稿はブックマークやリーディングリストに入れてたけどやってなかったことをやるシリーズ(続くかは未定)です。
【React+TypeScript】Netflixのクローンを作るチュートリアル
こちらはChapter 03 Reactの環境構築とAPI取得の下準備】で止まっています。
2022/03/28 無事に完成&デプロイしました！長いので続きはこちらから
【続】後回しにしていたことをやる②React+TypeScriptでNetflixクローンアプリ
最初に悩んだエラー
原因：ライブラリの読込のミス
Reactで他のファイルを読み込むときはimportを使用するのですが、ファイルの種類によって書き方が違ってきます。
1.コンポーネント
import { Row } from './components/Row';
2.CSS
import './App.css';
3.axiosはライブラリなので、以下のように記述
import axios from 'axios';
以下自分メモ
create-react-appをTypeScript仕様でインストール
参照：create-react-appで React + Typescript な環境を構築する
- おなじみのcreate-react-appですが今回はオプションに
--template typescriptをつけてTypeScriptでインストール。
% npx create-react-app tmdb_app --template typescript
Creating a new React app in /Users/mkk/Programming/Practice/tmdb_app.
Happy hacking!
%
コミット時にコードを自動整形するための3つライブラリをインストール
- husky
- lint-staged
- prettier
-Dを付けてすべて devDependencies としてインストール
$ yarn add -D husky lint-staged prettier
devDependenciesとdependenciesの違いは
devDependencies：開発時に必要なもの
dependencies：本番環境でも必要なもの
とのこと
参照：package.jsonにおけるdependenciesとdevDependenciesの違い(超シンプルに)
huskyのバージョンがv5以上だったのでコマンドを実行
% yarn add -D husky lint-staged prettier
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 242.96s.
% npx husky install
husky - Git hooks installed
% npx husky add .husky/pre-commit "yarn lint-staged"
husky - created .husky/pre-commit
TMDB(映画情報サイト)からAPIを取得するための準備
ここが地味に時間かかりました。
- APIの申請のフォームの入力が結構厳し目
- 住所も含め全て英語で記述
- App Summary(アプリケーション概要)は細かめに書かないと通らない
どんな概要を書けば通るのか色々調べましたが、サイト掲示板の投稿で,を入れないといけない？みたいなのをを見かけたので試してみたら通りました。
2.POSTMANで取得したAPIを送信
- 登録はGoogle認証でOK
- 登録するとどこ押したらいいかわからないとわからなかったんですが、Start with Somethig New のCreate Newをクリック
- モーダルウィンドウが表示されるのでHttp Requestをクリック
-GETと書かれているフォームにhttps://api.themoviedb.org/3/movie/550?api_key=【取得したAPIKey】を貼り付け**Sendをクリックすると下のほうに結果が表示されます。
Saveをクリックして適当な名前で保存しておきましょう。
次回予告
一旦今回のは保留にして、自分のサイトを作って見たいので色々模索していきたいです。
こちらからやってみる…
Notionの標準機能だけでWebサイトビルダーを作ってしまった「The Super Builder」がスゴイ！
それか今回のチュートリアル内で紹介されていた教材をやるかもしれません。
【 React Hooks入門】useStateを使って買い物リストを作るチュートリアル
React + TypeScriptでコネクト4を作った報告（クラスコンポーネント）
ReactでのCOVID-19トラッカー作成で学べる3つの事