react section2 practice
14635 ワード
import { useState, useEffect } from 'react';
import Header from './Header';
import MovieRankList from './MovieRankList';
import CurrentMovie from './CurrentMovie';
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>
</>
);};
import React from 'react';
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>
</>
);}
import React from 'react';
return
Movie Top 10 ;
}
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import './global.css';
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';
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>
);}
Reference
この問題について(react section2 practice), 我々は、より多くの情報をここで見つけました https://velog.io/@youngs508/react-section2-practiceテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol