|  | @@ -0,0 +1,31 @@
 | 
	
		
			
				|  |  | +// App component : represents the whole app.
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +App = React.createClass({
 | 
	
		
			
				|  |  | +  getTasks() {
 | 
	
		
			
				|  |  | +    return [
 | 
	
		
			
				|  |  | +      { _id: 1, text: "This is task 1" },
 | 
	
		
			
				|  |  | +      { _id: 2, text: "This is task 2" },
 | 
	
		
			
				|  |  | +      { _id: 3, text: "This is task 3" },
 | 
	
		
			
				|  |  | +    ];
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  renderTasks() {
 | 
	
		
			
				|  |  | +    return this.getTasks().map((task) => {
 | 
	
		
			
				|  |  | +      return <Task key={task._id} task={task} />;
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  render() {
 | 
	
		
			
				|  |  | +    return (
 | 
	
		
			
				|  |  | +      <div className="container">
 | 
	
		
			
				|  |  | +        <header>
 | 
	
		
			
				|  |  | +          <h1>Todo list</h1>
 | 
	
		
			
				|  |  | +          </header>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        <ul>
 | 
	
		
			
				|  |  | +          {this.renderTasks()}
 | 
	
		
			
				|  |  | +        </ul>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +});
 |