|> Weeeeeeb

どんどんドーナツどーんと行こう!(10万円山さん)

React.jsでTodoアプリ了(デザイン無視)

デザイン修正行いました。

kuriya0909.hatenablog.com

以前からReact.jsの勉強のためにやっていた
Todoアプリの作成が一旦完了しました。

デザインや他の機能の追加が必要で
アプリの必要十分条件が満たせていないので
今後も継続して実装します。

github.com

続きにファイルの構造や機能郡について説明

構造

jsファイルを主に取り上げます。

./src
├── index.html
└── js
   ├── app.js
   ├── bundle.js
   └── components
       ├── NewTodoItem.js
       ├── Todo.js
       ├── TodoItem.js
       └── TodoList.js

app.jsでは単にTodo.jsを呼び出してrenderしているだけなので、
本体はcomponentのjs郡です。

ファイル名を見れば大体わかりますが、
Todo.jsが一番の親でstateを管理します。

コンポーネントの役割

  • Todo.js -> Todoアプリの基幹
  • TodoList.js -> 作成したTodo全体を管理
  • TodoItem.js -> Todo単体を管理
  • NewTodoItem.js -> 新規作成するTodoを管理

機能

  • Todoを作成する
  • Todoを削除する

豊富な機能()
編集すらないと言う…

やってみて

Reactのイベントの書き方やstate/propsについて
実際に書いてみて理解できました。
最近プログラミングをそもそもやれてこれてなかったので、
その意味でも楽しめました

ES6についてもシンタックスを学べてこれてるかな??