使用React做的在线电影搜索界面模板

React Movie Search

h5, react.js, search

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3545
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// components/Movie.js

// import React from 'react';
// import PropTypes from 'prop-types';

const Movie = props => (
  <div className="movie">
    <figure className="movie__figure">
      <img src={`https://image.tmdb.org/t/p/w300_and_h450_bestv2${props.poster_path}`} className="movie__poster" />
      <figcaption>
        <span className="movie__vote">{props.vote_average}</span>
      </figcaption>
      <h2 className="movie__title">{props.title}</h2>
    </figure>
  </div>
);

Movie.propTypes = {
  id         : PropTypes.number.isRequired,
  title      : PropTypes.string.isRequired,
  poster_path: PropTypes.string,
  vote_average: PropTypes.number,
};

// export default Movie;

// components/Movies.js

// import React from 'react';
// import PropTypes from 'prop-types';

// import Movie from './Movie';

const Movies = props => (
  <ul className="movies">
    {props.movies.map(movie => (
      <li key={movie.id}>
        <Movie {...movie} />
      </li>
    ))}
  </ul>
);

Movies.propTypes = {
  movies: PropTypes.arrayOf(PropTypes.object)
};

// export default Movie;

// components/Search.js
// import React from 'react';
// import PropTypes from 'prop-types';

const Search = props => (
  <form className="search" onInput={event => props.onInput(event.target.value)}>
    <input type="search" value={props.query} placeholder={props.placeholder} />
  </form>
);

Search.propTypes = {
  query      : PropTypes.string.isRequired,
  onInput    : PropTypes.func.isRequired,
  placeholder: PropTypes.string
};

// export default Search;

// components/App.js
// import React from 'react';

// import Movies from './Movies';
// import Search from './Search';

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      movies: [],
      query: ''
    };
    
    this.onInput = this.onInput.bind(this);
  }
  
  onInput(query) {
    this.setState({
      query
    });
    
    this.searchMovie(query);
  }
  
  getPopularMovies() {
    const url = `https://api.themoviedb.org/3/movie/popular?api_key=cfe422613b250f702980a3bbf9e90716`;
    
    fetch (url)
      .then(response => response.json())
      .then(data => {
        this.setState({
          movies: data.results
        })
      });
  }
  
  searchMovie(query) {
    const url = `https://api.themoviedb.org/3/search/movie?query=${query}&api_key=cfe422613b250f702980a3bbf9e90716`;
    
    fetch (url)
      .then(response => response.json())
      .then(data => {
        this.setState({
          movies: data.results
        })
      });
  }
  
  componentDidMount() {
    this.getPopularMovies();
  }
  
  render() {
    const { movies, query } = this.state;
    const isSearched = query => item => !query || item.title.toLowerCase().includes(query.toLowerCase());
    
    return (
      <div className="app">
        <Search query={query} onInput={this.onInput} placeholder="Search for Movie Title …" />
        <Movies movies={movies.filter(isSearched(query))} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

编译

CSS

body {
    background-color: #1e2931;
    color: #fff;
    font-family: sans-serif;
    font-style: 16px;
    font-style: 1rem;
    line-height: 1.5;
    margin: 0 auto;
    width: 90%;
}
figure {
    margin: 0;
}
img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
input {
    border: 0;
    font: inherit;
    margin: 0;
    padding: 0;
}
.search {
    font-size: 24px;
    font-size: 1.5rem;
    margin: 1.5em auto 3em;
    max-width: 80%;
}
.search [type='search'] {
    background-color: #131b20;
    color: #fff;
    padding: 0.5em 2em;
    text-align: center;
    width: 100%;
}
.movies {
    display: -ms-grid;
    display: grid;
    grid-gap: 1em;
    -ms-grid-columns: (minmax(10em, 1fr))[auto-fill];
    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.movies > li {
    box-shadow: 0 0 1em rgba(0, 0, 0, .3);
}
.movie figcaption {
    padding: 1em;
}
.movie__title {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
}

HTML

React Movie Search

h5, react.js, search

编辑器支持Emmet

快捷键

React Movie Search

h5, react.js, search

使用html5 canvas模拟聊天界面动画

使用Palette.js制作的可点击拷贝颜色选择面板（调色板）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：