React a movie seach app learning

谢和同

2023-12-01

1.lesson 4

style.css

html {
    font-size: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgb(244,244,244);
    color: #333;
}

p {
    font-size: 1.6rem;
}

small {
    font-size: 1.2rem;
}

.container {
    margin: 0 auto;
    max-width:1000px;
    padding: 40px;
}

.title {
    font-size: 4.4rem;
    text-align: center
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class Main extends React.Component {
  render() {
    return (
      <div className="container">
        <h1 className="title">React Movie Search</h1>
      </div>
    );
  }
}

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

2.lesson 5

searchmovies.js (new a form,more like html)

import React,{useState} from 'react'
export default function SearchMovie(){
    return(
        <form className="form">
            <label className="label" htmlFor="query">Movie Name</label>
            <input className="input" type="text" name="query" 
                placeholder="i.e. Jurassic Park" />
            <button className="button" type="submit">Search</button>
        </form>
    
    )
}

index.js(render SearchMovie)

import React from 'react';
import ReactDOM from 'react-dom';
import SearchMovie from "./searchmovie"

class Main extends React.Component {
  render() {
    return (
      <div className="container">
        <h1 className="title">React Movie Search</h1>
        <SearchMovie />
      </div>
    );
  }
}

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

3.lesson 6(Style the search Movie Component)

style.css

html {
    font-size: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgb(244,244,244);
    color: #333;
}

p {
    font-size: 1.6rem;
}

small {
    font-size: 1.2rem;
}

.container {
    margin: 0 auto;
    max-width:1000px;
    padding: 40px;
}

.title {
    font-size: 4.4rem;
    text-align: center
}

.form{
    display: grid;
}
.label{
    font-size:1.4rem;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}
.input{
    font-size:1.6rem;
    padding: 0.5rem 2rem;
    line-height: 2.8rem;
    border-radius:20px;
    border:1px solid #ddd;
    margin-bottom: 1rem;
    
}

.button{
    background-color: rgba(0,0,0,0.75);
    color: white;
    padding:1rem 2rem;
    border:1px solid rgba(0.0.0.0.75);
    border-radius:20px;
    font-size: 1.4rem;
    cursor:pointer;
    transition: background-color 250ms;  
}
.button:hover{
    background-color: rgba(0,0,0,0.85);
}

@media(min-width:786px){
    .form{
        grid-template-columns: auto 1fr auto;
        grid-gap: 1rem;
        align-items: center;
        
    }
    .input{
        margin-bottom: 0;
    }
}

4.lesson 7(create the search movie function)

searchmovie.js

import React from "react";

export default function SearchMovies(){
    
    const searchMovies = async (e) => {
        e.preventDefault();
        console.log("submitting");
        
        const query = "Jurassic Park";
        
        const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;
        
        try {
            const res = await fetch(url);
            const data  = await res.json();
            console.log(data);
        }catch(err){
            console.error(err);
        }
    }
    
    return (
        <form className="form" onSubmit={searchMovies}>
            <label className="label" htmlFor="query">Movie Name</label>
            <input className="input" type="text" name="query"
                placeholder="i.e. Jurassic Park"/>
            <button className="button" type="submit">Search</button>
        </form>
    )
}

5.lesson 8

searchMovies.js

import React, {useState} from "react";

export default function SearchMovies(){
    
    //states- input query, movies
    const [query, setQuery] = useState('');
    //create the state for movies, and update that state appropriate
    const [movies, setMovies] = useState([]);
    
    const searchMovies = async (e) => {
        e.preventDefault();
                
        const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;
        
        try {
            const res = await fetch(url);
            const data  = await res.json();
            setMovies(data.results);
        }catch(err){
            console.error(err);
        }
    }
    
    return (
        <form className="form" onSubmit={searchMovies}>
            <label className="label" htmlFor="query">Movie Name</label>
            <input className="input" type="text" name="query"
                placeholder="i.e. Jurassic Park"
                value={query} onChange={(e) => setQuery(e.target.value)}
                />
            <button className="button" type="submit">Search</button>
        </form>
    )
}

6.lesson 9

searchMovie.js

import React, {useState} from "react";

export default function SearchMovies(){
    
    //states- input query, movies
    const [query, setQuery] = useState('');
    //create the state for movies, and update that state appropriate
    const [movies, setMovies] = useState([]);
    
    const searchMovies = async (e) => {
        e.preventDefault();
                
        const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;
        
        try {
            const res = await fetch(url);
            const data  = await res.json();
            setMovies(data.results);
        }catch(err){
            console.error(err);
        }
    }
    
    return (
        <>
            <form className="form" onSubmit={searchMovies}>
                <label className="label" htmlFor="query">Movie Name</label>
                <input className="input" type="text" name="query"
                    placeholder="i.e. Jurassic Park"
                    value={query} onChange={(e) => setQuery(e.target.value)}
                    />
                <button className="button" type="submit">Search</button>
            </form>
            <div className="card-list">
                {movies.filter(movie => movie.poster_path).map(movie => (
                    <div className="card" key={movie.id}>
                        <img className="card--image"
                            src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${movie.poster_path}`}
                            alt={movie.title + ' poster'}
                            />
                        <div className="card--content">
                        <h3 className="card--title">{movie.title}</h3>
                        <p><small>RELEASE DATE: {movie.release_date}</small></p>
                        <p><small>RATING: {movie.vote_average}</small></p>
                        <p className="card--desc">{movie.overview}</p>
                        </div>

                    </div>
                ))}
            </div>    
        </>
    )
}

7.lesson 10

style.css

html {
    font-size: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgb(244,244,244);
    color: #333;
}

p {
    font-size: 1.6rem;
}

small {
    font-size: 1.2rem;
}

.container {
    margin: 0 auto;
    max-width:1000px;
    padding: 40px;
}

.title {
    font-size: 4.4rem;
    text-align: center
}

.form {
    display:grid;
}

.label {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.input {
    font-size: 1.6rem;
    padding: 0.5rem 2rem;
    line-height: 2.8rem;
    border-radius: 20px;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
}

.button {
    background-color: rgba(0,0,0,0.75);
    color: white;
    padding: 1rem 2rem;
    border: 1px solid rgba(0,0,0,0.75);
    border-radius: 20px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color 250ms;
}

.button:hover {
    background-color: rgba(0,0,0,0.85);
}

@media (min-width:786px){
    .form {
        grid-template-columns: auto 1fr auto;
        grid-gap: 1rem;
        align-items: center;
    }
    
    .input {
        margin-bottom: 0;
    }
}

.card-list {
    margin-top: 4rem;
}

.card {
    padding: 2rem 4rem;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    margin-bottom: 2rem;
    background-color: white;
}

.card--title {
    margin-bottom: 0.5rem;
    font-size: 3.2rem;
}

.card--image {
    margin: 0 auto;
    display: block
}

8.lesson 11

create the movie card component

searchMovies.js

import React, {useState} from "react";
import MovieCard from './movieCard.js';
export default function SearchMovies(){
    
    //states- input query, movies
    const [query, setQuery] = useState('');
    //create the state for movies, and update that state appropriate
    const [movies, setMovies] = useState([]);
    
    const searchMovies = async (e) => {
        e.preventDefault();
                
        const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;
        
        try {
            const res = await fetch(url);
            const data  = await res.json();
            setMovies(data.results);
        }catch(err){
            console.error(err);
        }
    }
    
    return (
        <>
            <form className="form" onSubmit={searchMovies}>
                <label className="label" htmlFor="query">Movie Name</label>
                <input className="input" type="text" name="query"
                    placeholder="i.e. Jurassic Park"
                    value={query} onChange={(e) => setQuery(e.target.value)}
                    />
                <button className="button" type="submit">Search</button>
            </form>
            <div className="card-list">
                {movies.filter(movie => movie.poster_path).map(movie => (
                   <MovieCard movie={movie} key={movie.id} />
                ))}
            </div>    
        </>
    )
}

movieCard.js

import React from "react";

export default function MovieCard({movie}){
    return (
         <div className="card"  >
            <img className="card--image"
                src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${movie.poster_path}`}
                alt={movie.title + ' poster'}
                />
            <div className="card--content">
            <h3 className="card--title">{movie.title}</h3>
            <p><small>RELEASE DATE: {movie.release_date}</small></p>
            <p><small>RATING: {movie.vote_average}</small></p>
            <p className="card--desc">{movie.overview}</p>
            </div>

        </div>
    )
}

React a movie seach app learning

相关阅读

相关文章

相关问答