From c66df05e0fe2ea826782dc107650f113a3f58333 Mon Sep 17 00:00:00 2001
From: Brice Favre <brice.favre@gmail.com>
Date: Tue, 26 Jan 2016 15:24:18 +0100
Subject: [PATCH 1/3] Introduce new components and data

---
 src/components/Todo.js     | 15 +++++++++++++++
 src/components/TodoApp.js  |  4 +++-
 src/components/TodoList.js | 20 ++++++++++++++++++++
 src/index.js               |  7 ++++++-
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Todo.js
 create mode 100644 src/components/TodoList.js

diff --git a/src/components/Todo.js b/src/components/Todo.js
new file mode 100644
index 0000000..6ac4fd3
--- /dev/null
+++ b/src/components/Todo.js
@@ -0,0 +1,15 @@
+var React = require('react');
+
+
+function Todo(props) {
+  return (
+    <li style={{ 
+      textDecoration: props.completed ? 'line-through' : 'none',
+      cursor: props.completed ? 'default' : 'pointer'
+    }}>
+    {props.text}
+    </li>
+  );
+}
+
+module.exports = Todo;
\ No newline at end of file
diff --git a/src/components/TodoApp.js b/src/components/TodoApp.js
index cf942e2..6f626bb 100644
--- a/src/components/TodoApp.js
+++ b/src/components/TodoApp.js
@@ -1,9 +1,11 @@
 import React from 'react'
 
+import TodoList from './TodoList'
+
 export default function TodoApp(props) {
   return (
     <div className="todoApp">
-      Todo : Build The App
+      <TodoList data={props.data}/>
     </div>
   )
 }
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
new file mode 100644
index 0000000..f3f89c7
--- /dev/null
+++ b/src/components/TodoList.js
@@ -0,0 +1,20 @@
+var React = require('react');
+
+var Todo = require('./Todo.js');
+
+function TodoList(props) {
+  var todoNodes = props.data.map(function(todo) {
+    return (
+      <Todo completed={todo.completed} text={todo.text} />
+    );
+  });
+  return (
+    <div className="TodoList">
+      <ul>
+        {todoNodes}
+      </ul>
+    </div>
+  );
+}
+
+module.exports = TodoList;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 065df99..7269e9c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,4 +2,9 @@ import React from 'react'
 import { render } from 'react-dom'
 import TodoApp from './components/TodoApp'
 
-render((<TodoApp/>),document.getElementById('app'))
\ No newline at end of file
+var data = [
+  {id: 1, text: "Do The App", completed: 0},
+  {id: 2, text: "Add data", completed: 1},
+];
+
+render((<TodoApp data={data}/>),document.getElementById('app'))
\ No newline at end of file

From bddbacf60c30f1d4062e2317a6f37bca5b0728e3 Mon Sep 17 00:00:00 2001
From: Brice Favre <brice.favre@gmail.com>
Date: Wed, 27 Jan 2016 21:12:28 +0100
Subject: [PATCH 2/3] fixes #2 Add a key on Todo

---
 src/components/Todo.js     |  1 -
 src/components/TodoList.js | 10 ++++------
 src/index.js               |  2 +-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/Todo.js b/src/components/Todo.js
index 6ac4fd3..31cedb0 100644
--- a/src/components/Todo.js
+++ b/src/components/Todo.js
@@ -1,6 +1,5 @@
 var React = require('react');
 
-
 function Todo(props) {
   return (
     <li style={{ 
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index f3f89c7..992263f 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -3,15 +3,13 @@ var React = require('react');
 var Todo = require('./Todo.js');
 
 function TodoList(props) {
-  var todoNodes = props.data.map(function(todo) {
-    return (
-      <Todo completed={todo.completed} text={todo.text} />
-    );
-  });
+  var data = props.data;
   return (
     <div className="TodoList">
       <ul>
-        {todoNodes}
+        {data.map(function(todo) {
+          return <Todo key={todo.id} completed={todo.completed} text={todo.text} />
+        })}
       </ul>
     </div>
   );
diff --git a/src/index.js b/src/index.js
index 7269e9c..1f6a58b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,6 @@ import TodoApp from './components/TodoApp'
 var data = [
   {id: 1, text: "Do The App", completed: 0},
   {id: 2, text: "Add data", completed: 1},
-];
+]
 
 render((<TodoApp data={data}/>),document.getElementById('app'))
\ No newline at end of file

From aa2003fb352f4750325a2f77e5f11e5a69e510ab Mon Sep 17 00:00:00 2001
From: Brice Favre <brice.favre@gmail.com>
Date: Sat, 6 Feb 2016 16:54:18 +0100
Subject: [PATCH 3/3] Rewrite in es6

---
 index.html                 |  3 ---
 src/components/Todo.js     | 10 ++++------
 src/components/TodoList.js | 13 +++++--------
 src/index.js               |  2 +-
 4 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 1ca371d..d836afa 100644
--- a/index.html
+++ b/index.html
@@ -5,10 +5,7 @@
     <title>MontpellierJS - ToDo List!</title>
   </head>
   <body>
-
   <div id="app"></div>
-
   <script src="build/bundle.js"></script>
-
   </body>
 </html>
\ No newline at end of file
diff --git a/src/components/Todo.js b/src/components/Todo.js
index 31cedb0..9ba0312 100644
--- a/src/components/Todo.js
+++ b/src/components/Todo.js
@@ -1,6 +1,6 @@
-var React = require('react');
+import React from 'react'
 
-function Todo(props) {
+export default function Todo(props){
   return (
     <li style={{ 
       textDecoration: props.completed ? 'line-through' : 'none',
@@ -8,7 +8,5 @@ function Todo(props) {
     }}>
     {props.text}
     </li>
-  );
-}
-
-module.exports = Todo;
\ No newline at end of file
+  )
+}
\ No newline at end of file
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 992263f..fde395c 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -1,18 +1,15 @@
-var React = require('react');
+import React from 'react'
 
-var Todo = require('./Todo.js');
+import Todo from './Todo'
 
-function TodoList(props) {
-  var data = props.data;
+export default function TodoList(props) {
   return (
     <div className="TodoList">
       <ul>
-        {data.map(function(todo) {
+        {props.data.map(function(todo) {
           return <Todo key={todo.id} completed={todo.completed} text={todo.text} />
         })}
       </ul>
     </div>
-  );
+  )
 }
-
-module.exports = TodoList;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 1f6a58b..5914ad2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,4 +7,4 @@ var data = [
   {id: 2, text: "Add data", completed: 1},
 ]
 
-render((<TodoApp data={data}/>),document.getElementById('app'))
\ No newline at end of file
+render((<TodoApp data={data}/>), document.getElementById('app'))
\ No newline at end of file