React simple todo app code

azizali · azizali · commit 20125bc3a8f5 · 2018-04-04T16:45:04.000-05:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "env", "react"
+    ]
+}
diff --git a/components/NewItem.js b/components/NewItem.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+export default class NewItem extends React.Component{
+  constructor(){
+    super();
+
+    this.state = {
+      text: ''
+    }
+
+    this.updateText = this.updateText.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  updateText(e){
+    this.setState({
+      text: e.target.value
+    })
+  }
+
+  handleSubmit(e){
+    e.preventDefault()
+    if(this.state.text === ''){
+      return
+    }
+    this.props.addItem(this.state.text)
+    this.setState({ text: ''})
+  }
+
+  render(){
+    return(
+      <form className="input-group">
+        <input
+          className="form-control"
+          value={this.state.text}
+          onChange={this.updateText}
+          type="text"/>
+        <span className="input-group-btn">
+          <input
+            className="btn btn-default"
+            type="submit"
+            value="Add Item"
+            onClick={this.handleSubmit}
+            />
+        </span>
+      </form>
+    )
+  }
+}
diff --git a/components/Todo.js b/components/Todo.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default class Todo extends React.Component{
+  constructor(props){
+    super(props)
+  }
+  render(){
+    return(
+      <li className="list-group-item">
+        {this.props.item}
+        <button
+          className="badge"
+          onClick={()=>{this.props.onDelete(this.props.todoId)}}>X</button>
+      </li>
+    )
+  }
+}
diff --git a/components/TodoApp.js b/components/TodoApp.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import NewItem from './NewItem'
+import Todo from './Todo'
+
+export default class TodoApp extends React.Component{
+  constructor(){
+    super();
+    this.state = {
+      list: [
+        "Get Milk",
+        "Finish Homework",
+        "Code a website"
+      ]
+    }
+    this.addItem = this.addItem.bind(this)
+    this.deleteItem = this.deleteItem.bind(this)
+  }
+
+  addItem(item){
+    let newList = this.state.list
+    newList.push(item)
+    this.setState({
+      list: newList
+    })
+  }
+
+  deleteItem(index){
+    let newList = this.state.list
+    newList.splice(index, 1)
+
+    this.setState({
+      list: newList
+    })
+  }
+
+  render(){
+    return(
+      <div>
+        <h3 className="text-center">Todo List App</h3>
+        <NewItem addItem={this.addItem}/>
+        <br/>
+        <ul className="list-group">
+          {this.state.list.map((item, index)=>{
+            return <Todo
+              todoId={index}
+              onDelete={this.deleteItem}
+              key={index} item={item}/>
+          })}
+        </ul>
+      </div>
+    )
+  }
+}
diff --git a/main/index.html b/main/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Todo App</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+</body>
+</html>
diff --git a/main/index.js b/main/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import TodoApp from '../components/TodoApp'
+
+function App(){
+    return (
+        <div className="container">
+            <TodoApp />
+        </div>
+    )
+}
+
+ReactDOM.render(
+    <App />,
+    document.getElementById('app')
+)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +    "presets": [
 +        "env", "react"
 +    ]
 +}