react

components/Board.jsx

@@ -1,9 +1,52 @@
 import React from 'react';
+import List from './list';
+
+const Button = ({onClick, children}) => (
+    <button onClick={onClick}>{children}</button>
+);
 
 export default class Board extends React.Component {
+    state = {
+        newListName: '',
+        lists: []
+    };
+
+    onTitleChange = e => {
+        this.setState({newListName: e.target.value});
+    };
+
+    onAddList = () => {
+      this.setState({
+          lists: this.state.lists.concat([this.state.newListName]),
+          newListName: ''
+      });
+    };
+
+    preventDefault = e => {
+        e.preventDefault();
+    }
+
+    onListDelete = i => {
+      this.setState({
+          lists: this.state.lists.filter((item, index) => index != i),
+      });
+    }
+
     render() {
+        let content = [];
+        for (let i = 0; i < this.state.lists.length; i++) {
+            content.push(< List key = { this.state.lists[i] } title = { this.state.lists[i] } onDelete = { () => this.onListDelete(i) } />);
+        }
         return (
-            <div>Board!</div>
+            <div>
+                <form onSubmit={this.preventDefault}>
+                    <input onChange={this.onTitleChange} value={this.state.newListName}/>
+                    <Button onClick={this.onAddList}>add list</Button>
+                </form>
+                <div className="board">
+                    {content}
+                </div>
+            </div>
         );
     }
 }

components/item.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Button = ({onClick, children}) => (
+    <button onClick={onClick}>{children}</button>
+);
+
+export default class Item extends React.Component {
+    onDeleteItem = () => {
+        this.props.onDelete();
+    };
+
+    render() {
+        return (
+            <div>
+                <div className="item">
+                    {this.props.itemContent}
+                </div>
+                <Button onClick={this.onDeleteItem}>del list</Button>
+            </div>
+        );
+    }
+}

components/list.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Item from './item';
+
+const Button = ({onClick, children}) => (
+    <button onClick={onClick}>{children}</button>
+);
+
+export default class List extends React.Component {
+    state = {
+        newContent: '',
+        items: []
+    };
+
+    onContentChange = e => {
+        this.setState({newContent: e.target.value});
+    };
+
+    onAddItem = () => {
+      this.setState({
+          items: this.state.items.concat([this.state.newContent]),
+          newContent: ''
+      });
+    };
+
+    onDeleteList = () => {
+      this.props.onDelete();
+    };
+
+    preventDefault = e => {
+        e.preventDefault();
+    }
+
+    onItemDelete = i => {
+      this.setState({
+          items: this.state.items.filter((item, index) => index != i),
+      });
+    }
+
+    render() {
+        let content = [];
+        for (let i = 0; i < this.state.items.length; i++) {
+            content.push(< Item key = { this.state.items[i] } itemContent = { this.state.items[i] } onDelete = { () => this.onItemDelete(i) } />);
+        }
+        return (
+            <div>
+                <h4>{this.props.title}</h4>
+                <div className="list">
+                    { content }
+                </div>
+                  <form onSubmit={this.preventDefault}>
+                      <input onChange={this.onContentChange} value={this.state.newContent}/>
+                      <Button onClick={this.onAddItem}>add item</Button>
+                  </form>
+                  <Button onClick={this.onDeleteList}>del list</Button>
+            </div>
+        );
+    }
+}

index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="./styles.scss">
     <title>Task Board</title>
 </head>
 

package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "babel-core": "^6.11.4",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-class-properties": "^6.10.2",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-1": "^6.5.0",
@@ -23,6 +24,9 @@
       "react",
       "stage-1",
       "es2015"
+    ],
+    "plugins": [
+      "transform-class-properties"
     ]
   },
   "dependencies": {

styles.scss

@@ -0,0 +1,28 @@
+.item {
+  height: 100px;
+  width: 100px;
+  background-color: gray;
+  margin: 5px;
+}
+
+.list {
+  width: 110px;
+  background-color: black;
+  margin: 5px;
+}
+
+.board {
+  display: flex;
+}
+
+.add-item-btn {
+  height: 20px;
+  width: 20px;
+  background-color: red;
+}
+
+.add-list-btn {
+  height: 40px;
+  width: 40px;
+  background-color: yellow;
+}