├── README.md
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── index.js
    ├── styles.css
    ├── routes
    │   ├── Detail.js
    │   ├── Home.module.css
    │   └── Home.js
    ├── App.js
    └── components
    │   ├── Movie.js
    │   └── Movie.module.css
├── .gitignore
└── package.json


/README.md:
--------------------------------------------------------------------------------
1 | # React for Beginners
2 | 
3 | Learning React From Zero to Ninja
4 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/react-for-beginners/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/react-for-beginners/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/react-for-beginners/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | import "./styles.css";
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById("root")
11 | );
12 | 


--------------------------------------------------------------------------------
/src/styles.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,
 9 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
10 |   background-color: #eff3f7;
11 |   height: 100%;
12 | }
13 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/routes/Detail.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { useParams } from "react-router-dom";
 3 | function Detail() {
 4 |   const { id } = useParams();
 5 |   const getMovie = async () => {
 6 |     const json = await (
 7 |       await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
 8 |     ).json();
 9 |     console.log(json);
10 |   };
11 |   useEffect(() => {
12 |     getMovie();
13 |   }, []);
14 |   return <h1>Detail</h1>;
15 | }
16 | export default Detail;
17 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 2 | import Detail from "./routes/Detail";
 3 | import Home from "./routes/Home";
 4 | function App() {
 5 |   return (
 6 |     <Router>
 7 |       <Switch>
 8 |         <Route path="/abot-us">
 9 |           <h1>Hello</h1>
10 |         </Route>
11 |         <Route path="/movie/:id">
12 |           <Detail />
13 |         </Route>
14 |         <Route path="/">
15 |           <Home />
16 |         </Route>
17 |       </Switch>
18 |     </Router>
19 |   );
20 | }
21 | 
22 | export default App;
23 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/routes/Home.module.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 | 
16 | .movies {
17 |   display: grid;
18 |   grid-template-columns: repeat(2, minmax(400px, 1fr));
19 |   grid-gap: 100px;
20 |   padding: 50px;
21 |   width: 80%;
22 |   padding-top: 70px;
23 | }
24 | 
25 | @media screen and (max-width: 1090px) {
26 |   .movies {
27 |     grid-template-columns: 1fr;
28 |     width: 100%;
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/Movie.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from "prop-types";
 2 | import { Link } from "react-router-dom";
 3 | import styles from "./Movie.module.css";
 4 | 
 5 | function Movie({ id, coverImg, title, year, summary, genres }) {
 6 |   return (
 7 |     <div className={styles.movie}>
 8 |       <img src={coverImg} alt={title} className={styles.movie__img} />
 9 |       <div>
10 |         <h2 className={styles.movie__title}>
11 |           <Link to={`/movie/${id}`}>{title}</Link>
12 |         </h2>
13 |         <h3 className={styles.movie__year}>{year}</h3>
14 |         <p>{summary.length > 235 ? `${summary.slice(0, 235)}...` : summary}</p>
15 |         <ul className={styles.movie__genres}>
16 |           {genres.map((g) => (
17 |             <li key={g}>{g}</li>
18 |           ))}
19 |         </ul>
20 |       </div>
21 |     </div>
22 |   );
23 | }
24 | 
25 | Movie.propTypes = {
26 |   id: PropTypes.number.isRequired,
27 |   coverImg: PropTypes.string.isRequired,
28 |   title: PropTypes.string.isRequired,
29 |   summary: PropTypes.string.isRequired,
30 |   genres: PropTypes.arrayOf(PropTypes.string).isRequired,
31 | };
32 | 
33 | export default Movie;
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-for-beginners",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.4",
 7 |     "@testing-library/react": "^11.1.0",
 8 |     "@testing-library/user-event": "^12.1.10",
 9 |     "gh-pages": "^3.2.3",
10 |     "prop-types": "^15.7.2",
11 |     "react": "^17.0.2",
12 |     "react-dom": "^17.0.2",
13 |     "react-router-dom": "^5.3.0",
14 |     "react-scripts": "4.0.3",
15 |     "web-vitals": "^1.0.1"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject",
22 |     "deploy": "gh-pages -d build",
23 |     "predeploy": "npm run build"
24 |   },
25 |   "eslintConfig": {
26 |     "extends": [
27 |       "react-app",
28 |       "react-app/jest"
29 |     ]
30 |   },
31 |   "browserslist": {
32 |     "production": [
33 |       ">0.2%",
34 |       "not dead",
35 |       "not op_mini all"
36 |     ],
37 |     "development": [
38 |       "last 1 chrome version",
39 |       "last 1 firefox version",
40 |       "last 1 safari version"
41 |     ]
42 |   },
43 |   "homepage": "https://nomadcoders.github.io/react-for-beginners"
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/Movie.module.css:
--------------------------------------------------------------------------------
 1 | .movie {
 2 |   background-color: white;
 3 |   margin-bottom: 70px;
 4 |   font-weight: 300;
 5 |   padding: 20px;
 6 |   border-radius: 5px;
 7 |   color: #adaeb9;
 8 |   display: grid;
 9 |   grid-template-columns: minmax(150px, 1fr) 2fr;
10 |   grid-gap: 20px;
11 |   text-decoration: none;
12 |   color: inherit;
13 |   box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
14 |     0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
15 | }
16 | 
17 | .movie__img {
18 |   position: relative;
19 |   top: -50px;
20 |   max-width: 150px;
21 |   width: 100%;
22 |   margin-right: 30px;
23 |   box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
24 |     0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
25 | }
26 | 
27 | .movie__title,
28 | .movie__year {
29 |   margin: 0;
30 |   font-weight: 300;
31 |   text-decoration: none;
32 | }
33 | 
34 | .movie__title a {
35 |   margin-bottom: 5px;
36 |   font-size: 24px;
37 |   color: #2c2c2c;
38 |   text-decoration: none;
39 | }
40 | 
41 | .movie__genres {
42 |   list-style: none;
43 |   padding: 0;
44 |   margin: 0;
45 |   display: flex;
46 |   flex-wrap: wrap;
47 |   margin: 5px 0px;
48 | }
49 | 
50 | .movie__genres li,
51 | .movie__year {
52 |   margin-right: 10px;
53 |   font-size: 14px;
54 | }
55 | 


--------------------------------------------------------------------------------
/src/routes/Home.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import Movie from "../components/Movie";
 3 | import styles from "./Home.module.css";
 4 | 
 5 | function Home() {
 6 |   const [loading, setLoading] = useState(true);
 7 |   const [movies, setMovies] = useState([]);
 8 |   const getMovies = async () => {
 9 |     const json = await (
10 |       await fetch(
11 |         `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
12 |       )
13 |     ).json();
14 |     setMovies(json.data.movies);
15 |     setLoading(false);
16 |   };
17 |   useEffect(() => {
18 |     getMovies();
19 |   }, []);
20 |   return (
21 |     <div className={styles.container}>
22 |       {loading ? (
23 |         <div className={styles.loader}>
24 |           <span>Loading...</span>
25 |         </div>
26 |       ) : (
27 |         <div className={styles.movies}>
28 |           {movies.map((movie) => (
29 |             <Movie
30 |               key={movie.id}
31 |               id={movie.id}
32 |               year={movie.year}
33 |               coverImg={movie.medium_cover_image}
34 |               title={movie.title}
35 |               summary={movie.summary}
36 |               genres={movie.genres}
37 |             />
38 |           ))}
39 |         </div>
40 |       )}
41 |     </div>
42 |   );
43 | }
44 | export default Home;
45 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------