Time | Content |
---|---|
13:00-13:30 | 環境構築とAPIの申請 |
13:30-14:15 | 検索フォームの作成 |
14:15-14:30 | 休憩 |
14:30-15:00 | カスタムフックの作成 |
15:00-15:45 | APIを叩いて検索結果を表示 |
15:45-16:00 | 質疑応答 |
src
|- components
| |- atoms button, formなどの最小部品
| |- layouts 汎用的なレイアウト用コンポーネント
| |- organisms 検索フォームなどコンポーネントの1まとまる
| └ templates ページ毎に作成するテンプレート
|- lib 関数用ファイルをまとめる
|- rakuten
| └ config.ts 楽天APIの設定値
|- styles Scssファイルをまとめる
└ types 型定義用ファイルをまとめる
npx create-react-app <DIR_NAME> --template typescript
- 要らないファイルを削除
npm install --save axios
or yarn add axios
npm install --save-dev @types/axios node-sass@4.14.1
or yarn add --dev @types/axios node-sass@4.14.1
baseUrl: './src'
を設定
- 楽天トラベルキーワード検索APIのWebページにアクセス
- 試しにAPIを使ってみる
- アプリID発行にアクセス
- アプリ名とアプリURLは適当でOK、OAuth用の詳細情報は不要
- 規約に同意して新規アプリを作成
- rakutenディレクトリの作成
- config.tsの作成と設定値のexport
- .gitignoreにsrc/rakuten/config.tsを追加