react で todo app を作る #1

r-toki · 2021-01-11T13:47:22Z

Vue で todo app を作ったときに受けたフィードバックを活かしつつ、React でも todo app を作りました。

参考

メモ化について
https://qiita.com/soarflat/items/b9d3d17b8ab1f5dbfed2#%E3%81%AA%E3%81%9C-reactmemo-%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8B
tailwind css で class に抽出する方法
https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply
submit 時に form の値をとる例

const handleSubmit = (event) => {
  const formData = new FormData(event.currentTarget)
  xxxx(formData.get('title'))
}

aki77

ひとまずザッと見ましたー。

.gitignore

package.json

src/App.tsx

src/components/CreateTodoForm.tsx

src/components/TodoItem.tsx

src/components/TodoList.tsx

src/App.tsx

src/components/CreateTodoForm.tsx

aki77 · 2021-01-16T09:34:10Z

src/App.tsx

 import CreateTodoForm from './components/CreateTodoForm';
 import TodoList from './components/TodoList';
-import * as TodosService from './local-storages/todos-service';
+import useTodos from './hooks/use-todos';


細かい突っ込みするとファイル名の命名ルールは統一したいです。

.tsx は PascalCase で
.ts は PascalCase 以外で
みたいなルールって一般的ではないですか？
vue の参考にしてたプロジェクトがそのようなルールっぽかったので踏襲してました。

PascalCaseとkebabケースのファイル名が混在はあまり一般的ではないと思うよ！
いつくかパターンあるんだけど、パッといい参考リンクが出てこない、、（調べてみて！）

.tsx は PascalCase で
.ts はcamelCase で
にしようと思います。
調べても良い記事が見つからなかったので、具体的なプロジェクトのパターンから習いました。
https://github.com/gothinkster/react-redux-realworld-example-app

google の styleguide だと以下のようです。

File names must be all lowercase and may include underscores (_) or dashes (-), but no additional punctuation. Follow the convention that your project uses. Filenames’ extension must be .js.

https://google.github.io/styleguide/jsguide.html#file-name

aki77 · 2021-01-16T09:42:09Z

src/components/TodoList.tsx

+  };
+
+  const handleClickEdit: HandleClickEdit = (todoId) => {
+    setTodoBeingEdited({ ...todos.find((todo) => todo.id === todoId) } as Todo);


このasの使い方だと何のためか読み解きにくいし、そもそも避けるのが難しいケース以外では気軽にasは使わないほうがいいというのが一般的にはよく言われる意見だと思います。

const selectedTodo = todos.find((todo) => todo.id === todoId) if (!selectedTodo) throw Error('xxxx') setTodoBeingEdited({...selectedTodo});

aki77 · 2021-01-16T09:44:46Z

src/components/TodoList.tsx

+        <div key={todo.id}>
+          {isTodoBeingEdited(todo) ? (
+            <EditTodoForm
+              todoTitleBeingEdited={todoBeingEdited!.title}


ここも気軽に!使わないほうがいいかなと。

自分ならprops名はシンプルにtitleとかvalueとか付けると思います。
今だと逆にどういう意味だろうと考えてしまってスッと読めないというか。
コンポーネントが適切に分かれていれば、そんなにややっこしい名前のpropsは生まれにくいはずです。（これくらいの規模なら）

aki77 · 2021-01-16T09:48:04Z

src/components/TodoList.tsx

+};
+
+const TodoList: FC<Props> = ({ todos, handleRemoveTodo, handleUpdateTodo }) => {
+  const [todoBeingEdited, setTodoBeingEdited] = useState<Todo | null>(null);


そもそも選択中のidだけじゃなくて選択中todoの情報を丸っと持つ必要があるのは何故なんだろう？
同じデータをあちこちで持つようになればなるほど状態管理が複雑になって後が辛くなりそうだなと。

aki77 · 2021-01-16T09:51:05Z

src/components/TodoList.tsx

+
+  // EditTodoForm の handler
+  const handleChangeTodoTitleBeingEdited: HandleChangeTodoTitleBeingEdited = (event) => {
+    setTodoBeingEdited((prevObj) => ({ ...prevObj, title: event.target.value } as Todo));


TodoListが状態として選択中todoの編集途中のtitleまで状態として持つ必要はないんじゃないかと思いました。（役割として不適切な気が）
編集途中のtitleはEditTodoFormだけが知っていればよくて、submit時にそのtitleが送られてくればそれで十分な気がするけどそんなことはないかな？

FormComponent を stateless にすべきかどうか悩んでました。
TodoList では編集中の todo の id だけ管理して、title の編集状態は EditTodoForm に持たせるようにします。

そして場合によってはEditTodoFormでも入力途中のtitleを状態として持たないことも可能だなと思いました。（この辺は好みな気もするけど参考までに）
https://ja.reactjs.org/docs/uncontrolled-components.html

単にsubmit時に値が取れれば十分なら、submit時のeventから値を引っ張るという方法もあるなと。

const handleSubmit = (event) => { const formData = new FormData(event.currentTarget) xxxx(formData.get('title')) }

なるほどー
こういう書き方もあるんですね
メモメモ

r-toki · 2021-01-22T00:19:28Z

レビューありがとうございました！

r-toki added 3 commits January 11, 2021 16:59

add settings (prettier and tailwind)

ca360bd

ひとまず完成

1bb1e19

コメントを追加

21db9be

aki77 reviewed Jan 11, 2021

View reviewed changes

t-kojima reviewed Jan 12, 2021

View reviewed changes

src/components/TodoList.tsx Outdated Show resolved Hide resolved

src/App.tsx Outdated Show resolved Hide resolved

r-toki added 2 commits January 16, 2021 18:01

fix: after PR

b171c19

fix: enable 'checked' in tailwind

38c504c

aki77 reviewed Jan 16, 2021

View reviewed changes

r-toki added 2 commits January 18, 2021 21:58

fix: after review

e54a04e

fix: EditTodoForm props

34cffd5

r-toki merged commit 8ec7e00 into main Jan 22, 2021

react で todo app を作る #1

react で todo app を作る #1

Uh oh!

Conversation

r-toki commented Jan 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

参考

Uh oh!

aki77 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

r-toki Jan 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aki77 Jan 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

r-toki commented Jan 22, 2021

Uh oh!

Uh oh!

r-toki commented Jan 11, 2021 •

edited

Loading

r-toki Jan 18, 2021 •

edited

Loading

aki77 Jan 16, 2021 •

edited

Loading