├── public ├── favicon.ico ├── manifest.json └── index.html ├── src ├── components │ └── App.jsx ├── index.js ├── templates.js └── moviesData.js ├── .gitignore ├── package.json └── README.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ReactWarriors/reactwarriors-master-class/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function App() { 4 | return
Hello ReactWarriors!
; 5 | } 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | import "bootstrap/dist/css/bootstrap.min.css"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /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 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactwarriors-master-class", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "bootstrap": "^4.3.1", 7 | "react": "^16.8.6", 8 | "react-dom": "^16.8.6", 9 | "react-scripts": "2.1.8" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /src/templates.js: -------------------------------------------------------------------------------- 1 | // MovieItem 2 | //
3 | // 9 | //
10 | //
{data.title}
11 | //
12 | //

Rating: {data.vote_average}

13 | // 16 | //
17 | //
18 | //
; 19 | // MovieListWillWatch 20 | //

Will Watch: movies

21 | // 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Мастер-класс. Первое приложение на ReactJS 2 | 3 | 1. В главном компоненте App создайте компонент MovieList, в котором будет отображаться карточки всех фильмов, данные фильмов взять из файла moviesData.js и записать в state компонента и потом передать в MovieList 4 | 2. В компоненте MovieList мапируйте полученный массив фильмов и 5 | каждый элемент передавайте в компонент MovieItem, в котором будет отображаться карточка фильма 6 | (разметка https://getbootstrap.com/docs/4.1/components/card/#example) 7 | 3. В компоненте App в state запишите список фильмов которые пользователь хочет посмотреть ( moviesWillWatch: []), создайте компонент MovieListWillWatch, в котором будет отображаться: 8 | 9 | - количество фильмов, которое хочет посмотреть пользователь 10 | - список фильмов, которые пользователь хочет посмотреть 11 | (разметка https://getbootstrap.com/docs/4.1/components/list-group/) 12 | 13 | 4. В компоненте MovieItem добавить кнопку Will Watch, при нажатии на которую будет в компонент MovieListWillWatch попадать новый фильм, который пользователь захочет посмотреть. 14 | Соответсвенно при повторном нажатии - убирать данный фильм из списка WillWatch 15 | (менять стили кнопки в зависимости от того хочет смотреть этот фильм или нет - например его цвет, 16 | подсказка: в зависимости от состояния компонента MovieItem) 17 | 18 | На выходе должно получиться как в примере https://reactwarriors.github.io/reactwarriors-stage-1/ 19 | 20 | ## Путь к изображениям для компонента MovieItem 21 | 22 | ``` 23 | https://image.tmdb.org/t/p/w500${path} 24 | ``` 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/moviesData.js: -------------------------------------------------------------------------------- 1 | export const moviesData = [ 2 | { 3 | vote_count: 4592, 4 | id: 299536, 5 | video: false, 6 | vote_average: 8.5, 7 | title: "Avengers: Infinity War", 8 | popularity: 160.36938, 9 | poster_path: "/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg", 10 | original_language: "en", 11 | original_title: "Avengers: Infinity War", 12 | backdrop_path: "/bOGkgRGdhrBYJSLpXaxhXVstddV.jpg", 13 | adult: false, 14 | overview: 15 | "As the Avengers and their allies have continued to protect the world from threats too large for any one hero to handle, a new danger has emerged from the cosmic shadows: Thanos. A despot of intergalactic infamy, his goal is to collect all six Infinity Stones, artifacts of unimaginable power, and use them to inflict his twisted will on all of reality. Everything the Avengers have fought for has led up to this moment - the fate of Earth and existence itself has never been more uncertain.", 16 | release_date: "2018-04-25" 17 | }, 18 | { 19 | vote_count: 1410, 20 | id: 401981, 21 | video: false, 22 | vote_average: 6.4, 23 | title: "Red Sparrow", 24 | popularity: 58.167437, 25 | poster_path: "/vLCogyfQGxVLDC1gqUdNAIkc29L.jpg", 26 | original_language: "en", 27 | original_title: "Red Sparrow", 28 | backdrop_path: "/sGzuQYSTwJvLBc2PnuSVLHhuFeh.jpg", 29 | adult: false, 30 | overview: 31 | "Prima ballerina, Dominika Egorova faces a bleak and uncertain future after she suffers an injury that ends her career. She soon turns to Sparrow School, a secret intelligence service that trains exceptional young people to use their minds and bodies as weapons. Dominika emerges as the most dangerous Sparrow after completing the sadistic training process. As she comes to terms with her new abilities, she meets a CIA agent who tries to convince her that he is the only person she can trust.", 32 | release_date: "2018-03-01" 33 | }, 34 | { 35 | vote_count: 29, 36 | id: 493922, 37 | video: false, 38 | vote_average: 6.7, 39 | title: "Hereditary", 40 | popularity: 36.915917, 41 | poster_path: "/wihYuMsQADWrSaVThaJunM2wR4V.jpg", 42 | original_language: "en", 43 | original_title: "Hereditary", 44 | backdrop_path: "/yVWiOMpzf7gullGvug83r7gMdha.jpg", 45 | adult: false, 46 | overview: 47 | "After their reclusive grandmother passes away, the Graham family tries to escape the dark fate they've inherited.", 48 | release_date: "2018-06-04" 49 | }, 50 | { 51 | vote_count: 4, 52 | id: 260513, 53 | video: false, 54 | vote_average: 7.5, 55 | title: "Incredibles 2", 56 | popularity: 31.548805, 57 | poster_path: "/hL9Uz2vq93vi20oxZEBBaSs4w8U.jpg", 58 | original_language: "en", 59 | original_title: "Incredibles 2", 60 | backdrop_path: "/kqoBtMmiycbbhGLXGkKhL8SdaWB.jpg", 61 | adult: false, 62 | overview: 63 | "Elastigirl springs into action to save the day, while Mr. Incredible faces his greatest challenge yet – taking care of the problems of his three children.", 64 | release_date: "2018-06-14" 65 | }, 66 | { 67 | vote_count: 42, 68 | id: 385332, 69 | video: false, 70 | vote_average: 5.6, 71 | title: "Terminal", 72 | popularity: 24.201971, 73 | poster_path: "/xi7pA3lL6Wb78p6Y6PgWoHDMjrM.jpg", 74 | original_language: "en", 75 | original_title: "Terminal", 76 | backdrop_path: "/bwvxvrHH3nTbcwpEcJhA72kkI94.jpg", 77 | adult: false, 78 | overview: 79 | "In the dark heart of a sprawling, anonymous city, two assassins carry out a sinister mission, a teacher battles a fatal illness, and an enigmatic janitor and a curious waitress lead dangerous double lives. Murderous consequences unravel in the dead of night, as their lives intertwine at the hands of a mysterious criminal mastermind who is hell-bent on revenge.", 80 | release_date: "2018-05-11" 81 | }, 82 | { 83 | vote_count: 173, 84 | id: 396806, 85 | video: false, 86 | vote_average: 5.8, 87 | title: "Anon", 88 | popularity: 18.811023, 89 | poster_path: "/xhBTO9n3fxy3HJt7WlR9h9vvVmk.jpg", 90 | original_language: "en", 91 | original_title: "Anon", 92 | backdrop_path: "/arYvUXhpNRU2GQQut67P5cR0c5m.jpg", 93 | adult: false, 94 | overview: 95 | "Set in a near-future world where there is no privacy, ignorance or anonymity, our private memories are recorded and crime almost ceases to exist. In trying to solve a series of unsolved murders, Sal Frieland stumbles onto a young woman who appears to have subverted the system and disappeared. She has no identity, no history and no record. Sal realizes it may not be the end of crime but the beginning. Known only as 'The Girl', Sal must find her before he becomes the next victim.", 96 | release_date: "2018-05-03" 97 | }, 98 | { 99 | vote_count: 41, 100 | id: 454619, 101 | video: false, 102 | vote_average: 5.6, 103 | title: "Overboard", 104 | popularity: 18.502901, 105 | poster_path: "/qauHzSQJdo9VYX4NKn9PdWnvXOV.jpg", 106 | original_language: "en", 107 | original_title: "Overboard", 108 | backdrop_path: "/6PQyCsluWxE0LPlp2YB6IkMqVQj.jpg", 109 | adult: false, 110 | overview: 111 | "A spoiled, wealthy yacht owner is thrown overboard and becomes the target of revenge from his mistreated employee. A remake of the 1987 comedy.", 112 | release_date: "2018-05-03" 113 | }, 114 | { 115 | vote_count: 21, 116 | id: 411135, 117 | video: false, 118 | vote_average: 5.8, 119 | title: "Future World", 120 | popularity: 17.779676, 121 | poster_path: "/kMA0IalnEEa0PaHRUzzjpTu5xXQ.jpg", 122 | original_language: "en", 123 | original_title: "Future World", 124 | backdrop_path: "/g29nhwmOiYElKW27hzohK6nSwpC.jpg", 125 | adult: false, 126 | overview: 127 | "A young boy searches a future world wasteland for a rumored cure for his dying mother.", 128 | release_date: "2018-05-25" 129 | }, 130 | { 131 | vote_count: 467, 132 | id: 399174, 133 | video: false, 134 | vote_average: 7.9, 135 | title: "Isle of Dogs", 136 | popularity: 17.693788, 137 | poster_path: "/c0nUX6Q1ZB0P2t1Jo6EeFSVnOGQ.jpg", 138 | original_language: "en", 139 | original_title: "Isle of Dogs", 140 | backdrop_path: "/5YtXsLG9ncjjFyGZjoeV31CGf01.jpg", 141 | adult: false, 142 | overview: 143 | "In the future, an outbreak of canine flu leads the mayor of a Japanese city to banish all dogs to an island that's a garbage dump. The outcasts must soon embark on an epic journey when a 12-year-old boy arrives on the island to find his beloved pet.", 144 | release_date: "2018-03-23" 145 | }, 146 | { 147 | vote_count: 43, 148 | id: 341689, 149 | video: false, 150 | vote_average: 5.7, 151 | title: "How to Talk to Girls at Parties", 152 | popularity: 14.513143, 153 | poster_path: "/v6mPfyGshwXd1R6kQlMEyZ8Zu2s.jpg", 154 | original_language: "en", 155 | original_title: "How to Talk to Girls at Parties", 156 | backdrop_path: "/hjUkiNj0IWGym554fQs0Gnx4XZG.jpg", 157 | adult: false, 158 | overview: 159 | "A couple of British 1970s teenaged boys, Enn and Vic, go to a party to meet girls, only to find that the girls are very different from the boys' expectations.", 160 | release_date: "2018-05-05" 161 | }, 162 | { 163 | vote_count: 25, 164 | id: 332283, 165 | video: false, 166 | vote_average: 6.6, 167 | title: "Mary Shelley", 168 | popularity: 13.8451, 169 | poster_path: "/gKHJTsrfxJtfFNPQJn2hDNEMtFf.jpg", 170 | original_language: "en", 171 | original_title: "Mary Shelley", 172 | backdrop_path: "/3vp5dMXAzbl5JUoGgVXEBZMJn7i.jpg", 173 | adult: false, 174 | overview: 175 | "The love affair between poet Percy Shelley and Mary Wollstonecraft Godwin resulted in the creation of an immortal novel, “Frankenstein; or, The Modern Prometheus.”", 176 | release_date: "2018-04-22" 177 | }, 178 | { 179 | vote_count: 148, 180 | id: 437557, 181 | video: false, 182 | vote_average: 6.3, 183 | title: "Blockers", 184 | popularity: 13.458385, 185 | poster_path: "/cx0LpfM6Drla8uzFfMT09uqKPRu.jpg", 186 | original_language: "en", 187 | original_title: "Blockers", 188 | backdrop_path: "/fqPIDVSTl6f1l02fb2rRVYPl5JE.jpg", 189 | adult: false, 190 | overview: 191 | "When three parents discover their daughters’ pact to lose their virginity at prom, they launch a covert one-night operation to stop the teens from sealing the deal.", 192 | release_date: "2018-03-30" 193 | }, 194 | { 195 | vote_count: 118, 196 | id: 425336, 197 | video: false, 198 | vote_average: 6.3, 199 | title: "Loving Pablo", 200 | popularity: 12.199422, 201 | poster_path: "/6McYL1YZmRSeccDXxpFNslUw2c5.jpg", 202 | original_language: "es", 203 | original_title: "Loving Pablo", 204 | backdrop_path: "/qbAwhPUhzHMofSbV5GpeAFrb6pg.jpg", 205 | adult: false, 206 | overview: 207 | "A journalist strikes up a romantic relationship with notorious drug lord Pablo Escobar.", 208 | release_date: "2018-03-09" 209 | }, 210 | { 211 | vote_count: 54, 212 | id: 460668, 213 | video: false, 214 | vote_average: 6.3, 215 | title: "I Feel Pretty", 216 | popularity: 12.146981, 217 | poster_path: "/bZe6x2fKtwVDsAvZQ9fnIJznBrc.jpg", 218 | original_language: "en", 219 | original_title: "I Feel Pretty", 220 | backdrop_path: "/7XM7kxa3U2g8TO3OGSiETCroNRD.jpg", 221 | adult: false, 222 | overview: 223 | "A head injury causes a woman to develop an extraordinary amount of confidence and believe she's drop dead gorgeous.", 224 | release_date: "2018-04-20" 225 | }, 226 | { 227 | vote_count: 822, 228 | id: 411088, 229 | video: false, 230 | vote_average: 8.2, 231 | title: "The Invisible Guest", 232 | popularity: 11.070862, 233 | poster_path: "/fptnZJbLzKUHeNlYrAynbyoL5YJ.jpg", 234 | original_language: "es", 235 | original_title: "Contratiempo", 236 | backdrop_path: "/urrIaUxmLXYWodZx7KJPLLVFaKC.jpg", 237 | adult: false, 238 | overview: 239 | "'The Invisible Guest' turns on a young businessman who wakes up in a hotel room locked from the inside with the dead body of his lover next to him. He hires a prestigious lawyer, and over one night they work together to clarify what happened in a frenetic race against time.", 240 | release_date: "2016-09-22" 241 | }, 242 | { 243 | vote_count: 0, 244 | id: 519033, 245 | video: false, 246 | vote_average: 0, 247 | title: "Sobchak Case", 248 | popularity: 10.512537, 249 | poster_path: "/vrBNIeetvYXeqCoXWSIoW1jT1tQ.jpg", 250 | original_language: "ru", 251 | original_title: "Дело Собчака", 252 | backdrop_path: "/pU5c029oAV7WQND202vYt0ldeUI.jpg", 253 | adult: false, 254 | overview: 255 | "After the father’s death, the daughter of one of the forefathers of modern Russian democracy, Ksenia Sobchak, tries to understand the 18 years of his political fate. Together with the director Vera Krichevskaya she gives the word to Anatoli Sobchak’s colleagues and opponents, gets acquainted with the criminal case which annulled his career, and tries to find an answer to the question what Anatoly Sobchak’s fate would be in today’s Russia.", 256 | release_date: "2018-06-12" 257 | }, 258 | { 259 | vote_count: 15, 260 | id: 425148, 261 | video: false, 262 | vote_average: 5.8, 263 | title: "Show Dogs", 264 | popularity: 9.86842, 265 | poster_path: "/2dvxCBUfDG2cAdkA921rERxhtcp.jpg", 266 | original_language: "en", 267 | original_title: "Show Dogs", 268 | backdrop_path: "/pk1zexoUCtjFs761W48QyIPzwCj.jpg", 269 | adult: false, 270 | overview: 271 | "Max, a macho, solitary Rottweiler police dog is ordered to go undercover as a primped show dog in a prestigious Dog Show, along with his human partner, to avert a disaster from happening.", 272 | release_date: "2018-05-10" 273 | }, 274 | { 275 | vote_count: 0, 276 | id: 517745, 277 | video: false, 278 | vote_average: 0, 279 | title: "The First", 280 | popularity: 9.829438, 281 | poster_path: "/scSLVsmQdD6kVFYskp84gYLpX5M.jpg", 282 | original_language: "ru", 283 | original_title: "Первые", 284 | backdrop_path: "/ecHD0rmx8l4eZVSISLJVAgAaODU.jpg", 285 | adult: false, 286 | overview: 287 | "Vasily Pronchishchev and Vasily Chelyuskin were young lieutenants of the Russia fleet, who set out from Yakutsk along the Lena River to the Arctic Ocean on a sailing ship under the leadership of the commander Vitus Bering in the summer of 1735. Contrary to the imperial prohibition, incredible trials and deadly danger lying ahead of all the members of this expedition, a young girl enamored with one of the characters got onto this ship. However, neither storms or severe northern frosts and hunger were able to stop them, since fulfilling of their duty, reaching of the most northeastern point of Eurasia and putting of the vast Arctic territories on the world maps were their main purpose in life.", 288 | release_date: "2018-06-07" 289 | }, 290 | { 291 | vote_count: 2, 292 | id: 502897, 293 | video: false, 294 | vote_average: 0, 295 | title: "Leto", 296 | popularity: 8.567759, 297 | poster_path: "/syl3gKnmGEmV20ObA8JHxPU8RvQ.jpg", 298 | original_language: "ru", 299 | original_title: "Лето", 300 | backdrop_path: "/eFod8dTZVH3SFDF13V5ls2Hb00W.jpg", 301 | adult: false, 302 | overview: 303 | "Leningrad, one summer in the early eighties. Smuggling LP’s by Lou Reed and David Bowie, the underground rock scene is boiling ahead of the Perestroika. Mike and his beautiful wife Natasha meet with young Viktor Tsoï. Together with friends, they will change the destiny of rock’n’roll in the Soviet Union.", 304 | release_date: "2018-06-07" 305 | }, 306 | { 307 | vote_count: 5, 308 | id: 440626, 309 | video: false, 310 | vote_average: 5.8, 311 | title: "Sobibor", 312 | popularity: 8.662257, 313 | poster_path: "/rGOB5Xm0l0zAWAzVzeTnOPDMVQA.jpg", 314 | original_language: "ru", 315 | original_title: "Собибор", 316 | backdrop_path: "/5KhMpFJdnOAsDmIpT0TINUNDt8L.jpg", 317 | adult: false, 318 | overview: 319 | "Based on the true story, international historical project “Sobibor” is dedicated to the heroism of the Soviet o cer Alexander Pechersky. During the great Patriotic war, being in a Nazi concentration camp Sobibor he managed to do the impossible — for only three weeks to organize a revolt and mass escape of the prisoners. Part of the escapees were caught and shot, and the rest led by Pechersky managed to escape and joined the partisans.", 320 | release_date: "2018-05-03" 321 | } 322 | ]; 323 | --------------------------------------------------------------------------------