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>

);
}

Reference

この問題について(react section2 practice), 我々は、より多くの情報をここで見つけました https://velog.io/@youngs508/react-section2-practice

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

React Nativeエラーログ

[コンビ]黒いジャックに飽きた.