React.jsを触った所感
TakeReact.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という手法が流行りらしい
TakeCSSについて
見た目を整えたくて脱線しそうになるので注意。
Udemyコース内でmaterial-uiと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"
[最速で学ぶFirebase + React Hooks ]コース完了。
外部公開までレクチャーしてもらえて、「リリースできた！」
という達成感が味わえる点が素晴らしいです。
記述についての説明はないので、公式サイトで情報を補足しながらすすめるのがベター。
公式サイトも分かりやすいし、Vue.jsを触っていたせいか理解しやすかったです。
Firebase + React Hooks(TypeScript)によるWebアプリ開発に進む。
TakeFirebase + 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のサムネイル画像表示
TakeHooksについてまだよく理解できてない。
下記のサイトの説明がわかりやすかった。
最近Reactを始めた人向けのReact Hooks入門
一般的に「DOMの操作」「ウェブAPIとの通信」などはuseEffect内で行います。Reactではこれらの操作のことを「作用」あるいは「副作用」と呼んでいます。
Take今日のエラーとその原因
コンポーネントが描画されなかった。
描画に必要な情報が取得できてないから、ということらしい。
原因はuseEffectでfirebaseの情報を取得する際のスペルミス。
consoleエラーが何も出ないのがつらい。
そういうものなのだということで覚えておくことにする
TakeStorybookをデザイン確認用のツールと思っていたが、そうではなかった。
APIなしでコンポーネントの実装がすすめられて便利！
今まではダミーAPIでコンポーネントのパターンを確認をしていたが、それよりもラクにできる実感。