React Todos App

App.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
}

a {
  color: #333;
  text-decoration: none;
}

.container {
  padding: 0 1rem;
}

.btn {
  display: inline-block;
  border: none;
  background: #555;
  color: #fff;
  padding: 7px 20px;
  cursor: pointer;
}

.btn:hover {
  background: #666;
}

db.json

{
  "todos": [
    {
      "id": 1,
      "title": "Take out the trash",
      "completed": false
    },
    {
      "id": 2,
      "title": "Dinner with family",
      "completed": true
    },
    {
      "id": 3,
      "title": "Do grocery shopping",
      "completed": false
    },
    {
      "id": 4,
      "title": "Finish React homework",
      "completed": false
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

Header.js

import React from 'react';
import { Link } from 'react-router-dom';

function Header() {
  // similar to render()
  return(
    <header style={headerStyle}>
      <h1>TodoList</h1>
      <Link style={linkStyle} to="/">Home</Link> | 
      <Link style={linkStyle}  to="/about"> About</Link>
    </header>
  )
}

const headerStyle = {
  background: '#333',
  color: '#fff',
  textAlign: 'center',
  padding: '10px'
}

const linkStyle = {
  color: '#fff',
  textDecoration: 'none'
}

export default Header;

TodoItem.js

export class TodoItem extends Component {
   
  getStyle =  () => {
    return  {
      background: '#f4f4f4',
      padding: '10px',
      borderBottom: '1px #ccc dotted',
      textDecoration: this.props.todo.completed ? 'line-through':'none'
    }
  }
}

const btnStyle = {
  background: '#ff0000',
  color: '#fff',
  border: 'none',
  padding: '5px 8px',
  borderRadius: '50%',
  cursor: 'pointer',
  float: 'right'
}