diff --git a/docs/4-advanced/04-react/declarative-ui.drawio.svg b/docs/4-advanced/04-react/declarative-ui.drawio.svg index 0e8e6d59..3ec84594 100644 --- a/docs/4-advanced/04-react/declarative-ui.drawio.svg +++ b/docs/4-advanced/04-react/declarative-ui.drawio.svg @@ -1,4 +1,309 @@ - - - -
ToDo リスト
勉強通学
ToDo リスト
勉強通学睡眠add("睡眠")
const state = {
  todos: ["勉強", "通学"],
};
  render 関数
const state = {
  todos: ["勉強", "通学", "睡眠"],
};
 \ No newline at end of file + + + + + + + + + + { + todos: ["大学へ行く", "勉強する"], + } + + + + + + + + + +
+
+
+ 状態（前） +
+
+
+ + + 状態（前） + + + + + + + + + + + { + todos: ["大学へ行く", "勉強する", "寝る"], + } + + + + + + + + + +
+
+
+ + 状態（後） + +
+
+
+ + + 状態（後） + + + + + + + + + + + + +
+
+
+ + addTodo("寝る") + +
+
+
+ + + addTodo("寝る") + + + + + + + + + + + + + + + + + + + +
+
+
+ + render関数 + +
+
+
+ + + render関数 + + + + + + + + + + + + +
+
+
+ UI（前） +
+
+
+ + + UI（前） + + + + + + + + + + + + + + + + + + +
+
+
+ 大学へ行く +
+
+
+ + + 大学へ行く + + + + + + + + + + + + + + + +
+
+
+ 勉強する +
+
+
+ + + 勉強する + + + + + + + + + + + + + + + + + + + +
+
+
+ 大学へ行く +
+
+
+ + + 大学へ行く + + + + + + + + + + + + + + + +
+
+
+ 勉強する +
+
+
+ + + 勉強する + + + + + + + + + + + + + + + +
+
+
+ 寝る +
+
+
+ + + 寝る + + + + + + + + + + + +
+
+
+ UI（後） +
+
+
+ + + UI（後） + + + + + + + + + + Text is not SVG - cannot display + + + + \ No newline at end of file