ReactJS ToDoList

ReactJS-ToDoList

導入

このプロジェクトは、React JS ライブラリを使用して、単純な To-Do リスト Web アプリケーションのフロントエンドを実装し、純粋な CSS を置き換えるスタイル付きコンポーネントも実装します。
これには、ログイン ページとアプリの一般的な UI が含まれます。
このプロジェクトはフロントエンドの調査のみを目的としているため、ログイン認証ロジックと各ユーザーのタスク データベースは実装されていません。

デモンストレーション

デモ.mp4

インスピレーション

ログイン ページは、Jordan Hughes によるこのデザインにインスピレーションを受けています。ホームページは、Mik Skuza によるこのデザインにインスピレーションを受けています。

特徴

• メイン アプリケーションにリダイレクトされる、[サインイン] ボタンを含むログイン ページ。
• ナビゲーション サイドバーと ToDo リスト領域を備えたアプリケーション UI。
• 新しいタスクを追加し、名前とカテゴリのプロパティを設定します。
• アクションを確認するためのモーダルを含むタスクの削除。
• チェックボックスを使用してタスクの完了を確認します。
• To Do リストに表示されるタスクを「完了」、「未完了」、または「すべて」でフィルタリングします。
• サイドバーで選択して、ToDo リストに表示されているタスクをカテゴリ別にフィルタリングします。
• 権限: ユーザーはログイン前にホームページにアクセスすることはできず、ログイン後にはログイン ページにもアクセスできません。

注: 現在、「タスクの編集」とカテゴリの追加または削除の機能は実装されていません。これは、個人的な学習にあまり貢献せず、非常に時間がかかると考えたためです。たぶんこれは後で実装するでしょう。

使用法

このプロジェクトを自分で試してみたい場合:

1. https://nodejs.org/en/ から Node をマシンにインストールします。
2. ターミナルコマンドを使用してマシンに Yarn をインストールします: sudo npm install -g yarn
3. https://git-scm.com/downloads からマシンに Git をインストールします。
4. このリポジトリのクローンをマシンに作成します。 (これを行う方法の詳細はこちら)
5. プロジェクトをダウンロードしたフォルダー内のターミナルで、 yarn install実行して、使用されているすべての依存関係をインストールします。
6. ブラウザでプロジェクトを実行するには、 yarn startを実行します。