Skip to content

idw-coder/react-notion

BranchesTags

Repository files navigation

参考、ツールなど

講座概要

  • React Typescript Supabaseを使用した開発
  • 基本的なCRUD 検索 リアルタイム通信
  • Jotaiを使用したグローバル状態管理

備忘メモ

名前付きエクスポート、デフォルトエクスポート

index.html と src/main.tsx の Vite + React + TypeScriptの標準的な構成

%%{init: {'theme':'base', 'themeVariables': {'primaryTextColor': '#000', 'fontSize': '12px'}}}%%
flowchart TD
    A[ブラウザがindex.htmlを読み込み] --> B[main.tsxスクリプトを実行]
    B --> C[Appコンポーネントを読み込み]
    C --> E[root要素にレンダリング]
    E --> F[Reactアプリケーション表示]
    
    style A fill:#e1f5fe
    style F fill:#c8e6c9
Loading

React Router

React Routerは、Reactアプリケーションでページ遷移（ルーティング）を実装するための公式ライブラリです。

URLとコンポーネントの紐付け →リロードせずにURLの変更、表示内容の切り替え

使用ファイル App.tsx

  return (
    <BrowserRouter>
      <div className="h-full">
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="/notes/:id" element={<NoteDetail />} />
          </Route>
          <Route path="signin" element={<SignIn />} />
          <Route path="signup" element={<SignUp />} />
        </Routes>
      </div>
    </BrowserRouter>
  )

<Route> パスとコンポーネントを紐づける

<Route path="パス" element={<コンポーネント />} />

<Routes> <Routes>は複数の<Route>を囲む親要素 <Routes>は現在のURLに最も一致する1つのRouteだけを表示します。

グローバルステートとローカルステートの違い

ローカルステートはプロップスの数が増え、複雑になってしまう欠点がある ↓ グローバルステートで解決（ローカルコンポーネントから外に出すイメージ）

Jotaiの使い方

note.state.ts

useStateとの違い

項目 useState useAtom
スコープ コンポーネント内のみ アプリケーション全体
共有 親子間でpropsで渡す どこからでも直接アクセス
状態の定義 コンポーネント内 外部で定義可能
依存関係 コンポーネントのライフサイクル
コンポーネントと一緒に破棄		 独立

GitHub Pagesデプロイ手順

  1. .github/workflows/deploy.ymlを作成済み
  2. Settings → Pages → Source を「GitHub Actions」に設定
  3. GitHub Secrets にVITE_SUPABASE_URLとVITE_SUPABASE_API_KEYを登録
  4. mainまたはdevブランチにpushすると自動デプロイ
  5. デプロイURL: https://idw-coder.github.io/react-notion/

手順

  • tsconfig.app.jsonを修正

  • tailwind.config.jsを作成。

  • vite.config.tsの修正

  1. リアクトルーターをインストール
npm install react-router-dom react-textarea-autosize

npm install @supabase/supabase-js@2.47.7
  1. Supabaseのセットアップ プロジェクト作成
  • Supabaseのライブラリのインストール
npm install @supabase/supabase-js

https://supabase.com/docs/reference/javascript/installing

  1. Supabaseの初期化
  • Web管理画面のコンソールでSign In / Providers
  • supabase.tsを作成

  1. ユーザー登録APIをコーディングauth.repository.ts

  2. ユーザー登録APIをコンポーネントから呼び出す処理をコーディングSignup.tsx

  • 質問 async await

  1. ログインAPIをコーディングauth.repository.ts

  2. ログインAPIをコンポーネントから呼び出す処理をコーディングSignin.tsx

  3. ログイン情報をグローバールステートに

  • Jotaiライブラリを導入
npm install jotai
  1. current-user.state.ts にAtomを定義してグローバルステートを使用できるように

  • ユーザー登録時にログイン情報をグローバルステートに追加する処理をコーディング src\Layout.tsx src\pages\Signup.tsx src\pages\Signin.tsx

  • src\modules\auth\auth.repository.ts セッションから現在のユーザーにログイン情報を取得してsrc\App.tsxにわたす

  1. src\modules\notes\note.repository.tsに特定のIDノートを取得する処理をコーディング

  2. src\pages\NoteDetail.tsx components\TitleInput.tsxにノートのタイトルを表示

  3. src\components\TitleInput.tsx src\modules\notes\note.repository.ts タイトル更新できるように

  4. src\components\TitleInput.tsx src\modules\notes\note.repository.ts タイトル更新できるように

  • 質問 SQL全然使用したことないですが、学習優先度は高いですか？MySQL PostgreSQL
  1. BlockNoteインストール
npm install @blocknote/core @blocknote/react @blocknote/mantine

  1. BlockNoteの設定

  2. BlockNoteの本文更新処理

  3. ノートの詳細ページの遷移をコーディング

  4. 検索モーダルの表示

  5. Debounce（検索の処理で都度実行されないように）

npm install use-debounce

  1. 検索結果からノート詳細へ遷移

  2. 子ノートも削除するSQLをSupabaseに登録

create or replace function delete_children_notes_recursively(note_id INTEGER)
returns setof notes
language sql
as $$
  WITH RECURSIVE r AS (
        SELECT * FROM notes WHERE id = $1
      UNION ALL
        SELECT notes.* FROM notes, r WHERE notes.parent_document = r.id
  )
  DELETE FROM notes WHERE id IN (SELECT id FROM r) RETURNING *;
$$;

  1. グローバルステートの削除

  2. Supabaseのリアルタイム通信の設定

  • Supabaseウェブコンソール画面ダッシュボードメニューから Database→Tables→Edit table→Enable Realtimeにチェックを入れてsave

  • SQL Editorに下記のコードを張り付け実行

ALTER TABLE notes REPLICA IDENTITY FULL
  1. リアルタイム通信処理コール

ブラウザで2タブで開き削除した際もう一方のタブで下記エラー

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

About

react-notion-navy.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages