bai 1

Author: DEVfancybear

README.md renamed to example_1/README.md

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+import ItemTodo from "./components/ItemTodo";
+import "./App.css";
+
+class App extends Component {
+  constructor() {
+    super();
+    this.todoItems = [
+      { title: "Dắt gấu đi chơi", isComplete: true},
+      { title: "Đi shopping", isComplete: true},
+      { title: "Đi siêu thị"}
+    ];
+  }
+  render() {
+    let a = this.todoItems.length;
+    return (
+      <>
+        {a > 0 &&
+          this.todoItems.map((item, index) => (
+            <ItemTodo key={index} item={item} />
+          ))}
+        {a === 0 && <div>Không có gì</div>}
+        {/* dùng map để biến 1 arr gồm các obj phải thêm key */}
+      </>
+    );
+  }
+}
+
+export default App;

package.json renamed to example_1/package.json

@@ -0,0 +1,11 @@
+.item_todo {
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 24px;
+  color: #4d4d4d;
+  text-align: center;
+}
+.item_done {
+    text-decoration: line-through;
+    opacity: 0.3;
+}

public/favicon.ico renamed to example_1/public/favicon.ico

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import './ItemTodo.css';
+class ItemTodo extends Component {
+  render() {
+      const items = this.props.item;
+      let className = 'item_todo';
+      if(items.isComplete) {
+          //thêm class css khi click 
+         className += ' item_done';
+      }
+    return (
+      <div className={className}>
+        <p>{items.title}</p>
+      </div>
+    );
+  }
+}
+export default ItemTodo;