React Task

by dzenkovich

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

ul {
  padding-left: 20px;
}

ol > li {
  margin-top: 10px;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

React

getBooks = function(){
	return [
    {author: 'Nikolai Gogol', title: 'Taras Bulba'},
  	{author: 'Alexander Pushkin', title: 'I Loved You'},
    {author: 'Mikhail Lermontov', title: 'The Circassians'},
    {author: 'Alexander Pushkin', title: 'Ruslan and Ludmila'},
    {author: 'Mikhail Lermontov', title: 'Arbenin'},
    {author: 'Nikolai Gogol', title: 'Dead Souls'},
    {author: 'Alexander Pushkin', title: 'Poltava'},
    {author: 'Nikolai Gogol', title: 'The Nose'},
    {author: 'Mikhail Lermontov', title: 'Azrail'},
  ]
}

class TodoApp extends React.Component {
	constructor(props){
  	super(props);
    this.state = {books: {}}
  }
  
  render() {
  	let books = this.state.books;
  	let autors = Object.keys(books).sort();
    
    return (
      <div>
        <h2>Books by Author</h2>
        <ol>
        </ol>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))