React
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;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
.done {
color: rgba(0, 0, 0, 0.3);
text-decoration: line-through;
}
input {
margin-right: 5px;
}
React
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
movies: []
}
}
componentDidMount (){
const response = fetch(`https://api.themoviedb.org/3/movie/top_rated?api_key=2f90e0cf67c6a69450f5b0cf5f438efe`)
.then(r => r.json())
.then(x => this.setState({ movies: x.results }));
}
render() {
return (
<div>
<h2>Todos:</h2>
<ol>
{this.state.movies.map(item => (
<li key={item.id}>
<label>
<span className={item.title ? "done" : ""}>{item.title}</span>
</label>
</li>
))}
</ol>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))