Reactノートアプリ

■URL

https://noteapp-with-react-gscv.vercel.app/

■使用技術一覧

フロントエンド技術

• React
• JSX
• コンポーネント分割（App / Sidebar / Main）
• useState（React Hook）
• useEffect（React Hook）
• props（プロップス）
• 条件付きレンダリング（if, &&）
• イベントハンドラ（onClick, onChange）

ステート管理・配列操作

• スプレッド構文（…activeNote）
• 計算されたプロパティ（[key]: value）
• 配列の map()（リスト表示／更新）
• 配列の filter()（ノートの削除）
• ユニークID生成ライブラリ（uuid()）

スタイリング

• CSS（グローバルCSSファイル：App.css など）
• className（ReactでCSSクラスを指定）

データ永続化

• localStorage（ブラウザにノートを保存）

Markdown表示

• ReactMarkdown（MarkdownをHTMLに変換・表示）

プロジェクト構成

• コンポーネントベースのフォルダ構成（components/Sidebar, components/Main）
• ユーティリティ的関数（例：getActiveNote, onUpdateNote）

開発ツール・ライブラリ

• Vite（プロジェクトビルドツール）※仮にVite使用時
• npm / bun（パッケージ管理）
• react-uuid（ID生成）
• react-markdown（Markdown表示）

■使用言語・ツール

• HTML
• CSS
• JavaScript(React)

全体イメージ