React + TypeScript + vscodeの初めの一歩

React + TypeScriptに入門して、1週間。
いい教材を見つけました。

↓これです。

https://www.udemy.com/course/firebasereact-hookstypescript-todo/

無料なので、メンバ登録だけして、現在進行形で取り組んでいます。
Firebaseへデプロイまでの一通りを学べそうなので、いい感じです。
ですが、そのままではダメで、少し(というかかなり、)苦しんだ部分がありました。

その部分を、自身の学習も兼ねて残そうと思います。

:::note warn
ちなみに、
私は、udemyの回し者ではありません。また、この教材の提供主でもなければ、この教材を宣伝して何かを得ることもないです。
:::

## 以下、教材の目次と対応内容

###1.はじめに
→導入の説明だけど、ほとんど見てない。

###2.TypeScript無料コース
→同じく、ほとんど見てない。

###3.コースに必要なツールのインストール
ほとんど見てない。インストールは下記記事を参考にした。

https://qiita.com/rg687076/items/92717a2f9acad816b6ba

上記の記事にはNode.jsのインストールの記述はないので、下記を参考に。

https://qiita.com/echolimitless/items/83f8658cf855de04b9ce

###4.本コースのSource code
全く見てない。

###5.2021年版 React学習ロードマップ
ほうほうって見て参考にした。
Next.jsの立ち位置が少しわかった。Reactが終わったら、次は、Next.jsせんといかんみたい。

###6.firebase version
全く見てない。

###7.Reactプロジェクト作成
vscode-iconsはインストールしてない。
後は、同じに。

###8.vs-icons 設定
全く見てない。

###9.Firebaseのアカウント
Firebaseにメンバ登録して、ログインできるのを確認。

###10.databaseURL
書き留めておく。

###11.[注意点] firebase import文
書き留めておく。

###12. FirebaseとReactの連携
ここは、動画で助かった。わかりやすかった。
でも、動画の中で、firebase.tsファイルを新規作成 → コーディングするところで、最後の2行を入力すると下記エラーが出た。

```prompt:エラーメッセージ
D:/Products/React.js/firebase-react-todo_fail001/src/firebase.ts
TypeScript error in D:/Products/React.js/firebase-react-todo_fail001/src/firebase.ts(16,32):
Property 'firestore' does not exist on type 'FirebaseApp'.  TS2339

    14 | });
    15 | 
  > 16 | export const db  = firebaseApp.firestore();
       |                                ^
    17 | export const auth= firebase.auth();
    18 |
```

npm install --save firebase@8.10.0
対処は、上記コマンドで、firebaseを古いバージョンに入れ直したら治った。

###13.Firebaseデータベース
動画の通りに。

###14.FirebaseのデータをReactでレンダリング
コード補完が、動画通りにならない。まーいーや。
8:13付近で、下記コードを入力して、実行していたが、動かなかった。
{tasks.map((task)=&gt;&lt;h3&gt;{task.title}&lt;/h3&gt;)}
たぶん、eslintを入れているせいだと思う。
eslint下記は入れたままにしたいので、修正で対応した。

```diff_typescript:App.tsx
-     {tasks.map((task)=><h3>{task.title}</h3>
+     {tasks.map((task)=><h3 key={task.id}>{task.title}</h3>
      )}
```
↑ h3タグに、key属性を追加した。

###15. タスク作成機能
ここはエラーが3か所あった。

####エラーその1.下記、FormControl, TextFieldを、importするようになっているが、エラーとなった。

```diff_typescript:App.tsx
import { FormControl, TextField } from '@material-ui/core'
```

理由は、material-ui/coreをインストールしてないから。

npm install --save @material-ui/core
上記コマンドで、material-ui/coreをインストールしたら、治った。
使い方は[ココ](https://qiita.com/h-yoshikawa44/items/efa33101b0a02cba7759)を参考に。

####エラーその2.AddToPhotosIconを、importすると、エラー。

```diff_typescript:App.tsx
import AddToPhotosIcon from '@material-ui/icons/AddToPhotos';
```
理由は、@material-ui/iconsをインストールしてないから。

npm install --save @material-ui/icons
上記コマンドで、material-ui/iconsをインストールしたら、治った。
アイコンの種類は[ココ](https://material-ui.com/ja/components/material-icons/)で確認。

####エラーその3.newTask(const変数)を定義するところでエラー。

```diff_typescript:App.tsx
  const newTask = (e: React.ChangeEvent<HTMLInputElement>)=>{
    db.collection("tasks").add({title : input});
    setInput("");
  }
```
理由は、変数eを使ってないから。
下記みたいに、変数eを削除すると治った。

```diff_typescript:App.tsx
- const newTask = (e: React.ChangeEvent<HTMLInputElement>)=>{
+ const newTask = ()=>{
    db.collection("tasks").add({title : input});
    setInput("");
  }
```

###16.TaskItemコンポーネント
動画の通りに。

###17.[更新]justify -> justifyContent
動画の通りに、控えておく。

###18.CRUD
動画の通りに。
すっげ、ちゃんと動いてるよ。

###19.CSS
動画の通りに。

###20.React-Router-DOM
下記エラーが発生。
'react-router-dom'モジュールがないよって指摘。

```diff_typescript:App.tsx
D:/Products/React.js/firebase-react-todo/src/index.tsx
TypeScript error in D:/Products/React.js/firebase-react-todo/src/index.tsx(5,38):    
Cannot find module 'react-router-dom' or its corresponding type declarations.  TS2307

  > 5 | import { Route, BrowserRouter } from 'react-router-dom';
      |                                      ^
    6 | import Login from './Login';
```

下記コマンドで、解決。

```prompt
npm install --save react-router-dom
npm i --save-dev @types/react-router-dom
```

###21.Firebase認証機能(Login)
動画の通りに。

###22.Firebase認証機能(Log out)
動画の通りに。

###23.Deploy
動画の通りに出来ず。
1:55ぐらいで、Hostring: Configure and deploy Firebase ...を選ぶように指示があるけど、無いんだよな。
Hostingから始まるので、選択できるのは下記2つ。

```prompt
 ( ) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ( ) Hosting: Set up GitHub Action deploys
```

だけど、どっちを選んでも、下記エラーで失敗する。

```prompt
Error: There are no Firebase projects associated with this account.
```

あともう少しなんだけど、わかんない。
有料版に登録して、聞けば解決するのかな？

残念。