Cog Factory Cog Factory

분류 전체보기

• React - Create Detail Container and Presenter

  Project using React/Cloning Netflix 2021. 5. 9. 11:12

  Components/Poster.js import styled from "styled-components"; import PropTypes from "prop-types"; import { Link } from "react-router-dom"; const Container = styled.div``; const Image = styled.div` background-image: url(${(props) => props.bgUrl}); width: 100%; height: 180px; background-repeat: no-repeat; background-size: cover; background-position: center; transition: opacity 0.1s linear; `; const..

  Read More

• React - Search Container and Presenter

  Project using React/Cloning Netflix 2021. 5. 9. 11:07

  Search/SearchContainer.js import { moviesApi, tvApi } from "api"; import React from "react"; import SearchPresenter from "./SearchPresenter"; export default class extends React.Component { state = { movieResults: null, tvResults: null, searchTerm: "", loading: false, error: null, }; handleSubmit = (event) => { event.preventDefault(); const { searchTerm } = this.state; if (searchTerm !== "") { th..

  Read More

• React - Create TV Container and Presenter

  Project using React/Cloning Netflix 2021. 5. 9. 10:51

  TV/TVContainer.js import { tvApi } from "api"; import React from "react"; import TVPresenter from "./TVPresenter"; export default class extends React.Component { state = { loading: true, airingToday: null, topRated: null, popular: null, error: null, }; async componentDidMount() { try { const { data: { results: airingToday }, } = await tvApi.airingToday(); const { data: { results: topRated }, } =..

  Read More

• React - Create MoviePresenter

  Project using React/Cloning Netflix 2021. 5. 9. 10:47

  Movie/MoviePresenter.js import Helmet from "react-helmet"; import styled from "styled-components"; import PropTypes from "prop-types"; import Loader from "Components/Loader"; import Poster from "Components/Poster"; import Section from "Components/Section"; const Container = styled.div` padding: 10px; `; const MoviePresenter = ({ nowPlaying, upcoming, popular, error, loading }) => ( Movies | Nomf..

  Read More

• React - Create Loader.js

  Project using React/Cloning Netflix 2021. 5. 9. 10:27

  Components/Loader.js import React from "react"; import styled from "styled-components"; const Container = styled.div` height: 100vh; width: 100vw; display: flex; justify-content: center; font-size: 28px; margin-top: 20px; `; export default () => ( ⏰ ); Movie/MoviePresenter.js import Loader from "Components/Loader"; import Helmet from "react-helmet"; const MoviePresenter = ({ nowPlaying, upcoming..

  Read More

• React - Create MovieContainer

  Project using React/Cloning Netflix 2021. 5. 9. 08:08

  Movie/MovieContainer.js import { moviesApi } from "api"; import React from "react"; import MoviePresenter from "./MoviePresenter"; export default class extends React.Component { state = { loading: true, nowPlaying: null, upcoming: null, popular: null, error: null, }; async componentDidMount() { try { const { data: { results: nowPlaying }, } = await moviesApi.nowPlaying(); const { data: { results..

  Read More

• React Life cycle Methods

  Project using React/Cloning Netflix 2021. 5. 9. 07:10

  Life Cycle Methods class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } render() { return ( Hello, world! It is {this.state.date.toLocaleTimeString()}. ); } } componentDidMount() Component가 생성되면 다음과 같은 순서대로 실..

  Read More

• React create Header.js

  Project using React/Cloning Netflix 2021. 5. 9. 07:05

  Components/Header.js import { Link, withRouter } from "react-router-dom"; import styled from "styled-components"; const Header = styled.header` position: fixed; top: 0; left: 0; height: 50px; width: 100%; background-color: rgba(20, 20, 20, 0.8); z-index: 10; box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.8); `; const List = styled.ul` display: flex; `; const Item = styled.li` width: 80px; height: 5..

  Read More