├── .DS_Store ├── clone-starter-kit-01 └── 독자를위한readme.txt ├── clone-starter-kit-02 ├── .DS_Store ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.js │ └── index.js └── 독자를위한readme.rtf ├── clone-starter-kit-03 ├── .DS_Store ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ └── index.js ├── clone-starter-kit-04 ├── .DS_Store ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ └── index.js ├── clone-starter-kit-05 ├── .DS_Store ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ └── index.js ├── clone-starter-kit-06 ├── .DS_Store ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── Movie.css │ ├── Movie.js │ └── index.js ├── clone-starter-kit-07 ├── .DS_Store ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── Movie.css │ ├── Movie.js │ └── index.js └── clone-starter-kit-08 ├── .DS_Store ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── components ├── Movie.css ├── Movie.js ├── Navigation.css └── Navigation.js ├── index.js └── routes ├── About.css ├── About.js ├── Detail.js ├── Home.css └── Home.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/.DS_Store -------------------------------------------------------------------------------- /clone-starter-kit-01/독자를위한readme.txt: -------------------------------------------------------------------------------- 1 | 안녕하세요? 저는 이 책을 담당한 편집자P입니다. 2 | 3 | 01장에서 해야 할 일을 아래에 목록으로 정리했습니다. 4 | 5 | - node.js LTS 버전 설치(www.nodejs.org 접속하여 설치 파일 다운로드) 6 | - node.js, npm 설치 확인(node -v, npm -v 명령어로 확인) 7 | - npm으로 npx 설치(npx는 최신 노드 패키지를 1회성으로 사용할 수 있게 해주는 노드 패키지입니다) 8 | - 비주얼 스튜디오 코드 설치(code.visualstudio.com 접속하여 설치 파일 다운로드) 9 | - git 설치(git-scm.com 접속하여 설치 파일 다운로드) 및 git 설치 확인(git --version 명령어로 확인) 10 | 11 | 이후 스타터키트를 사용하실 것인가요? 하지만 저는 직접 책을 따라 입력하면서 공부해 볼 것을 권장합니다. 12 | 이 책은 사용하도록 만들어졌기 때문이죠. 물론 코드 입력이 힘든 독자라면 스타터키트를 사용해도 좋습니다. 13 | 혹시 스타터키트를 사용하며 공부할 계획이 있으시다면 반드시! 14 | 매 스타터키트에 있는 readme.txt를 읽은 후 사용하길 바랍니다. -------------------------------------------------------------------------------- /clone-starter-kit-02/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-02/.DS_Store -------------------------------------------------------------------------------- /clone-starter-kit-02/README.md: -------------------------------------------------------------------------------- 1 | # Movie App 2020 2 | 3 | React JS Fundamentals Course 2020 4 | -------------------------------------------------------------------------------- /clone-starter-kit-02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movie_app_2020-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /clone-starter-kit-02/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-02/public/favicon.ico -------------------------------------------------------------------------------- /clone-starter-kit-02/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /clone-starter-kit-02/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-02/public/logo192.png -------------------------------------------------------------------------------- /clone-starter-kit-02/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-02/public/logo512.png -------------------------------------------------------------------------------- /clone-starter-kit-02/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /clone-starter-kit-02/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /clone-starter-kit-02/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function App() { 4 | return
Hello!!!!!
; 5 | } 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /clone-starter-kit-02/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /clone-starter-kit-02/독자를위한readme.rtf: -------------------------------------------------------------------------------- 1 | {\rtf1\ansi\ansicpg949\cocoartf2512 2 | \cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset129 AppleSDGothicNeo-Regular;} 3 | {\colortbl;\red255\green255\blue255;} 4 | {\*\expandedcolortbl;;} 5 | \paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0 6 | \pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0 7 | 8 | \f0\fs24 \cf0 \'c5\'ac\'b7\'d0\'c4\'da\'b5\'f9 03\'c0\'bb \'b0\'f8\'ba\'ce\'c7\'cf\'b7\'c1\'b4\'c2 \'bf\'a9\'b7\'af\'ba\'d0!\ 9 | \'c0\'cc \'c6\'c4\'c0\'cf\'c0\'ba \'c5\'ac\'b7\'d0\'c4\'da\'b5\'f9 02\'b8\'a6 \'b8\'b6\'c4\'a3 \'c0\'cc\'c8\'c4 \'bb\'fd\'bc\'ba\'b5\'c7\'b4\'c2 \'c7\'c1\'b7\'ce\'c1\'a7\'c6\'ae\'b8\'a6 \'be\'d0\'c3\'e0\'c7\'d1 \'b0\'cd\'c0\'d4\'b4\'cf\'b4\'d9.\ 10 | \'b4\'d9\'b8\'b8 \'bf\'eb\'b7\'ae\'c0\'cc \'be\'c6\'c1\'d6~ \'c5\'ab node_modules\'b6\'f3\'b4\'c2 \'c6\'fa\'b4\'f5\'b4\'c2 \'c1\'a6\'bf\'dc\'b5\'c7\'be\'ee \'c0\'d6\'be\'ee\'bf\'e4.\ 11 | node_modules\'b4\'c2 \'be\'c6\'b7\'a1\'c0\'c7 \'b8\'ed\'b7\'b7\'be\'ee\'b7\'ce \'b9\'d9\'b7\'ce \'bb\'fd\'bc\'ba\'c7\'d2 \'bc\'f6 \'c0\'d6\'b1\'e2 \'b6\'a7\'b9\'ae\'c0\'cc\'c1\'d2.\ 12 | \'c2\'fc\'b0\'ed\'b7\'ce \'b8\'bb\'be\'b8\'b5\'e5\'b8\'ae\'c0\'da\'b8\'e9 node_modules \'c6\'fa\'b4\'f5\'bf\'a1\'b4\'c2 \'b8\'ae\'be\'d7\'c6\'ae \'be\'db\'bf\'a1 \'c7\'ca\'bf\'e4\'c7\'d1 \'bf\'a9\'b7\'af \'b5\'b5\'b1\'b8\'b0\'a1 \'b5\'e9\'be\'ee \'c0\'d6\'c1\'f6\'b8\'b8 \'bf\'eb\'b7\'ae\'c0\'cc \'be\'c6\'c1\'d6 \'c4\'bf\'bc\'ad \'c0\'d3\'c0\'c7\'b7\'ce \'c1\'a6\'bf\'dc\'c7\'df\'bd\'c0\'b4\'cf\'b4\'d9. \'c7\'cf\'c1\'f6\'b8\'b8 \'b0\'c6\'c1\'a4\'b8\'b6\'bc\'bc\'bf\'e4!\ 13 | \'b7\'e7\'c6\'ae \'c6\'fa\'b4\'f5\'b7\'ce \'c0\'cc\'b5\'bf\'c7\'d1 \'b4\'d9\'c0\'bd \'be\'c6\'b7\'a1\'c0\'c7 \'b8\'ed\'b7\'c9\'be\'ee\'b8\'a6 \'c0\'d4\'b7\'c2\'c7\'cf\'b8\'e9 \'b8\'ae\'be\'d7\'c6\'ae \'be\'db \'bd\'c7\'c7\'e0\'bf\'a1 \'c7\'ca\'bf\'e4\'c7\'d1 node_modules \'c6\'fa\'b4\'f5\'b8\'a6 \'bb\'fd\'bc\'ba\'c7\'d2 \'bc\'f6 \'c0\'d6\'bd\'c0\'b4\'cf\'b4\'d9.\ 14 | \ 15 | > npm install\ 16 | \ 17 | \'b9\'dd\'b5\'e5\'bd\'c3 \'b7\'e7\'c6\'ae \'c6\'fa\'b4\'f5\'bf\'a1\'bc\'ad \'bd\'c7\'c7\'e0\'c7\'cf\'b1\'e6 \'b9\'d9\'b6\'f8\'b4\'cf\'b4\'d9!(\'b7\'e7\'c6\'ae \'c6\'fa\'b4\'f5\'b0\'a1 \'b9\'ba\'c1\'f6 \'b8\'f0\'b8\'a3\'b8\'e9 \'c5\'ac\'b7\'d0\'c4\'da\'b5\'f9 02\'b8\'a6 \'b4\'d9\'bd\'c3 \'c0\'d0\'be\'ee\'ba\'b8\'bc\'bc\'bf\'e4!} -------------------------------------------------------------------------------- /clone-starter-kit-03/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-03/.DS_Store -------------------------------------------------------------------------------- /clone-starter-kit-03/README.md: -------------------------------------------------------------------------------- 1 | # Movie App 2020 2 | 3 | React JS Fundamentals Course 2020 4 | -------------------------------------------------------------------------------- /clone-starter-kit-03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movie_app_2020-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /clone-starter-kit-03/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-03/public/favicon.ico -------------------------------------------------------------------------------- /clone-starter-kit-03/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /clone-starter-kit-03/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-03/public/logo192.png -------------------------------------------------------------------------------- /clone-starter-kit-03/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-03/public/logo512.png -------------------------------------------------------------------------------- /clone-starter-kit-03/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /clone-starter-kit-03/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /clone-starter-kit-03/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Food({ fav }) { 4 | return

I like {fav}

; 5 | } 6 | 7 | function App() { 8 | return ( 9 |
10 |

Hello

11 | 12 | 13 | 14 | 15 |
16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /clone-starter-kit-03/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /clone-starter-kit-04/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-04/.DS_Store -------------------------------------------------------------------------------- /clone-starter-kit-04/README.md: -------------------------------------------------------------------------------- 1 | # Movie App 2020 2 | 3 | React JS Fundamentals Course 2020 4 | -------------------------------------------------------------------------------- /clone-starter-kit-04/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movie_app_2020-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "prop-types": "^15.7.2", 10 | "react": "^16.13.1", 11 | "react-dom": "^16.13.1", 12 | "react-scripts": "3.4.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /clone-starter-kit-04/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-04/public/favicon.ico -------------------------------------------------------------------------------- /clone-starter-kit-04/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /clone-starter-kit-04/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-04/public/logo192.png -------------------------------------------------------------------------------- /clone-starter-kit-04/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-04/public/logo512.png -------------------------------------------------------------------------------- /clone-starter-kit-04/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /clone-starter-kit-04/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /clone-starter-kit-04/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | function Food({ name, picture, rating }) { 5 | return ( 6 |
7 |

I like {name}

8 |

{rating}/5.0

9 | {name} 10 |
11 | ); 12 | } 13 | 14 | const foodILike = [ 15 | { 16 | id: 1, 17 | name: 'Kimchi', 18 | image: 'http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg', 19 | rating: 5, 20 | }, 21 | { 22 | id: 2, 23 | name: 'Samgyeopsal', 24 | image: 25 | 'https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg', 26 | rating: 4.9, 27 | }, 28 | { 29 | id: 3, 30 | name: 'Bibimbap', 31 | image: 32 | 'http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb', 33 | rating: 5, 34 | }, 35 | { 36 | id: 4, 37 | name: 'Doncasu', 38 | image: 'https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg', 39 | rating: 5, 40 | }, 41 | { 42 | id: 5, 43 | name: 'Kimbap', 44 | image: 'http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg', 45 | rating: 5, 46 | }, 47 | ]; 48 | 49 | function App() { 50 | return ( 51 |
52 | {foodILike.map((dish) => ( 53 | 54 | ))} 55 |
56 | ); 57 | } 58 | 59 | Food.propTypes = { 60 | name: PropTypes.string.isRequired, 61 | picture: PropTypes.string.isRequired, 62 | rating: PropTypes.number, 63 | }; 64 | 65 | export default App; 66 | -------------------------------------------------------------------------------- /clone-starter-kit-04/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /clone-starter-kit-05/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-05/.DS_Store -------------------------------------------------------------------------------- /clone-starter-kit-05/README.md: -------------------------------------------------------------------------------- 1 | # Movie App 2020 2 | 3 | React JS Fundamentals Course 2020 4 | -------------------------------------------------------------------------------- /clone-starter-kit-05/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movie_app_2020-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "prop-types": "^15.7.2", 10 | "react": "^16.13.1", 11 | "react-dom": "^16.13.1", 12 | "react-scripts": "3.4.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /clone-starter-kit-05/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-05/public/favicon.ico -------------------------------------------------------------------------------- /clone-starter-kit-05/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /clone-starter-kit-05/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-05/public/logo192.png -------------------------------------------------------------------------------- /clone-starter-kit-05/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-05/public/logo512.png -------------------------------------------------------------------------------- /clone-starter-kit-05/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /clone-starter-kit-05/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /clone-starter-kit-05/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class App extends React.Component { 4 | state = { 5 | isLoading: true, 6 | movies: [], 7 | }; 8 | componentDidMount() { 9 | // 영화 데이터 로딩! 10 | setTimeout(() => { 11 | this.setState({ isLoading: false }); 12 | }, 6000); 13 | } 14 | render() { 15 | const { isLoading } = this.state; 16 | return
{isLoading ? "Loading..." : "We are ready"}
; 17 | } 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /clone-starter-kit-05/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /clone-starter-kit-06/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-06/.DS_Store -------------------------------------------------------------------------------- /clone-starter-kit-06/README.md: -------------------------------------------------------------------------------- 1 | # Movie App 2020 2 | 3 | React JS Fundamentals Course 2020 4 | -------------------------------------------------------------------------------- /clone-starter-kit-06/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movie_app_2020-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "axios": "^0.19.2", 10 | "prop-types": "^15.7.2", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-scripts": "3.4.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /clone-starter-kit-06/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-06/public/favicon.ico -------------------------------------------------------------------------------- /clone-starter-kit-06/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /clone-starter-kit-06/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-06/public/logo192.png -------------------------------------------------------------------------------- /clone-starter-kit-06/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-06/public/logo512.png -------------------------------------------------------------------------------- /clone-starter-kit-06/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /clone-starter-kit-06/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /clone-starter-kit-06/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2f2f2f; 3 | } 4 | -------------------------------------------------------------------------------- /clone-starter-kit-06/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import axios from 'axios'; 3 | import Movie from './Movie'; 4 | import './App.css'; 5 | 6 | class App extends React.Component { 7 | state = { 8 | isLoading: true, 9 | movies: [], 10 | }; 11 | getMovies = async () => { 12 | const { 13 | data: { 14 | data: { movies }, 15 | }, 16 | } = await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating'); 17 | this.setState({ movies, isLoading: false }); 18 | }; 19 | componentDidMount() { 20 | this.getMovies(); 21 | } 22 | render() { 23 | const { isLoading, movies } = this.state; 24 | return ( 25 |
26 | {isLoading ? ( 27 |
28 | Loading... 29 |
30 | ) : ( 31 |
32 | {movies.map((movie) => { 33 | return ( 34 | 42 | ); 43 | })} 44 |
45 | )} 46 |
47 | ); 48 | } 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /clone-starter-kit-06/src/Movie.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-06/src/Movie.css -------------------------------------------------------------------------------- /clone-starter-kit-06/src/Movie.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './Movie.css'; 4 | 5 | function Movie({ title, year, summary, poster }) { 6 | return ( 7 |
8 | {title} 9 |
10 |

{title}

11 |
{year}
12 |

{summary}

13 |
14 |
15 | ); 16 | } 17 | 18 | Movie.propTypes = { 19 | year: PropTypes.number.isRequired, 20 | title: PropTypes.string.isRequired, 21 | summary: PropTypes.string.isRequired, 22 | poster: PropTypes.string.isRequired, 23 | }; 24 | 25 | export default Movie; 26 | -------------------------------------------------------------------------------- /clone-starter-kit-06/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /clone-starter-kit-07/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-07/.DS_Store -------------------------------------------------------------------------------- /clone-starter-kit-07/README.md: -------------------------------------------------------------------------------- 1 | # Movie App 2020 2 | 3 | React JS Fundamentals Course 2020 4 | -------------------------------------------------------------------------------- /clone-starter-kit-07/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movie_app_2020-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "axios": "^0.19.2", 10 | "prop-types": "^15.7.2", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-scripts": "3.4.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /clone-starter-kit-07/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-07/public/favicon.ico -------------------------------------------------------------------------------- /clone-starter-kit-07/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 24 | Movie App 25 | 26 | 27 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /clone-starter-kit-07/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-07/public/logo192.png -------------------------------------------------------------------------------- /clone-starter-kit-07/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-07/public/logo512.png -------------------------------------------------------------------------------- /clone-starter-kit-07/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /clone-starter-kit-07/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /clone-starter-kit-07/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 9 | 'Open Sans', 'Helvetica Neue', sans-serif; 10 | background-color: #eff3f7; 11 | height: 100%; 12 | } 13 | -------------------------------------------------------------------------------- /clone-starter-kit-07/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import axios from 'axios'; 3 | import Movie from './Movie'; 4 | import './App.css'; 5 | 6 | class App extends React.Component { 7 | state = { 8 | isLoading: true, 9 | movies: [], 10 | }; 11 | getMovies = async () => { 12 | const { 13 | data: { 14 | data: { movies }, 15 | }, 16 | } = await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating'); 17 | this.setState({ movies, isLoading: false }); 18 | }; 19 | componentDidMount() { 20 | this.getMovies(); 21 | } 22 | render() { 23 | const { isLoading, movies } = this.state; 24 | return ( 25 |
26 | {isLoading ? ( 27 |
28 | Loading... 29 |
30 | ) : ( 31 |
32 | {movies.map((movie) => { 33 | return ( 34 | 43 | ); 44 | })} 45 |
46 | )} 47 |
48 | ); 49 | } 50 | } 51 | 52 | export default App; 53 | -------------------------------------------------------------------------------- /clone-starter-kit-07/src/Movie.css: -------------------------------------------------------------------------------- 1 | .movies .movie { 2 | background-color: white; 3 | margin-bottom: 70px; 4 | font-weight: 300; 5 | padding: 20px; 6 | border-radius: 5px; 7 | color: #adaeb9; 8 | box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 9 | 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 10 | } 11 | 12 | .movies .movie a { 13 | display: grid; 14 | grid-template-columns: minmax(150px, 1fr) 2fr; 15 | grid-gap: 20px; 16 | text-decoration: none; 17 | color: inherit; 18 | } 19 | 20 | .movie img { 21 | position: relative; 22 | top: -50px; 23 | max-width: 150px; 24 | width: 100%; 25 | margin-right: 30px; 26 | box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 27 | 0 -12px 36px -8px rgba(0, 0, 0, 0.025); 28 | } 29 | 30 | .movie .movie__title, 31 | .movie .movie__year { 32 | margin: 0; 33 | font-weight: 300; 34 | } 35 | 36 | .movie .movie__title { 37 | margin-bottom: 5px; 38 | font-size: 24px; 39 | color: #2c2c2c; 40 | } 41 | 42 | .movie .movie__genres { 43 | list-style: none; 44 | padding: 0; 45 | margin: 0; 46 | display: flex; 47 | flex-wrap: wrap; 48 | margin: 5px 0px; 49 | } 50 | 51 | .movie__genres li, 52 | .movie .movie__year { 53 | margin-right: 10px; 54 | font-size: 14px; 55 | } 56 | -------------------------------------------------------------------------------- /clone-starter-kit-07/src/Movie.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './Movie.css'; 4 | 5 | function Movie({ title, year, summary, poster, genres }) { 6 | return ( 7 |
8 | {title} 9 |
10 |

{title}

11 |
{year}
12 |
    13 | {genres.map((genre, index) => { 14 | return ( 15 |
  • 16 | {genre} 17 |
    • 18 | ); 19 | })} 20 |
21 |

{summary.slice(0, 180)}...

22 |
23 |
24 | ); 25 | } 26 | 27 | Movie.propTypes = { 28 | year: PropTypes.number.isRequired, 29 | title: PropTypes.string.isRequired, 30 | summary: PropTypes.string.isRequired, 31 | poster: PropTypes.string.isRequired, 32 | genres: PropTypes.arrayOf(PropTypes.string).isRequired, 33 | }; 34 | 35 | export default Movie; 36 | -------------------------------------------------------------------------------- /clone-starter-kit-07/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /clone-starter-kit-08/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-08/.DS_Store -------------------------------------------------------------------------------- /clone-starter-kit-08/README.md: -------------------------------------------------------------------------------- 1 | # Movie App 2020 2 | 3 | React JS Fundamentals Course 2020 4 | -------------------------------------------------------------------------------- /clone-starter-kit-08/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movie_app_2020", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "axios": "^0.19.2", 10 | "prop-types": "^15.7.2", 11 | "react": "^16.13.1", 12 | "react-dom": "^16.13.1", 13 | "react-router-dom": "^5.1.2", 14 | "react-scripts": "3.4.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /clone-starter-kit-08/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-08/public/favicon.ico -------------------------------------------------------------------------------- /clone-starter-kit-08/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 24 | Movie App 25 | 26 | 27 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /clone-starter-kit-08/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-08/public/logo192.png -------------------------------------------------------------------------------- /clone-starter-kit-08/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/easysIT/do_it_clonecoding_movieapp/19a7df26f553ddd7d94559e1e3a748280acd0caa/clone-starter-kit-08/public/logo512.png -------------------------------------------------------------------------------- /clone-starter-kit-08/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /clone-starter-kit-08/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 9 | 'Open Sans', 'Helvetica Neue', sans-serif; 10 | background-color: #eff3f7; 11 | height: 100%; 12 | } 13 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import { HashRouter, Route } from 'react-router-dom'; 4 | import About from './routes/About'; 5 | import Home from './routes/Home'; 6 | import Navigation from './components/Navigation'; 7 | import Detail from './routes/Detail'; 8 | 9 | function App() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/components/Movie.css: -------------------------------------------------------------------------------- 1 | .movies .movie { 2 | background-color: white; 3 | margin-bottom: 70px; 4 | font-weight: 300; 5 | padding: 20px; 6 | border-radius: 5px; 7 | color: #adaeb9; 8 | box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 9 | 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 10 | } 11 | 12 | .movies .movie a { 13 | display: grid; 14 | grid-template-columns: minmax(150px, 1fr) 2fr; 15 | grid-gap: 20px; 16 | text-decoration: none; 17 | color: inherit; 18 | } 19 | 20 | .movie img { 21 | position: relative; 22 | top: -50px; 23 | max-width: 150px; 24 | width: 100%; 25 | margin-right: 30px; 26 | box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 27 | 0 -12px 36px -8px rgba(0, 0, 0, 0.025); 28 | } 29 | 30 | .movie .movie__title, 31 | .movie .movie__year { 32 | margin: 0; 33 | font-weight: 300; 34 | } 35 | 36 | .movie .movie__title { 37 | margin-bottom: 5px; 38 | font-size: 24px; 39 | color: #2c2c2c; 40 | } 41 | 42 | .movie .movie__genres { 43 | list-style: none; 44 | padding: 0; 45 | margin: 0; 46 | display: flex; 47 | flex-wrap: wrap; 48 | margin: 5px 0px; 49 | } 50 | 51 | .movie__genres li, 52 | .movie .movie__year { 53 | margin-right: 10px; 54 | font-size: 14px; 55 | } 56 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/components/Movie.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './Movie.css'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | function Movie({ title, year, summary, poster, genres }) { 7 | return ( 8 |
9 | 10 | {title} 11 |
12 |

{title}

13 |
{year}
14 |
    15 | {genres.map((genre, index) => { 16 | return ( 17 |
  • 18 | {genre} 19 |
    • 20 | ); 21 | })} 22 |
23 |

{summary.slice(0, 180)}...

24 |
25 | 26 |
27 | ); 28 | } 29 | 30 | Movie.propTypes = { 31 | year: PropTypes.number.isRequired, 32 | title: PropTypes.string.isRequired, 33 | summary: PropTypes.string.isRequired, 34 | poster: PropTypes.string.isRequired, 35 | genres: PropTypes.arrayOf(PropTypes.string).isRequired, 36 | }; 37 | 38 | export default Movie; 39 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/components/Navigation.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | z-index: 1; 3 | position: fixed; 4 | top: 50px; 5 | left: 10px; 6 | display: flex; 7 | flex-direction: column; 8 | background-color: white; 9 | padding: 10px 20px; 10 | box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 11 | 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 12 | border-radius: 5px; 13 | } 14 | 15 | @media screen and (max-width: 1090px) { 16 | .nav { 17 | left: initial; 18 | top: initial; 19 | bottom: 0px; 20 | width: 100%; 21 | } 22 | } 23 | 24 | .nav a { 25 | text-decoration: none; 26 | color: #0008fc; 27 | text-transform: uppercase; 28 | font-size: 12px; 29 | text-align: center; 30 | font-weight: 600; 31 | } 32 | 33 | .nav a:not(:last-child) { 34 | margin-bottom: 20px; 35 | } 36 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/components/Navigation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import './Navigation.css'; 4 | 5 | function Navigation() { 6 | return ( 7 |
8 | Home 9 | About 10 |
11 | ); 12 | } 13 | 14 | export default Navigation; 15 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/routes/About.css: -------------------------------------------------------------------------------- 1 | .about__container { 2 | box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 3 | 0 -6px 16px -6px rgba(0, 0, 0, 0.025); 4 | padding: 20px; 5 | border-radius: 5px; 6 | background-color: white; 7 | margin: 0 auto; 8 | margin-top: 100px; 9 | width: 100%; 10 | max-width: 400px; 11 | font-weight: 300; 12 | } 13 | 14 | .about__container span:first-child { 15 | font-size: 20px; 16 | } 17 | .about__container span:last-child { 18 | display: block; 19 | margin-top: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/routes/About.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './About.css'; 3 | 4 | function About() { 5 | return ( 6 |
7 | 8 | “Freedom is the freedom to say that two plus two make four. If that is granted, all else 9 | follows.” 10 | 11 | - George Orwell, 1984 12 |
13 | ); 14 | } 15 | 16 | export default About; 17 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/routes/Detail.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Detail extends React.Component { 4 | componentDidMount() { 5 | const { location, history } = this.props; 6 | if (location.state === undefined) { 7 | history.push('/'); 8 | } 9 | } 10 | 11 | render() { 12 | const { location } = this.props; 13 | if (location.state) { 14 | return {location.state.title}; 15 | } else { 16 | return null; 17 | } 18 | } 19 | } 20 | 21 | export default Detail; 22 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/routes/Home.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | display: flex; 4 | justify-content: center; 5 | } 6 | 7 | .loader { 8 | width: 100%; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | font-weight: 300; 14 | } 15 | .movies { 16 | display: grid; 17 | grid-template-columns: repeat(2, minmax(400px, 1fr)); 18 | grid-gap: 100px; 19 | padding: 50px; 20 | width: 80%; 21 | padding-top: 70px; 22 | } 23 | 24 | @media screen and (max-width: 1090px) { 25 | .movies { 26 | grid-template-columns: 1fr; 27 | width: 100%; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /clone-starter-kit-08/src/routes/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import axios from 'axios'; 3 | import Movie from '../components/Movie'; 4 | import './Home.css'; 5 | 6 | class Home extends React.Component { 7 | state = { 8 | isLoading: true, 9 | movies: [], 10 | }; 11 | getMovies = async () => { 12 | const { 13 | data: { 14 | data: { movies }, 15 | }, 16 | } = await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating'); 17 | this.setState({ movies, isLoading: false }); 18 | }; 19 | componentDidMount() { 20 | this.getMovies(); 21 | } 22 | render() { 23 | const { isLoading, movies } = this.state; 24 | return ( 25 |
26 | {isLoading ? ( 27 |
28 | Loading... 29 |
30 | ) : ( 31 |
32 | {movies.map((movie) => { 33 | return ( 34 | 43 | ); 44 | })} 45 |
46 | )} 47 |
48 | ); 49 | } 50 | } 51 | 52 | export default Home; 53 | --------------------------------------------------------------------------------