ReactJS (5)

* Fetching Movies from API

· axios

: axios는 마치 fetch 위에 있는 작은 layer

터미널에 npm install axios 하여 설치

 

//async

//javascript에게 componentDidMount 함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 말해주고 그걸 기다려줘야 함

  async componentDidMount(){

    const movies = axios.get("https://yts-proxy.now.sh/list_movies.json");

}

 

* Rendering the Movies

  getMovies = async () => {

    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");

    console.log(movies.data.data.movies);

  }

 

//es6는 ECMA script의 새로운 버전

  getMovies = async () => {

    const { data: { data : {movies} } } = await axios.get("https://yts-proxy.now.sh/list_movies.json");

    console.log(movies);

  };

 

- index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

 

ReactDOM.render(

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

);

 

- App.js

import React from "react";

import axios from "axios";

import Movie from "./Movie";

 

class App extends React.Component {

  state = {

    isLoading: true,

    movies: []

  };

  getMovies = async () => {

    const {

      data: {

        data: { movies }

      }

    } = await axios.get(

      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"

    );

    this.setState({ movies, isLoading: false });

  };

  componentDidMount() {

    this.getMovies();

  }

  render() {

    const { isLoading, movies } = this.state;

    return (

      <div>

        {isLoading

          ? "Loading..."

          : movies.map(movie => (

              <Movie

                key={movie.id}

                id={movie.id}

                year={movie.year}

                title={movie.title}

                summary={movie.summary}

                poster={movie.medium_cover_image}

              />

            ))}

      </div>

    );

  }

}

 

export default App;

 

- Movie.js

import React from "react";

import PropTypes from "prop-types";

 

function Movie({ id, year, title, summary, poster }) {

  return <h4>{title}</h4>;

}

 

Movie.propTypes = {

  id: PropTypes.number.isRequired,

  year: PropTypes.number.isRequired,

  title: PropTypes.string.isRequired,

  summary: PropTypes.string.isRequired,

  poster: PropTypes.string.isRequired

};

 

export default Movie;

 

* Styling the Movies

App.css 와 Movie.css 파일을 만들어서 App.js와 Movie.js에 각각

import "./App.css", import "./Movie.css"

 

- Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

 

ReactDOM.render(

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

);

 

- App.js

import React from "react";

import axios from "axios";

import Movie from "./Movie";

import "./App.css";

 

class App extends React.Component {

  state = {

    isLoading: true,

    movies: []

  };

  getMovies = async () => {

    const {

      data: {

        data: { movies }

      }

    } = await axios.get(

      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"

    );

    this.setState({ movies, isLoading: false });

  };

  componentDidMount() {

    this.getMovies();

  }

  render() {

    const { isLoading, movies } = this.state;

    return (

      <section class="container">

        {isLoading ? (

          <div class="loader">

            <span class="loader__text">Loading...</span>

          </div>

        ) : (

          <div class="movies">

            {movies.map(movie => (

              <Movie

                key={movie.id}

                id={movie.id}

                year={movie.year}

                title={movie.title}

                summary={movie.summary}

                poster={movie.medium_cover_image}

              />

            ))}

          </div>

        )}

      </section>

    );

  }

}

 

export default App;

 

- Movie.js

import React from "react";

import PropTypes from "prop-types";

import "./Movie.css";

 

function Movie({ year, title, summary, poster }) {

  return <div class="movie">

      <img src={poster} alt={title} title={title}></img>

      <div class="movie__data">

         <h3 class="mpovie__title">{title}</h3>

          <h5 class="movie__year">{year}</h5>

          <p class="movie__summary">{summary}</p>

      </div>

  </div>;

}

 

Movie.propTypes = {

  id: PropTypes.number.isRequired,

  year: PropTypes.number.isRequired,

  title: PropTypes.string.isRequired,

  summary: PropTypes.string.isRequired,

  poster: PropTypes.string.isRequired

};

 

export default Movie;

 

* Adding Generes

- index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

 

ReactDOM.render(

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

);

 

- App.js

import React from "react";

import axios from "axios";

import Movie from "./Movie";

import "./App.css";

 

class App extends React.Component {

  state = {

    isLoading: true,

    movies: []

  };

  getMovies = async () => {

    const {

      data: {

        data: { movies }

      }

    } = await axios.get(

      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"

    );

    this.setState({ movies, isLoading: false });

  };

  componentDidMount() {

    this.getMovies();

  }

  render() {

    const { isLoading, movies } = this.state;

    return (

      <section className="container">

        {isLoading ? (

          <div className="loader">

            <span className="loader__text">Loading...</span>

          </div>

        ) : (

          <div className="movies">

            {movies.map(movie => (

              <Movie

                key={movie.id}

                id={movie.id}

                year={movie.year}

                title={movie.title}

                summary={movie.summary}

                poster={movie.medium_cover_image}

                genres={movie.genres}

              />

            ))}

          </div>

        )}

      </section>

    );

  }

}

 

export default App;

 

- Movie.js

import React from "react";

import PropTypes from "prop-types";

import "./Movie.css";

 

function Movie({ year, title, summary, poster , genres }) {

  return <div className="movie">

      <img src={poster} alt={title} title={title}></img>

      <div className="movie__data">

         <h3 className="mpovie__title">{title}</h3>

          <h5 className="movie__year">{year}</h5>

          <ul className="movie__genres"> 

            {genres.map((genre, index) => (

                <li key={index} className="genres__genre">{genre}</li>

          ))} 

          </ul>

          <p className="movie__summary">{summary}</p>

      </div>

  </div>;

}

 

Movie.propTypes = {

  id: PropTypes.number.isRequired,

  year: PropTypes.number.isRequired,

  title: PropTypes.string.isRequired,

  summary: PropTypes.string.isRequired,

  poster: PropTypes.string.isRequired,

  genres: PropTypes.arrayOf(PropTypes.string).isRequired

};

 

export default Movie;

 

- App.css

*{

    box-sizing: border-box;

}

 

body {

    margin: 0;

    padding: 0;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,

      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    background-color: #eff3f7;

    height: 100%;

  }

html,

body,

#root,

.container {

    height: 100%;

    display: flex;

    justify-content: center;

}

 

.loader{

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}

 

.movies{

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    flex-wrap: wrap;

    padding: 50px;

    padding-top: 70px;

    width: 80%;

}

 

.movies .movie{

    width: 45%;

    background-color: white;

    margin-bottom: 70px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    font-weight: 300;

    padding: 20px;

    border-radius: 5px;

    color: #adaeb9;

    box-shadow: 0 13px 27px -5px rgba(50,50,93,0.25),

    0 8px 16px -8px rgba(0,0,0,0.3), 0 -6px 16px -6px rgba(0,0,0,0.025);

}

 

.movie img {

    position: relative;

    top: -50px;

    max-width: 180px;

    margin-right: 30px;

    box-shadow: 0 30px 60px -12px rgba(50,50,50,93,0.25),

    0 18px 36px -18px rgba(0,0,0,0.3), 0 -12px 36px -8px rgba(0,0,0,0.0025);

}

 

.movie .movie__title,

.movie .movie__year{

    margin: 0;

    font-weight: 300;

}

 

.movie .movie__title{

    margin-bottom: 5px;

    font-size: 24px;

    color: #2c2c2c;

}

 

.movie .movie__genres{

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    margin: 5px 0px;

}

 

.movie__genres li,

.movie .movie__year{

    margin-right: 10px;

    font-size: 14px;

}

 

* Deploying to Git hub Pages

(1) terminal에 npm i gh-pages 입력

gh-pages는 웹사이트를 github의 hithub page 도메인에 나타나게 해줌

 

(2) package.JSON에 homepage 추가

(3) deploy: build 폴더를 upload

(4) predeploy: npm run build를 실행하면 우리에게 build 폴더를 제공,

deploy를 먼저 실행하면 predeploy가 자동적으로 실행됨 (이름은 같아야함)

{

  "name": "movie_app",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^5.11.8",

    "@testing-library/react": "^11.2.2",

    "@testing-library/user-event": "^12.6.0",

    "axios": "^0.21.1",

    "gh-pages": "^2.2.0",

    "prop-types": "^15.7.2",

    "react": "^17.0.1",

    "react-dom": "^17.0.1",

    "react-scripts": "4.0.1",

    "web-vitals": "^0.2.4"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "deploy": "gh-pages -d build",

    "predeploy": "npm run build"

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  },

  "homepage": "https://501501.github.io/movie_app/"

}

 

(5) terminal에 npm run deploy 입력