Use container & presentation components

.\src\routes\movies\index.js

export default from "./movies-container";
  

.\src\routes\movies\movies-container.js

import { h, Component } from "preact";
import MoviesPresentation from "./movies-presentation";

class MoviesContainer extends Component {
  state = {
    movies: []
  };

  componentDidMount() {
    fetch("/api/movies.json")
      .then(rsp => rsp.json())
      .then(movies => this.setState({ movies }));
  }

  render({}, { movies }) {
    return <MoviesPresentation movies={movies} />;
  }
}

export default MoviesContainer;

.\src\routes\movies\movies-presentation.js

import { h, Component } from "preact";
import style from "./style";

const MoviesPresentation = ({ movies }) => (
  <div class={style.movies}>
    <h2>Movies</h2>
    <ul>{movies.map(movie => <li>{movie.title}</li>)}</ul>
  </div>
);

export default MoviesPresentation;