react section2 practice

14635 ワード

  • App.js
    import { useState, useEffect } from 'react';
    import Header from './Header';
    import MovieRankList from './MovieRankList';
    import CurrentMovie from './CurrentMovie';
  • import mockMovie from './mockMovie';
    import { getMovies } from './api/movieDataApi';
    export const App = () => {
    const [thisMovies, setThisMovies] = useState(null);
    const [movies, setMovies] = useState([]);
    useEffect(() => {
    getMovies().then((data) => {
    setMovies(data);
    setThisMovies(data[0]);
    });
    }, []);
    const handleCardClick = (movie) => {
    setThisMovies(movie);
    };
    if(!movies) return loading ...;
    global.handleCardClick = handleCardClick;
    return (
    <>
      <div className="header">
        <Header />
      </div>
      <div className="body">
        <CurrentMovie movie={thisMovies} />
        <MovieRankList handleCardClick={handleCardClick} movies={movies} />
      </div>
    </>
    );
    };
  • CurrentMovie.js
    import React from 'react';
  • export default function CurrentMovie({ movie }) {
    if(!movie)return「映画を選んでください」;
    const { description_full, runtime, rating, title, medium_cover_image } = movie;
    return (
    <>
      <div className="left-current-side">
        <div className="current-movie">
          <h1 className="title">{title}</h1>
          <img className="thumbnail" src={medium_cover_image} alt="thumbnail" />
          <p className="rating">rating : {rating}</p>
          <p className="running-time">runtime : {runtime}</p>
          <p>Description</p>
          <p className="description">{description_full}</p>
        </div>
      </div> 
    </>
    );
    }
  • Header.js
    import React from 'react';
  • export default function Header () {
    return

    Movie Top 10

    ;
    }
  • index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { App } from './App';
    import './global.css';
  • ReactDOM.render(, document.getElementById('root'));

  • MovieRankList.js
    import React from 'react';
    import MovieRankListEntry from './MovieRankListEntry';
    export default function MovieRankList({ movies, handleCardClick }) {
    return (
    <div className="right-movie-list">
      {!movies.length
        ? '영화 목록이 비었습니다'
        : movies.map((movie) => {
    return (
    );
    })}
    </div>
    );
    }

  • MovieRankListEntry.js
    import React from 'react';
  • export default function MovieRankListEntry({
    handleCardClick,
    movie,
    movie: {runtime, rating, title, medium_cover_image, genres },
    }) {
    return (
    <div
      className="card"
      onClick={() => {
        handleCardClick(movie);
      }}
    >
      <div style={{ flex: 3 }}>
        <img width="100%" height="100%" src={medium_cover_image} alt="cover" />
      </div>
      <div style={{ flex: 7 }}>
        <h3 className="title">{title}</h3>
        <p className="rating">rating : {rating}</p>
        <p className="running-time">running time : {runtime} min</p>
        <p>Genres</p>
        <div className="tag-list">
          {genres.map((genre) => (
            <div className="tag" key={genre}>
              {genre}
            </div>
          ))}
        </div>
      </div>
    </div>
    );
    }