React.ts(Redux Toolkitと Firebaseを用いた開発) プロジェクトの流れ

React.ts(Redux と Firebase を用いた開発) プロジェクトの流れ

はじめに

React.ts でプロジェクトを作成する際の、
プロジェクト作成からファイル削除、開発の流れを自分の中でテンプレ化することで、
React.ts での開発スピードを上げるため

##　プロジェクト開始

• プロジェクト作成

作りたいアプリ名のフォルダを mkdir

プロジェクト作成

npx create-react-app . --template redux-typescript

• プロジェクトスタート

yarn start

モジュールのインストール

1. Material-ui

yarn add @material-ui/core @material-ui/icons

1. Firebase

yarn add firebase

出来ない場合は yarn upgrade を実行後、再度実行する

※↑ は global で add していれば必要ない？

次に Firebase console でプロジェクトを新規作成

作成後はコードのアイコンをクリックし、
アプリを登録し(Hosting はあとで)
console に戻り、
歯車の「プロジェクトを設定を選択」。コードアイコンをクリック

var firebaseConfig 内をコピーし、vscode に env ファイルをプロジェクト直下に作成(.env)
貼り付ける

REACT_APP_FIREBASE_APIKEY="hogehoge"
REACT_APP_FIREBASE_DOMAIN="appname.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE="https://appname.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID="appname"
REACT_APP_FIREBASE_STORAGE_BUCKET="appname.appspot.com"
REACT_APP_FIREBASE_SENDER_ID="123456~"
REACT_APP_FIREBASE_APP_ID="1:1234hoge:web:132b4j54n4hogehoge~"

1 回ターミナル切ってもう一度 yarn start

src/firebase.ts を作成

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

const firebaseConfig = {
    apiKey: "hogehoge",
    authDomain: "appname.firebaseapp.com",
    projectId: "appname",
    storageBucket: "appname.appspot.com",
    messagingSenderId: "123456~",
    appId: "1:1234hoge~:web:35n4ijgrtjhogehoge~"
};

const firebaseApp = firebase.initializeApp(firebaseConfig)

export const db = firebaseApp.firestore();
export const auth = firebaseApp.auth();
export const storage = firebase.storage();
export const provider = new firebase.auth.GoogleAuthProvider();

features/counter の counterSlice.ts のみを features 直下に移動し、counter フォルダを削除する

counterSlice.ts→userSlice.ts に名前を変更後、ファイル内の AppThunk の import を消す。

features/userSlice.ts を以下のように変更

import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../app/store";
// import { fetchCount } from "./counter/counterAPI";

export const userSlice = createSlice({
  name: "user",
  // ユーザー設定に必要な情報を追加
  //stringが型推論として入るS
  initialState: {
    user: { uid: "", photoUrl: "", displayName: "" },
  },
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = { uid: "", photoUrl: "", displayName: "" };
    },
  },
});

export const { login, logout } = userSlice.actions;

export const selectUser = (state: RootState) => state.user.user;

export default userSlice.reducer;

app/store.ts を以下のように変更

import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
import userReducer from "../features/userSlice";

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

App.ts の div タグ内を空にする。logo の import を削除する

redux devtools の導入

App.css→App.modules.css に変更
App.modules.css の中を書き換える
App.ts に import styles from "./App.modules.css"

Google 認証機能の追加

App.ts でログイン時は Feed.tsx
ログアウト時は Ayth.tsx に遷移するように処理書く
Auth.tsx に Material-ui でログイン時のテンプレを書く
ログイン画像はアプリに関連ありそうな画像で固定する
Google サインインボタンの実装

チーム開発の流れ

git checkout setup-video-component

実装

でけた

git diff --cached -w
git add -A
git commit -m "feature/issue 番号_やった内容"
git push origin setup-video-component
紐づいた内容のプルリクエストを github 上にて Master(Main)に対して行う
git checkout feature
git merge setup-video-component
git push origin feature

デプロイ

• firebase console で Hosting 開く

 npm run dev

firebase login

firebase init

↓
Hosting を選択
↓
Use an existing project を選択
↓
アプリ名選択
↓
public ではなく build と入力
↓

firebase deploy

完成！！