Take

React.jsを勉強していくにあたり、気づいたことなどのメモ。
参考サイト

Take

まわりの人によると、最新の書き方はhooksという書き方だそうです。
書籍はhooksの書き方でないものが多いので、公式サイトを読むをオススメされました。
UdemyのセールでReact Hooksコースを購入。

公式チュートリアルと「最速で学ぶFirebase + React Hooks」コースを平行ですすめる。

Take

公式チュートリアル

CodePenで三目並べのコードを実装。
関数コンポーネントの書き方はVueよりも便利かもしれない。
Vue2系だと親と子のコンポーネントごとに.vueファイルを作った場合、
propsの受け渡しにスペルミスがあればエラーになってしまう。
そこを気にする必要がないのは良いと思う。
Udemyコースと平行していると、ところどころhooksでない書き方があるのでそこを修正しながらすすめる。

[最速で学ぶFirebase + React Hooks ]

公式チュートリアルはHooksについての詳細な説明がない。
コース内のsetStateやuseStateの記述がお約束っぽいが理屈がわからず、先に公式チュートリアルを終了して、Docsを読み進めつつセクションをすすめていく。

ここまでの疑問点

関数コンポーネントにcssを割り当てるのに、cssファイルのお約束的な命名規則なり設置場所はあるのかどうか？
→特になさそう。開発環境が違うとそのあたりの独自のルールがあるのでは。
→Udemy ではCSS Moduleを使っている
ファイル名と拡張子の間に「.module」を挟めばCSS Modulesと認識される
→最近はCSS in JSという手法が流行りらしい

Take

CSSについて

見た目を整えたくて脱線しそうになるので注意。
Udemyコース内でmaterial-uiとcssモジュールを併用している部分で若干混乱する

CSS とスタイルの使用

まずは別の *.css にスタイルを定義して、className を使って参照するところからはじめると良いでしょう

Vueと同じ様に独自のタグでリッチなアニメーションもできるよう。

material-ui

@material-ui/stylesは@material-ui/core/stylesを切り出したものです。Material-UIを使わない場合のみインストールの必要があります。

Firebase Hosting へのデプロイ

npm i -g firebase-toolsで怒られる→npm自体をアップデート

 New major version of npm available! 6.14.11 → 7.17.0

firebase loginで怒られる

-bash: firebase: command not found

nodenvでバージョン管理しているので、インストール時のバージョンのPATH指定が必要でした。
npm bin -gでインストール時のbinのパスを表示させる。
Big Surなので.zshrcファイルに下記のPATHを追加しました。

export PATH="$HOME/.nodenv/versions/★バージョン番号★/bin:$PATH"

Take

[最速で学ぶFirebase + React Hooks ]コース完了。
外部公開までレクチャーしてもらえて、「リリースできた！」
という達成感が味わえる点が素晴らしいです。

記述についての説明はないので、公式サイトで情報を補足しながらすすめるのがベター。
公式サイトも分かりやすいし、Vue.jsを触っていたせいか理解しやすかったです。

Firebase + React Hooks(TypeScript)によるWebアプリ開発に進む。

Take

Firebase + React Hooks(TypeScript)によるWebアプリ開発受講中。

学んだこと

create-react-appで作成したプロジェクトは、プロジェクト直下の.envファイルを作成し、prefixに REACT_APP_ を付けるだけで.envから変数を読み込むことができる
FirebaseでSign-in metshod - Googleを有効にするときのサポートメールの入力でエラーがでて保存できなかった。
原因： プルダウンで表示されるgmailアドレスがFirebase作成時のGoogleアカウントと一致していなかった。複数Googleアカウントでchromeを開いていたのがよくなかった。Firebaseを作成したときのアカウントで入り直して無事メールのエラーが解消された

Take

今日のエラーとその原因

createUserWithEmailAndPasswordの処理で404エラー。
原因は.envのfirebaseのデータベースのURLの表記ミス。
Firebase 構成オブジェクトの詳細を読んでいなかった。

❌   databaseURL: "https://PROJECT_ID.firebaseapp.com",
⭕️   databaseURL: "https://PROJECT_ID.firebaseio.com",

見た目で対応したいところ

パスワード入力の表示のON/OFF
input type=file のサムネイル画像表示

Take

Hooksについてまだよく理解できてない。
下記のサイトの説明がわかりやすかった。
最近Reactを始めた人向けのReact Hooks入門

一般的に「DOMの操作」「ウェブAPIとの通信」などはuseEffect内で行います。Reactではこれらの操作のことを「作用」あるいは「副作用」と呼んでいます。

Take

今日のエラーとその原因

コンポーネントが描画されなかった。
描画に必要な情報が取得できてないから、ということらしい。

原因はuseEffectでfirebaseの情報を取得する際のスペルミス。
consoleエラーが何も出ないのがつらい。
そういうものなのだということで覚えておくことにする

Take

Storybookをデザイン確認用のツールと思っていたが、そうではなかった。
APIなしでコンポーネントの実装がすすめられて便利！
今まではダミーAPIでコンポーネントのパターンを確認をしていたが、それよりもラクにできる実感。