tomasji · tomasji · Sep 15, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,14 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+npm-debug.log
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="./src/favicon.ico">
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` in this folder.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "todo-list",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.4.1"
+  },
+  "dependencies": {
+    "react": "^15.3.1",
+    "react-dom": "^15.3.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "./node_modules/react-scripts/config/eslint.js"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,3 @@
+.rm {
+  cursor: pointer;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import './App.css';
+
+class NewItem extends Component {
+  render() {
+    const { addItem } = this.props;
+    return (
+      <div>
+        <form onSubmit={ (e) => {
+          e.preventDefault();
+          addItem(this.refs.new_item.value);
+          this.refs.new_item.value = '';
+        }}>
+          <input type='text' ref='new_item' />
+          <button type="submit">Add Item</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+class ItemList extends Component {
+  render() {
+    const { items, removeItem } = this.props;
+    return (
+      <ul>
+        { items.map((item, index) => <li className='rm' key={index} onClick={()=>removeItem(index)}>{item}</li>) }
+      </ul>
+    );
+  }
+}
+
+class Todo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: ['Koupit maso', 'Vypit pivo']
+    };
+  }
+
+  render() {
+    const items = this.state.items;
+    return (
+      <div>
+        <h1>Todo List ({items.length})</h1>
+        <NewItem
+          addItem={ (item) => { if (item !== '') { this.setState({ items: items.concat([item]) }) } } }
+        />
+        <ItemList
+          items={ items }
+          removeItem={ (i) => this.setState({ items: items.slice(0,i).concat(items.slice(i+1)) }) }
+        />
+      </div>
+    );
+  }
+}
+
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <Todo />
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 10px;
+  padding: 10px;
+  font-family: sans-serif;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/src/logo.svg b/src/logo.svg