React.jsでTodoアプリ了(デザイン無視)
デザイン修正行いました。
以前からReact.jsの勉強のためにやっていた
Todoアプリの作成が一旦完了しました。
デザインや他の機能の追加が必要で
アプリの必要十分条件が満たせていないので
今後も継続して実装します。
続きにファイルの構造や機能郡について説明
構造
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についてもシンタックスを学べてこれてるかな??