firebase firebaseの.envファイルを自動出力
自動生成ファイルの作成
binフォルダーを作成して、generate-env-file.jsを作成する。
#!/usr/bin/env node
const fs = require('fs');
const...
hashiori-blog2021
firebase 
React Udemyで作ったTodoリストをTypeScriptに書き換える
UdemyでTodoリストを作成したものを「独自カスタマイズ＆機能追加」第三弾目です。
第一弾「firebase8をfirebase9へ書き換える」、第二弾「ページの追加」です。
どうやるべきかググる
あまり新しい記事が...
firebase react で作ったアプリを firebase へデプロイ(パスのつなぎ方)
npm i -g firebase-tools
command not found: firebaseがでたらパスをつなぐために、export PATH=$PATH:npm bin -gを入力する。
firebase logi...
React React ルーティングの作成
TodoListをUdemyで作成したので、その機能を拡張する。
具体的には、「100均」「スーパーマーケット」「ドラッグストア」の３つ分けてそれぞれを別のURLで表示させる。
pagesの作成
src/componet...
firebase firebas8からfirebase9への書き換え
udemyでfirebase8を使用したtodoリストの作成をしたので、リファクタリングの練習として、firebase8→firebase9への書き換えを行う。
最初からfirebase9に書き換えながらudemyの講座を進めて行け...
React ReactへMaterial-UIの導入
インストール
npmインストールしていく。
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-ma...
firebase firebase 8(書き込み、読み込み、削除、更新)
データの書き込み
add()を使う。(idを自動生成)
api.jsを作成し、データの書き込みを記述する
import firebase from "firebase";
import {...
firebase firebaseにデータベースを作成する
Cloud Firestoreを作成
「構築」→「Cloud Firestore」で作成する
コレクションを作成
firebase firebase ユーザーログイン、ログアウトの状態でDOMの出し分け
まず普通にやってみる
currentUserにログイン情報が入っているので、それがあるか無いかで条件分岐して出し分ける。
import React, { useContext } from 'react'
im...
React グローバルstateの管理
createContext
const AuthContextへcreateContext()を代入して、exportする。
propsにchildrenを渡して、valueにstateを代入する。
import { u...