ReactでTo Do Listの作成

[NozomiSugiyama]

概要

Reactの研修内容として、個人が利用するタスク管理ツール「Todo」の作成を行う。 基本的に下記要件を満たしている成果物であれば実装方法/デザインは問わない。

要件

動作ブラウザ

• Chromeの最新バージョン

機能一覧

• Todoの参照
• Todoの追加
• Todoの変更
• Todoの削除

テクノロジースタック

• 言語: TypeScript
• UIライブラリ: React
• 状態管理: Redux
• スタイリング: styled-components
• Lint: ESLint

ストレージ機能

• localStorage

開発時の要件

開発手順

master branchへの直接のpushを原則禁止とし、各Chapter１つに対し1つのbase branchの作成を行う。 Chapterのfeatureごとに、featureブランチの作成を行い、作業はそのブランチにて行う。 featureの開発が始まった段階で、featureブランチからbaseブランチへのPRの作成を行い、作業が完了した段階で @NozomiSugiyama をReviewerへと追加する。 また、同時にSlackでも @NozomiSugiyama へと連絡を行い、通話をつないでコードレビューを行う。 baseからmasterブランチへのマージの際も同様に行う。

開発フロー

Chapter 1

• feature 1: 土台の作成 https://qiita.com/IzumiSy/items/b7d8a96eacd2cd8ad510
• feature 2: Reduxの導入 https://qiita.com/IzumiSy/items/b7d8a96eacd2cd8ad510
• feature 3: ディレクトリ構成の最適化

  Chapter 2

• feature 1: TodoList 機能の作成 (表示、追加)
  • styled-componentsの学習
• feature 2: TodoList 機能の追加 (削除、変更)

  Chapter 3

• feature 1: Todo Listの永続化

[NozomiSugiyama]

$ git clone https://github.com/taishi116/react-todo
$ git checkout -b base/chapter-1
$ git checkout -b feature/project-base
...