├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.js
    ├── assets
        └── default-image.jpeg
    ├── data.js
    ├── index.css
    ├── index.js
    └── tutorial
        ├── 1-useState
            ├── final
            │   ├── 1-error-example.js
            │   ├── 2-useState-basics.js
            │   ├── 3-useState-array.js
            │   ├── 4-useState-object.js
            │   └── 5-useState-counter.js
            └── setup
            │   ├── 1-error-example.js
            │   ├── 2-useState-basics.js
            │   ├── 3-useState-array.js
            │   ├── 4-useState-object.js
            │   └── 5-useState-counter.js
        ├── 10-prop-types
            ├── final
            │   ├── Product.js
            │   ├── index.js
            │   └── testing.js
            └── setup
            │   ├── Product.js
            │   └── index.js
        ├── 11-react-router
            ├── ReactRouterInfo.md
            ├── final
            │   ├── About.js
            │   ├── Error.js
            │   ├── Home.js
            │   ├── Navbar.js
            │   ├── People.js
            │   ├── Person.js
            │   └── index.js
            └── setup
            │   ├── About.js
            │   ├── Error.js
            │   ├── Home.js
            │   ├── Navbar.js
            │   ├── People.js
            │   ├── Person.js
            │   └── index.js
        ├── 12-memo-useMemo-useCallback
            ├── final
            │   └── index.js
            └── setup
            │   └── index.js
        ├── 2-useEffect
            ├── final
            │   ├── 1-useEffect-basics.js
            │   ├── 2-useEffect-cleanup.js
            │   └── 3-useEffect-fetch-data.js
            └── setup
            │   ├── 1-useEffect-basics.js
            │   ├── 2-useEffect-cleanup.js
            │   └── 3-useEffect-fetch-data.js
        ├── 3-conditional-rendering
            ├── final
            │   ├── 1-multiple-returns.js
            │   ├── 2-short-circuit.js
            │   └── 3-show-hide.js
            └── setup
            │   ├── 1-multiple-returns.js
            │   ├── 2-short-circuit.js
            │   └── 3-show-hide.js
        ├── 4-forms
            ├── final
            │   ├── 1-controlled-inputs.js
            │   └── 2-multiple-inputs.js
            └── setup
            │   ├── 1-controlled-inputs.js
            │   └── 2-multiple-inputs.js
        ├── 5-useRef
            ├── final
            │   └── 1-useRef-basics.js
            └── setup
            │   └── 1-useRef-basics.js
        ├── 6-useReducer
            ├── final
            │   ├── Modal.js
            │   ├── index.js
            │   └── reducer.js
            └── setup
            │   ├── Modal.js
            │   └── index.js
        ├── 7-prop-drilling
            ├── final
            │   └── 1-prop-drilling.js
            └── setup
            │   └── 1-prop-drilling.js
        ├── 8-useContext
            ├── final
            │   └── 1-context-api.js
            └── setup
            │   └── 1-context-api.js
        └── 9-custom-hooks
            ├── final
                ├── 1-fetch-example.js
                └── 2-useFetch.js
            └── setup
                ├── 1-fetch-example.js
                └── 2-useFetch.js


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Corresponding Projects
 2 | 
 3 | #### useState
 4 | 
 5 | 1. Birthday Reminder
 6 | 
 7 | #### useEffect and Conditional Rendering
 8 | 
 9 | 2. Tours
10 | 3. Reviews
11 | 4. Accordion
12 | 5. Menu
13 | 6. Tabs
14 | 7. Slider
15 | 
16 | #### Forms
17 | 
18 | 8. Lorem Ipsum Generator
19 | 9. Color Shades Generator
20 | 10. Grocery Bud
21 | 
22 | #### useRef
23 | 
24 | 11. Navbar
25 | 
26 | #### useContext
27 | 
28 | 12. Modal and Sidebar
29 | 13. Stripe Menus
30 | 
31 | #### useReducer and useContext
32 | 
33 | 14. Cart
34 | 
35 | #### React Router
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tutorial",
 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-router-dom": "^5.2.0",
12 |     "react-scripts": "3.4.3"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
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 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/react-advanced-2020/19f34c9a3290feb87b00be0385cd84605ee8e649/public/favicon.ico


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


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/react-advanced-2020/19f34c9a3290feb87b00be0385cd84605ee8e649/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/react-advanced-2020/19f34c9a3290feb87b00be0385cd84605ee8e649/public/logo512.png


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


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


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | function App() {
 3 |   return (
 4 |     <div className='container'>
 5 |       <h2>Advanced Tutorial</h2>
 6 |     </div>
 7 |   )
 8 | }
 9 | 
10 | export default App
11 | 


--------------------------------------------------------------------------------
/src/assets/default-image.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/react-advanced-2020/19f34c9a3290feb87b00be0385cd84605ee8e649/src/assets/default-image.jpeg


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
1 | export const data = [
2 |   { id: 1, name: 'john' },
3 |   { id: 2, name: 'peter' },
4 |   { id: 3, name: 'susan' },
5 |   { id: 4, name: 'anna' },
6 | ];
7 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   /* dark shades of primary color*/
  9 |   --clr-primary-1: hsl(205, 86%, 17%);
 10 |   --clr-primary-2: hsl(205, 77%, 27%);
 11 |   --clr-primary-3: hsl(205, 72%, 37%);
 12 |   --clr-primary-4: hsl(205, 63%, 48%);
 13 |   /* primary/main color */
 14 |   --clr-primary-5: hsl(205, 78%, 60%);
 15 |   /* lighter shades of primary color */
 16 |   --clr-primary-6: hsl(205, 89%, 70%);
 17 |   --clr-primary-7: hsl(205, 90%, 76%);
 18 |   --clr-primary-8: hsl(205, 86%, 81%);
 19 |   --clr-primary-9: hsl(205, 90%, 88%);
 20 |   --clr-primary-10: hsl(205, 100%, 96%);
 21 |   /* darkest grey - used for headings */
 22 |   --clr-grey-1: hsl(209, 61%, 16%);
 23 |   --clr-grey-2: hsl(211, 39%, 23%);
 24 |   --clr-grey-3: hsl(209, 34%, 30%);
 25 |   --clr-grey-4: hsl(209, 28%, 39%);
 26 |   /* grey used for paragraphs */
 27 |   --clr-grey-5: hsl(210, 22%, 49%);
 28 |   --clr-grey-6: hsl(209, 23%, 60%);
 29 |   --clr-grey-7: hsl(211, 27%, 70%);
 30 |   --clr-grey-8: hsl(210, 31%, 80%);
 31 |   --clr-grey-9: hsl(212, 33%, 89%);
 32 |   --clr-grey-10: hsl(210, 36%, 96%);
 33 |   --clr-white: #fff;
 34 |   --clr-red-dark: hsl(360, 67%, 44%);
 35 |   --clr-red-light: hsl(360, 71%, 66%);
 36 |   --clr-green-dark: hsl(125, 67%, 44%);
 37 |   --clr-green-light: hsl(125, 71%, 66%);
 38 |   --clr-black: #222;
 39 |   --transition: all 0.3s linear;
 40 |   --spacing: 0.1rem;
 41 |   --radius: 0.25rem;
 42 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 43 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
 44 |   --max-width: 1170px;
 45 |   --fixed-width: 450px;
 46 |   --clr-orange-1: hsl(12, 83%, 98%);
 47 |   --clr-orange-2: hsl(14, 91%, 95%);
 48 |   --clr-orange-3: hsl(12, 89%, 89%);
 49 |   --clr-orange-4: hsl(13, 87%, 82%);
 50 |   --clr-orange-5: hsl(13, 88%, 68%);
 51 |   --clr-orange-6: hsl(13, 88%, 55%);
 52 |   --clr-orange-7: hsl(13, 74%, 49%);
 53 |   --clr-orange-8: hsl(13, 74%, 33%);
 54 |   --clr-orange-9: hsl(13, 73%, 25%);
 55 |   --clr-orange-10: hsl(13, 73%, 16%);
 56 | }
 57 | /*
 58 | =============== 
 59 | Global Styles
 60 | ===============
 61 | */
 62 | 
 63 | *,
 64 | ::after,
 65 | ::before {
 66 |   margin: 0;
 67 |   padding: 0;
 68 |   box-sizing: border-box;
 69 | }
 70 | body {
 71 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 72 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 73 |   background: var(--clr-grey-10);
 74 |   color: var(--clr-grey-1);
 75 |   line-height: 1.5;
 76 |   font-size: 0.875rem;
 77 | }
 78 | ul {
 79 |   list-style-type: none;
 80 | }
 81 | a {
 82 |   text-decoration: none;
 83 | }
 84 | h1,
 85 | h2,
 86 | h3,
 87 | h4 {
 88 |   letter-spacing: var(--spacing);
 89 |   text-transform: capitalize;
 90 |   line-height: 1.25;
 91 |   margin-bottom: 0.75rem;
 92 | }
 93 | h1 {
 94 |   font-size: 3rem;
 95 | }
 96 | h2 {
 97 |   font-size: 2rem;
 98 | }
 99 | h3 {
100 |   font-size: 1.25rem;
101 | }
102 | h4 {
103 |   font-size: 0.875rem;
104 | }
105 | p {
106 |   margin-bottom: 1.25rem;
107 |   color: var(--clr-grey-5);
108 | }
109 | @media screen and (min-width: 800px) {
110 |   h1 {
111 |     font-size: 4rem;
112 |   }
113 |   h2 {
114 |     font-size: 2.5rem;
115 |   }
116 |   h3 {
117 |     font-size: 1.75rem;
118 |   }
119 |   h4 {
120 |     font-size: 1rem;
121 |   }
122 |   body {
123 |     font-size: 1rem;
124 |   }
125 |   h1,
126 |   h2,
127 |   h3,
128 |   h4 {
129 |     line-height: 1;
130 |   }
131 | }
132 | /*  global classes */
133 | 
134 | /* section */
135 | .section,
136 | .container {
137 |   width: 90vw;
138 |   margin: 0 auto;
139 |   max-width: var(--max-width);
140 | }
141 | 
142 | @media screen and (min-width: 992px) {
143 |   .section {
144 |     width: 95vw;
145 |   }
146 | }
147 | 
148 | .container {
149 |   text-align: center;
150 |   margin-top: 5rem;
151 | }
152 | .btn {
153 |   display: inline-block;
154 |   background: var(--clr-primary-5);
155 |   color: var(--clr-white);
156 |   padding: 0.25rem 0.75rem;
157 |   border-radius: var(--radius);
158 |   border-color: transparent;
159 |   text-transform: capitalize;
160 |   font-size: 1rem;
161 |   letter-spacing: var(--spacing);
162 |   margin-top: 2rem;
163 |   margin-left: 0.5rem;
164 |   margin-right: 0.5rem;
165 |   cursor: pointer;
166 |   transition: var(--transition);
167 | }
168 | .btn:hover {
169 |   background: var(--clr-primary-1);
170 |   color: var(--clr-primary-5);
171 | }
172 | .item {
173 |   background: var(--clr-white);
174 |   display: flex;
175 |   justify-content: space-between;
176 |   max-width: var(--fixed-width);
177 |   margin: 2rem auto;
178 |   align-items: center;
179 |   border-radius: var(--radius);
180 | }
181 | .item button,
182 | .item a {
183 |   background: transparent;
184 |   border-color: transparent;
185 |   color: var(--clr-primary-5);
186 |   letter-spacing: var(--spacing);
187 |   cursor: pointer;
188 | }
189 | .item {
190 |   padding: 1rem 2rem;
191 | }
192 | .item h4 {
193 |   margin-bottom: 0;
194 | }
195 | .item p {
196 |   margin-bottom: 0;
197 | }
198 | .modal {
199 |   position: absolute;
200 |   top: 2rem;
201 |   left: 50%;
202 |   transform: translateX(-50%);
203 |   background: var(--clr-white);
204 |   display: inline-block;
205 |   padding: 0.25rem 1rem;
206 |   border-radius: var(--radius);
207 |   text-transform: capitalize;
208 | }
209 | 
210 | .modal p {
211 |   margin-bottom: 0;
212 |   color: var(--clr-red-dark);
213 | }
214 | .form {
215 |   background: var(--clr-white);
216 |   max-width: var(--fixed-width);
217 |   margin: 0 auto;
218 |   margin-bottom: 4rem;
219 |   padding: 1rem 2rem;
220 |   border-radius: var(--radius);
221 | }
222 | .form input {
223 |   background: var(--clr-grey-10);
224 |   border-color: transparent;
225 |   border-radius: var(--radius);
226 |   padding: 0.25rem 0.5rem;
227 | }
228 | .form-control {
229 |   margin: 0.5rem 0;
230 |   display: grid;
231 |   grid-template-columns: 100px 1fr;
232 |   align-items: center;
233 | }
234 | .form button {
235 |   display: inline-block;
236 |   background: var(--clr-black);
237 |   color: var(--clr-white);
238 |   border-color: transparent;
239 |   margin-top: 1rem;
240 |   letter-spacing: var(--spacing);
241 |   padding: 0.15rem 0.25rem;
242 |   text-transform: capitalize;
243 |   border-radius: var(--radius);
244 |   cursor: pointer;
245 | }
246 | .nav-links {
247 |   max-width: var(--fixed-width);
248 |   margin: 0 auto;
249 |   margin-bottom: 4rem;
250 |   display: grid;
251 |   grid-template-columns: repeat(3, 1fr);
252 | }
253 | .nav-links a {
254 |   color: var(--clr-grey-5);
255 | }
256 | .users {
257 |   display: grid;
258 |   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
259 |   gap: 2rem;
260 |   margin: 3rem auto;
261 | }
262 | .users li {
263 |   width: 100%;
264 |   display: flex;
265 |   align-items: center;
266 |   background: var(--clr-white);
267 |   padding: 1rem 2rem;
268 |   border-radius: var(--radius);
269 |   text-align: left;
270 | }
271 | .users img {
272 |   width: 50px;
273 |   height: 50px;
274 |   border-radius: 50%;
275 |   margin-right: 1rem;
276 | }
277 | .users h4 {
278 |   margin-bottom: 0.15rem;
279 | }
280 | .users a {
281 |   color: var(--clr-grey-5);
282 |   text-transform: capitalize;
283 | }
284 | 
285 | .products {
286 |   margin: 4rem 0;
287 |   display: grid;
288 |   gap: 2rem;
289 | }
290 | @media screen and (min-width: 576px) {
291 |   .products {
292 |     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
293 |   }
294 | }
295 | .product {
296 |   background: var(--clr-white);
297 |   border-radius: var(--radius);
298 | }
299 | .product img {
300 |   border-top-left-radius: var(--radius);
301 |   border-top-right-radius: var(--radius);
302 | 
303 |   width: 100%;
304 |   height: 15rem;
305 |   object-fit: cover;
306 | }
307 | .product h4 {
308 |   margin-top: 1rem;
309 | }
310 | 
311 | .product button {
312 |   margin-bottom: 1rem;
313 |   background: var(--clr-primary-5);
314 |   border-radius: var(--radius);
315 |   border-color: transparent;
316 |   color: var(--clr-white);
317 |   padding: 0.25rem 0.5rem;
318 |   text-transform: capitalize;
319 |   cursor: pointer;
320 | }
321 | 


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


--------------------------------------------------------------------------------
/src/tutorial/1-useState/final/1-error-example.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const ErrorExample = () => {
 4 |   let title = 'random title';
 5 | 
 6 |   const handleClick = () => {
 7 |     title = 'hello people';
 8 |     console.log(title);
 9 |   };
10 |   return (
11 |     <React.Fragment>
12 |       <h2>{title}</h2>
13 |       <button type='button' className='btn' onClick={handleClick}>
14 |         change title
15 |       </button>
16 |     </React.Fragment>
17 |   );
18 | };
19 | 
20 | export default ErrorExample;
21 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/final/2-useState-basics.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | // starts with use
 3 | // component must be uppercase
 4 | // invoke inside function/component body
 5 | // don't call hooks conditonally
 6 | 
 7 | const UseStateBasics = () => {
 8 |   // console.log(useState());
 9 |   // const value = useState()[0];
10 |   // const handler = useState()[1];
11 |   // console.log(value, handler);
12 | 
13 |   const [text, setText] = useState('random title');
14 |   const handleClick = () => {
15 |     if (text === 'random title') {
16 |       setText('hello world');
17 |     } else {
18 |       setText('random title');
19 |     }
20 |   };
21 | 
22 |   return (
23 |     <React.Fragment>
24 |       <h1>{text}</h1>
25 |       <button type='button' className='btn' onClick={handleClick}>
26 |         change title
27 |       </button>
28 |     </React.Fragment>
29 |   );
30 | };
31 | 
32 | export default UseStateBasics;
33 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/final/3-useState-array.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { data } from '../../../data';
 3 | const UseStateArray = () => {
 4 |   const [people, setPeople] = React.useState(data);
 5 | 
 6 |   const removeItem = (id) => {
 7 |     let newPeople = people.filter((person) => person.id !== id);
 8 |     setPeople(newPeople);
 9 |   };
10 |   return (
11 |     <>
12 |       {people.map((person) => {
13 |         const { id, name } = person;
14 |         return (
15 |           <div key={id} className='item'>
16 |             <h4>{name}</h4>
17 |             <button onClick={() => removeItem(id)}>remove</button>
18 |           </div>
19 |         );
20 |       })}
21 |       <button className='btn' onClick={() => setPeople([])}>
22 |         clear items
23 |       </button>
24 |     </>
25 |   );
26 | };
27 | 
28 | export default UseStateArray;
29 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/final/4-useState-object.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | const UseStateObject = () => {
 4 |   const [person, setPerson] = useState({
 5 |     name: 'peter',
 6 |     age: 24,
 7 |     message: 'random message',
 8 |   });
 9 | 
10 |   // const [name,setName] = useState('peter')
11 |   // const [age,setAge] = useState(24)
12 |   // const [message,setMessage] = useState('random message')
13 | 
14 |   const changeMessage = () => {
15 |     setPerson({ ...person, message: 'hello world' });
16 |     // setMessage('hello world')
17 |   };
18 | 
19 |   return (
20 |     <>
21 |       <h3>{person.name}</h3>
22 |       <h3>{person.age}</h3>
23 |       <h4>{person.message}</h4>
24 |       <button className='btn' onClick={changeMessage}>
25 |         change message
26 |       </button>
27 |     </>
28 |   );
29 | };
30 | 
31 | export default UseStateObject;
32 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/final/5-useState-counter.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | const UseStateCounter = () => {
 4 |   const [value, setValue] = useState(0);
 5 | 
 6 |   const reset = () => {
 7 |     setValue(0);
 8 |   };
 9 | 
10 |   const complexIncrease = () => {
11 |     setTimeout(() => {
12 |       // setValue(value + 1);
13 |       setValue((prevState) => {
14 |         return prevState + 1;
15 |       });
16 |     }, 2000);
17 |   };
18 | 
19 |   return (
20 |     <>
21 |       <section style={{ margin: '4rem 0' }}>
22 |         <h2>regular counter</h2>
23 |         <h1>{value}</h1>
24 |         <button className='btn' onClick={() => setValue(value - 1)}>
25 |           decrease
26 |         </button>
27 |         <button className='btn' onClick={reset}>
28 |           reset
29 |         </button>
30 |         <button className='btn' onClick={() => setValue(value + 1)}>
31 |           increase
32 |         </button>
33 |       </section>
34 |       <section style={{ margin: '4rem 0' }}>
35 |         <h2>more complex counter</h2>
36 |         <h1>{value}</h1>
37 |         <button className='btn' onClick={complexIncrease}>
38 |           increase later
39 |         </button>
40 |       </section>
41 |     </>
42 |   );
43 | };
44 | 
45 | export default UseStateCounter;
46 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/setup/1-error-example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | const ErrorExample = () => {
4 |   return <h2>useState error example</h2>;
5 | };
6 | 
7 | export default ErrorExample;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/setup/2-useState-basics.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | 
3 | const UseStateBasics = () => {
4 |   return <h2>useState basic example</h2>;
5 | };
6 | 
7 | export default UseStateBasics;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/setup/3-useState-array.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { data } from '../../../data';
3 | 
4 | const UseStateArray = () => {
5 |   return <h2>useState array example</h2>;
6 | };
7 | 
8 | export default UseStateArray;
9 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/setup/4-useState-object.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | 
3 | const UseStateObject = () => {
4 |   return <h2>useState object example</h2>;
5 | };
6 | 
7 | export default UseStateObject;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/1-useState/setup/5-useState-counter.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | 
3 | const UseStateCounter = () => {
4 |   return <h2>useState counter example</h2>;
5 | };
6 | 
7 | export default UseStateCounter;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/10-prop-types/final/Product.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import defaultImage from '../../../assets/default-image.jpeg';
 4 | const Product = ({ image, name, price }) => {
 5 |   const url = image && image.url;
 6 |   return (
 7 |     <article className='product'>
 8 |       <img src={url || defaultImage} alt={name || 'default name'} />
 9 |       <h4>{name}</h4>
10 |       <p>${price || 3.99}</p>
11 |     </article>
12 |   );
13 | };
14 | 
15 | Product.propTypes = {
16 |   image: PropTypes.object.isRequired,
17 |   name: PropTypes.string.isRequired,
18 |   price: PropTypes.number.isRequired,
19 | };
20 | // Product.defaultProps = {
21 | //   name: 'default name',
22 | //   price: 3.99,
23 | //   image: defaultImage,
24 | // };
25 | 
26 | export default Product;
27 | 


--------------------------------------------------------------------------------
/src/tutorial/10-prop-types/final/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Product from './Product'
 3 | import { useFetch } from '../../9-custom-hooks/final/2-useFetch'
 4 | // import defaultImage from '../../../assets/default-image.jpeg';
 5 | 
 6 | // ATTENTION!!!!!!!!!!
 7 | // I SWITCHED TO PERMANENT DOMAIN
 8 | const url = 'https://course-api.com/react-prop-types-example'
 9 | 
10 | const Index = () => {
11 |   const { products } = useFetch(url)
12 |   return (
13 |     <div>
14 |       <h2>products</h2>
15 |       {/* <img src={defaultImage} /> */}
16 |       <section className='products'>
17 |         {products.map((product) => {
18 |           return <Product key={product.id} {...product} />
19 |         })}
20 |       </section>
21 |     </div>
22 |   )
23 | }
24 | 
25 | export default Index
26 | 


--------------------------------------------------------------------------------
/src/tutorial/10-prop-types/final/testing.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | const testing = (props) => {
 5 |   return <div></div>;
 6 | };
 7 | 
 8 | testing.propTypes = {
 9 |   name: PropTypes.array.isRequired,
10 | };
11 | 
12 | export default testing;
13 | 


--------------------------------------------------------------------------------
/src/tutorial/10-prop-types/setup/Product.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | const Product = () => {
4 |   return <article className='product'>single product</article>;
5 | };
6 | 
7 | export default Product;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/10-prop-types/setup/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Product from './Product'
 3 | import { useFetch } from '../../9-custom-hooks/final/2-useFetch'
 4 | 
 5 | // ATTENTION!!!!!!!!!!
 6 | // I SWITCHED TO PERMANENT DOMAIN
 7 | const url = 'https://course-api.com/react-prop-types-example'
 8 | 
 9 | const Index = () => {
10 |   const { products } = useFetch(url)
11 |   return (
12 |     <div>
13 |       <h2>products</h2>
14 |       <section className='products'>
15 |         {products.map((product) => {
16 |           return <Product key={product.id} {...product} />
17 |         })}
18 |       </section>
19 |     </div>
20 |   )
21 | }
22 | 
23 | export default Index
24 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/ReactRouterInfo.md:
--------------------------------------------------------------------------------
1 | !(react router)[https://reactrouter.com/web/guides/quick-start]
2 | 
3 | ```
4 | npm install react-router-dom
5 | 
6 | ```
7 | 
8 | "react-router-dom": "^5.2.0"
9 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/final/About.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const About = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>About Page</h1>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default About;
12 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/final/Error.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | const Error = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>Error Page</h1>
 7 |       <Link to='/' className='btn'>
 8 |         Back Home
 9 |       </Link>
10 |     </div>
11 |   );
12 | };
13 | 
14 | export default Error;
15 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/final/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Home = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>Home Page</h1>
 7 |       <p>shake and bake</p>
 8 |     </div>
 9 |   );
10 | };
11 | 
12 | export default Home;
13 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/final/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | const Navbar = () => {
 4 |   return (
 5 |     <nav>
 6 |       <ul>
 7 |         <li>
 8 |           <Link to='/'>Home</Link>
 9 |         </li>
10 |         <li>
11 |           <Link to='/about'>About</Link>
12 |         </li>
13 |         <li>
14 |           <Link to='/people'>People</Link>
15 |         </li>
16 |       </ul>
17 |     </nav>
18 |   );
19 | };
20 | 
21 | export default Navbar;
22 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/final/People.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { data } from '../../../data';
 3 | import { Link } from 'react-router-dom';
 4 | const People = () => {
 5 |   const [people, setPeople] = useState(data);
 6 |   return (
 7 |     <div>
 8 |       <h1>People Page</h1>
 9 |       {people.map((person) => {
10 |         return (
11 |           <div key={person.id} className='item'>
12 |             <h4>{person.name}</h4>
13 |             <Link to={`/person/${person.id}`}>Learn More</Link>
14 |           </div>
15 |         );
16 |       })}
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default People;
22 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/final/Person.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { data } from '../../../data';
 3 | import { Link, useParams } from 'react-router-dom';
 4 | const Person = () => {
 5 |   const [name, setName] = useState('default name');
 6 |   const { id } = useParams();
 7 | 
 8 |   useEffect(() => {
 9 |     const newPerson = data.find((person) => person.id === parseInt(id));
10 |     setName(newPerson.name);
11 |   }, []);
12 |   return (
13 |     <div>
14 |       <h1>{name}</h1>
15 |       <Link to='/people' className='btn'>
16 |         Back To People
17 |       </Link>
18 |     </div>
19 |   );
20 | };
21 | 
22 | export default Person;
23 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/final/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | // react router
 3 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 4 | // pages
 5 | import Home from './Home';
 6 | import About from './About';
 7 | import People from './People';
 8 | import Error from './Error';
 9 | import Person from './Person';
10 | // navbar
11 | import Navbar from './Navbar';
12 | const ReactRouterSetup = () => {
13 |   return (
14 |     <Router>
15 |       <Navbar />
16 |       <Switch>
17 |         <Route exact path='/'>
18 |           <Home />
19 |         </Route>
20 |         <Route path='/about'>
21 |           <About />
22 |         </Route>
23 |         <Route path='/people'>
24 |           <People />
25 |         </Route>
26 |         <Route path='/person/:id' children={<Person />}></Route>
27 |         <Route path='*'>
28 |           <Error />
29 |         </Route>
30 |       </Switch>
31 |     </Router>
32 |   );
33 | };
34 | 
35 | export default ReactRouterSetup;
36 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/setup/About.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const About = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>About Page</h1>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default About;
12 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/setup/Error.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | const Error = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>Error Page</h1>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default Error;
12 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/setup/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Home = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1>Home Page</h1>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default Home;
12 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/setup/Navbar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | const Navbar = () => {
4 |   return <nav>navbar</nav>;
5 | };
6 | 
7 | export default Navbar;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/setup/People.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { data } from '../../../data';
 3 | import { Link } from 'react-router-dom';
 4 | const People = () => {
 5 |   const [people, setPeople] = useState(data);
 6 |   return (
 7 |     <div>
 8 |       <h1>People Page</h1>
 9 |       {people.map((person) => {
10 |         return (
11 |           <div key={person.id} className='item'>
12 |             <h4>{person.name}</h4>
13 |           </div>
14 |         );
15 |       })}
16 |     </div>
17 |   );
18 | };
19 | 
20 | export default People;
21 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/setup/Person.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { data } from '../../../data';
 3 | import { Link, useParams } from 'react-router-dom';
 4 | const Person = () => {
 5 |   return (
 6 |     <div>
 7 |       <h2>person</h2>
 8 |     </div>
 9 |   );
10 | };
11 | 
12 | export default Person;
13 | 


--------------------------------------------------------------------------------
/src/tutorial/11-react-router/setup/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | // react router
 3 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 4 | // pages
 5 | import Home from './Home';
 6 | import About from './About';
 7 | import People from './People';
 8 | import Error from './Error';
 9 | import Person from './Person';
10 | // navbar
11 | import Navbar from './Navbar';
12 | const ReactRouterSetup = () => {
13 |   return <h2>react router</h2>;
14 | };
15 | 
16 | export default ReactRouterSetup;
17 | 


--------------------------------------------------------------------------------
/src/tutorial/12-memo-useMemo-useCallback/final/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useCallback, useMemo } from 'react'
 2 | import { useFetch } from '../../9-custom-hooks/final/2-useFetch'
 3 | 
 4 | // ATTENTION!!!!!!!!!!
 5 | // I SWITCHED TO PERMANENT DOMAIN
 6 | const url = 'https://course-api.com/javascript-store-products'
 7 | 
 8 | // every time props or state changes, component re-renders
 9 | const calculateMostExpensive = (data) => {
10 |   return (
11 |     data.reduce((total, item) => {
12 |       const price = item.fields.price
13 |       if (price >= total) {
14 |         total = price
15 |       }
16 |       return total
17 |     }, 0) / 100
18 |   )
19 | }
20 | const Index = () => {
21 |   const { products } = useFetch(url)
22 |   const [count, setCount] = useState(0)
23 |   const [cart, setCart] = useState(0)
24 | 
25 |   const addToCart = useCallback(() => {
26 |     setCart(cart + 1)
27 |   }, [cart])
28 | 
29 |   const mostExpensive = useMemo(() => calculateMostExpensive(products), [
30 |     products,
31 |   ])
32 |   return (
33 |     <>
34 |       <h1>Count : {count}</h1>
35 |       <button className='btn' onClick={() => setCount(count + 1)}>
36 |         click me
37 |       </button>
38 |       <h1 style={{ marginTop: '3rem' }}>cart : {cart}</h1>
39 |       <h1>Most Expensive : ${mostExpensive}</h1>
40 |       <BigList products={products} addToCart={addToCart} />
41 |     </>
42 |   )
43 | }
44 | 
45 | const BigList = React.memo(({ products, addToCart }) => {
46 |   // useEffect(() => {
47 |   //   console.count('hello from big list');
48 |   // });
49 | 
50 |   return (
51 |     <section className='products'>
52 |       {products.map((product) => {
53 |         return (
54 |           <SingleProduct
55 |             key={product.id}
56 |             {...product}
57 |             addToCart={addToCart}
58 |           ></SingleProduct>
59 |         )
60 |       })}
61 |     </section>
62 |   )
63 | })
64 | 
65 | const SingleProduct = ({ fields, addToCart }) => {
66 |   let { name, price } = fields
67 |   price = price / 100
68 |   const image = fields.image[0].url
69 | 
70 |   // useEffect(() => {
71 |   //   console.count('hello from product');
72 |   // });
73 |   return (
74 |     <article className='product'>
75 |       <img src={image} alt={name} />
76 |       <h4>{name}</h4>
77 |       <p>${price}</p>
78 |       <button onClick={addToCart}>add to cart</button>
79 |     </article>
80 |   )
81 | }
82 | export default Index
83 | 


--------------------------------------------------------------------------------
/src/tutorial/12-memo-useMemo-useCallback/setup/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useCallback, useMemo } from 'react'
 2 | import { useFetch } from '../../9-custom-hooks/final/2-useFetch'
 3 | 
 4 | // ATTENTION!!!!!!!!!!
 5 | // I SWITCHED TO PERMANENT DOMAIN
 6 | const url = 'https://course-api.com/javascript-store-products'
 7 | 
 8 | // every time props or state changes, component re-renders
 9 | 
10 | const Index = () => {
11 |   const { products } = useFetch(url)
12 |   const [count, setCount] = useState(0)
13 | 
14 |   return (
15 |     <>
16 |       <h1>Count : {count}</h1>
17 |       <button className='btn' onClick={() => setCount(count + 1)}>
18 |         click me
19 |       </button>
20 |       <BigList products={products} />
21 |     </>
22 |   )
23 | }
24 | 
25 | const BigList = ({ products }) => {
26 |   return (
27 |     <section className='products'>
28 |       {products.map((product) => {
29 |         return <SingleProduct key={product.id} {...product}></SingleProduct>
30 |       })}
31 |     </section>
32 |   )
33 | }
34 | 
35 | const SingleProduct = ({ fields }) => {
36 |   let { name, price } = fields
37 |   price = price / 100
38 |   const image = fields.image[0].url
39 | 
40 |   return (
41 |     <article className='product'>
42 |       <img src={image} alt={name} />
43 |       <h4>{name}</h4>
44 |       <p>${price}</p>
45 |     </article>
46 |   )
47 | }
48 | export default Index
49 | 


--------------------------------------------------------------------------------
/src/tutorial/2-useEffect/final/1-useEffect-basics.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | // by default runs after every re-render
 3 | // cleanup function
 4 | // second parameter
 5 | const UseEffectBasics = () => {
 6 |   const [value, setValue] = useState(0);
 7 |   useEffect(() => {
 8 |     console.log('call useEffect');
 9 |     if (value > 0) {
10 |       document.title = `New Messages(${value})`;
11 |     }
12 |   });
13 | 
14 |   console.log('render component');
15 |   return (
16 |     <>
17 |       <h1>{value}</h1>
18 |       <button className='btn' onClick={() => setValue(value + 1)}>
19 |         click me
20 |       </button>
21 |     </>
22 |   );
23 | };
24 | 
25 | export default UseEffectBasics;
26 | 


--------------------------------------------------------------------------------
/src/tutorial/2-useEffect/final/2-useEffect-cleanup.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | // cleanup function
 4 | // second argument
 5 | 
 6 | const UseEffectCleanup = () => {
 7 |   const [size, setSize] = useState(window.innerWidth);
 8 | 
 9 |   const checkSize = () => {
10 |     setSize(window.innerWidth);
11 |   };
12 | 
13 |   useEffect(() => {
14 |     console.log('useEffect');
15 |     window.addEventListener('resize', checkSize);
16 |     return () => {
17 |       console.log('cleanup');
18 |       window.removeEventListener('resize', checkSize);
19 |     };
20 |   }, []);
21 |   console.log('render');
22 |   return (
23 |     <>
24 |       <h1>window</h1>
25 |       <h2>{size} PX</h2>
26 |     </>
27 |   );
28 | };
29 | 
30 | export default UseEffectCleanup;
31 | 


--------------------------------------------------------------------------------
/src/tutorial/2-useEffect/final/3-useEffect-fetch-data.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | const url = 'https://api.github.com/users';
 4 | 
 5 | // second argument
 6 | 
 7 | const UseEffectFetchData = () => {
 8 |   const [users, setUsers] = useState([]);
 9 | 
10 |   const getUsers = async () => {
11 |     const response = await fetch(url);
12 |     const users = await response.json();
13 |     setUsers(users);
14 |     // console.log(users);
15 |   };
16 | 
17 |   useEffect(() => {
18 |     getUsers();
19 |   }, []);
20 |   return (
21 |     <>
22 |       <h3>github users</h3>
23 |       <ul className='users'>
24 |         {users.map((user) => {
25 |           const { id, login, avatar_url, html_url } = user;
26 |           return (
27 |             <li key={id}>
28 |               <img src={avatar_url} alt={login} />
29 |               <div>
30 |                 <h4>{login}</h4>
31 |                 <a href={html_url}>profile</a>
32 |               </div>
33 |             </li>
34 |           );
35 |         })}
36 |       </ul>
37 |     </>
38 |   );
39 | };
40 | 
41 | export default UseEffectFetchData;
42 | 


--------------------------------------------------------------------------------
/src/tutorial/2-useEffect/setup/1-useEffect-basics.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | // by default runs after every re-render
 3 | // cleanup function
 4 | // second parameter
 5 | const UseEffectBasics = () => {
 6 |   return <h2>useEffect Basics</h2>;
 7 | };
 8 | 
 9 | export default UseEffectBasics;
10 | 


--------------------------------------------------------------------------------
/src/tutorial/2-useEffect/setup/2-useEffect-cleanup.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | // cleanup function
 4 | // second argument
 5 | 
 6 | const UseEffectCleanup = () => {
 7 |   return <h2>useEffect cleanup</h2>;
 8 | };
 9 | 
10 | export default UseEffectCleanup;
11 | 


--------------------------------------------------------------------------------
/src/tutorial/2-useEffect/setup/3-useEffect-fetch-data.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | const url = 'https://api.github.com/users';
 4 | 
 5 | const UseEffectFetchData = () => {
 6 |   return <h2>fetch data</h2>;
 7 | };
 8 | 
 9 | export default UseEffectFetchData;
10 | 


--------------------------------------------------------------------------------
/src/tutorial/3-conditional-rendering/final/1-multiple-returns.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | const url = 'https://api.github.com/users/QuincyLarson';
 3 | const MultipleReturns = () => {
 4 |   const [isLoading, setIsLoading] = useState(true);
 5 |   const [isError, setIsError] = useState(false);
 6 |   const [user, setUser] = useState('default user');
 7 | 
 8 |   useEffect(() => {
 9 |     fetch(url)
10 |       .then((resp) => {
11 |         if (resp.status >= 200 && resp.status <= 299) {
12 |           return resp.json();
13 |         } else {
14 |           setIsLoading(false);
15 |           setIsError(true);
16 |           throw new Error(resp.statusText);
17 |         }
18 |       })
19 |       .then((user) => {
20 |         const { login } = user;
21 |         setUser(login);
22 |         setIsLoading(false);
23 |       })
24 |       .catch((error) => console.log(error));
25 |   }, []);
26 | 
27 |   if (isLoading) {
28 |     return (
29 |       <div>
30 |         <h1>Loading...</h1>
31 |       </div>
32 |     );
33 |   }
34 |   if (isError) {
35 |     return (
36 |       <div>
37 |         <h1>Error....</h1>
38 |       </div>
39 |     );
40 |   }
41 |   return (
42 |     <div>
43 |       <h1>{user}</h1>
44 |     </div>
45 |   );
46 | };
47 | 
48 | export default MultipleReturns;
49 | 


--------------------------------------------------------------------------------
/src/tutorial/3-conditional-rendering/final/2-short-circuit.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | // short-circuit evaluation
 3 | // ternary operator
 4 | 
 5 | const ShortCircuit = () => {
 6 |   const [text, setText] = useState('');
 7 |   const [isError, setIsError] = useState(false);
 8 |   // const firstValue = text || 'hello world';
 9 |   // const secondValue = text && 'hello world';
10 | 
11 |   return (
12 |     <>
13 |       {/* <h1>{firstValue}</h1>
14 |       <h1>value : {secondValue}</h1> */}
15 |       {/* {if(){console.log('hello world')}} */}
16 |       <h1>{text || 'john doe'}</h1>
17 |       <button className='btn' onClick={() => setIsError(!isError)}>
18 |         toggle error
19 |       </button>
20 |       {isError && <h1>Error...</h1>}
21 |       {isError ? (
22 |         <p>there is an error...</p>
23 |       ) : (
24 |         <div>
25 |           <h2>there is no error</h2>
26 |         </div>
27 |       )}
28 |     </>
29 |   );
30 | };
31 | 
32 | export default ShortCircuit;
33 | 


--------------------------------------------------------------------------------
/src/tutorial/3-conditional-rendering/final/3-show-hide.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | const ShowHide = () => {
 4 |   const [show, setShow] = useState(false);
 5 |   return (
 6 |     <>
 7 |       <button className='btn' onClick={() => setShow(!show)}>
 8 |         show/hide
 9 |       </button>
10 |       {show && <Item />}
11 |     </>
12 |   );
13 | };
14 | 
15 | const Item = () => {
16 |   const [size, setSize] = useState(window.innerWidth);
17 |   const checkSize = () => {
18 |     setSize(window.innerWidth);
19 |   };
20 |   useEffect(() => {
21 |     window.addEventListener('resize', checkSize);
22 |     return () => {
23 |       window.removeEventListener('resize', checkSize);
24 |     };
25 |   }, []);
26 | 
27 |   return (
28 |     <div style={{ marginTop: '2rem' }}>
29 |       <h1>Window</h1>
30 |       <h2>size : {size}</h2>
31 |     </div>
32 |   );
33 | };
34 | 
35 | export default ShowHide;
36 | 


--------------------------------------------------------------------------------
/src/tutorial/3-conditional-rendering/setup/1-multiple-returns.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | const url = 'https://api.github.com/users/QuincyLarson';
3 | const MultipleReturns = () => {
4 |   return <h2>multiple returns</h2>;
5 | };
6 | 
7 | export default MultipleReturns;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/3-conditional-rendering/setup/2-short-circuit.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | // short-circuit evaluation
 3 | // ternary operator
 4 | 
 5 | const ShortCircuit = () => {
 6 |   // const firstValue = text || 'hello world';
 7 |   // const secondValue = text && 'hello world';
 8 | 
 9 |   return <h2>short circuit</h2>;
10 | };
11 | 
12 | export default ShortCircuit;
13 | 


--------------------------------------------------------------------------------
/src/tutorial/3-conditional-rendering/setup/3-show-hide.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | 
3 | const ShowHide = () => {
4 |   return <h2>show/hide</h2>;
5 | };
6 | 
7 | export default ShowHide;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/4-forms/final/1-controlled-inputs.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | // JS
 3 | // const input = document.getElementById('myText');
 4 | // const inputValue = input.value
 5 | // React
 6 | // value, onChange
 7 | 
 8 | const ControlledInputs = () => {
 9 |   const [firstName, setFirstName] = useState('');
10 |   const [email, setEmail] = useState('');
11 |   const [people, setPeople] = useState([]);
12 | 
13 |   const handleSubmit = (e) => {
14 |     e.preventDefault();
15 |     if (firstName && email) {
16 |       const person = { id: new Date().getTime().toString(), firstName, email };
17 |       console.log(person);
18 |       setPeople((people) => {
19 |         return [...people, person];
20 |       });
21 |       setFirstName('');
22 |       setEmail('');
23 |     } else {
24 |       console.log('empty values');
25 |     }
26 |   };
27 |   return (
28 |     <>
29 |       <article>
30 |         <form className='form' onSubmit={handleSubmit}>
31 |           <div className='form-control'>
32 |             <label htmlFor='firstName'>Name : </label>
33 |             <input
34 |               type='text'
35 |               id='firstName'
36 |               name='firstName'
37 |               value={firstName}
38 |               onChange={(e) => setFirstName(e.target.value)}
39 |             />
40 |           </div>
41 |           <div className='form-control'>
42 |             <label htmlFor='email'>Email : </label>
43 |             <input
44 |               type='email'
45 |               id='email'
46 |               name='email'
47 |               value={email}
48 |               onChange={(e) => setEmail(e.target.value)}
49 |             />
50 |           </div>
51 |           <button type='submit'>add person</button>
52 |         </form>
53 |         {people.map((person, index) => {
54 |           const { id, firstName, email } = person;
55 |           return (
56 |             <div className='item' key={id}>
57 |               <h4>{firstName}</h4>
58 |               <p>{email}</p>
59 |             </div>
60 |           );
61 |         })}
62 |       </article>
63 |     </>
64 |   );
65 | };
66 | 
67 | export default ControlledInputs;
68 | 


--------------------------------------------------------------------------------
/src/tutorial/4-forms/final/2-multiple-inputs.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | // JS
 3 | // const input = document.getElementById('myText');
 4 | // const inputValue = input.value
 5 | // React
 6 | // value, onChange
 7 | 
 8 | const ControlledInputs = () => {
 9 |   const [person, setPerson] = useState({ firstName: '', email: '', age: '' });
10 |   const [people, setPeople] = useState([]);
11 |   const handleChange = (e) => {
12 |     const name = e.target.name;
13 |     const value = e.target.value;
14 |     setPerson({ ...person, [name]: value });
15 |   };
16 |   const handleSubmit = (e) => {
17 |     e.preventDefault();
18 |     if (person.firstName && person.email && person.age) {
19 |       const newPerson = { ...person, id: new Date().getTime().toString() };
20 |       setPeople([...people, newPerson]);
21 |       setPerson({ firstName: '', email: '', age: '' });
22 |     }
23 |   };
24 |   return (
25 |     <>
26 |       <article className='form'>
27 |         <form>
28 |           <div className='form-control'>
29 |             <label htmlFor='firstName'>Name : </label>
30 |             <input
31 |               type='text'
32 |               id='firstName'
33 |               name='firstName'
34 |               value={person.firstName}
35 |               onChange={handleChange}
36 |             />
37 |           </div>
38 |           <div className='form-control'>
39 |             <label htmlFor='email'>Email : </label>
40 |             <input
41 |               type='email'
42 |               id='email'
43 |               name='email'
44 |               value={person.email}
45 |               onChange={handleChange}
46 |             />
47 |           </div>
48 |           <div className='form-control'>
49 |             <label htmlFor='age'>Age : </label>
50 |             <input
51 |               type='number'
52 |               id='age'
53 |               name='age'
54 |               value={person.age}
55 |               onChange={handleChange}
56 |             />
57 |           </div>
58 |           <button type='submit' className='btn' onClick={handleSubmit}>
59 |             add person
60 |           </button>
61 |         </form>
62 |       </article>
63 |       <article>
64 |         {people.map((person) => {
65 |           const { id, firstName, email, age } = person;
66 |           return (
67 |             <div key={id} className='item'>
68 |               <h4>{firstName}</h4>
69 |               <p>{email}</p>
70 |               <p>{age}</p>
71 |             </div>
72 |           );
73 |         })}
74 |       </article>
75 |     </>
76 |   );
77 | };
78 | 
79 | export default ControlledInputs;
80 | 


--------------------------------------------------------------------------------
/src/tutorial/4-forms/setup/1-controlled-inputs.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | // JS
 3 | // const input = document.getElementById('myText');
 4 | // const inputValue = input.value
 5 | // React
 6 | // value, onChange
 7 | 
 8 | const ControlledInputs = () => {
 9 |   return <h1>controlled inputs</h1>;
10 | };
11 | 
12 | export default ControlledInputs;
13 | 


--------------------------------------------------------------------------------
/src/tutorial/4-forms/setup/2-multiple-inputs.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | // JS
 3 | // const input = document.getElementById('myText');
 4 | // const inputValue = input.value
 5 | // React
 6 | // value, onChange
 7 | // dynamic object keys
 8 | 
 9 | const ControlledInputs = () => {
10 |   const [firstName, setFirstName] = useState('');
11 |   const [email, setEmail] = useState('');
12 |   const [people, setPeople] = useState([]);
13 | 
14 |   const handleSubmit = (e) => {
15 |     e.preventDefault();
16 |     if (firstName && email) {
17 |       const person = { id: new Date().getTime().toString(), firstName, email };
18 |       console.log(person);
19 |       setPeople((people) => {
20 |         return [...people, person];
21 |       });
22 |       setFirstName('');
23 |       setEmail('');
24 |     } else {
25 |       console.log('empty values');
26 |     }
27 |   };
28 |   return (
29 |     <>
30 |       <article>
31 |         <form className='form' onSubmit={handleSubmit}>
32 |           <div className='form-control'>
33 |             <label htmlFor='firstName'>Name : </label>
34 |             <input
35 |               type='text'
36 |               id='firstName'
37 |               name='firstName'
38 |               value={firstName}
39 |               onChange={(e) => setFirstName(e.target.value)}
40 |             />
41 |           </div>
42 |           <div className='form-control'>
43 |             <label htmlFor='email'>Email : </label>
44 |             <input
45 |               type='email'
46 |               id='email'
47 |               name='email'
48 |               value={email}
49 |               onChange={(e) => setEmail(e.target.value)}
50 |             />
51 |           </div>
52 |           <button type='submit'>add person</button>
53 |         </form>
54 |         {people.map((person, index) => {
55 |           const { id, firstName, email } = person;
56 |           return (
57 |             <div className='item' key={id}>
58 |               <h4>{firstName}</h4>
59 |               <p>{email}</p>
60 |             </div>
61 |           );
62 |         })}
63 |       </article>
64 |     </>
65 |   );
66 | };
67 | 
68 | export default ControlledInputs;
69 | 


--------------------------------------------------------------------------------
/src/tutorial/5-useRef/final/1-useRef-basics.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef } from 'react';
 2 | 
 3 | // preserves value
 4 | // DOES NOT trigger re-render
 5 | // target DOM nodes/elements
 6 | 
 7 | const UseRefBasics = () => {
 8 |   const refContainer = useRef(null);
 9 | 
10 |   const handleSubmit = (e) => {
11 |     e.preventDefault();
12 |     console.log(refContainer.current.value);
13 |   };
14 |   useEffect(() => {
15 |     console.log(refContainer.current);
16 |     refContainer.current.focus();
17 |   });
18 | 
19 |   return (
20 |     <>
21 |       <form className='form' onSubmit={handleSubmit}>
22 |         <div>
23 |           <input type='text' ref={refContainer} />
24 |         </div>
25 |         <button type='submit'>submit</button>
26 |       </form>
27 |     </>
28 |   );
29 | };
30 | 
31 | export default UseRefBasics;
32 | 


--------------------------------------------------------------------------------
/src/tutorial/5-useRef/setup/1-useRef-basics.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef } from 'react';
 2 | 
 3 | // preserves value
 4 | // DOES NOT trigger re-render
 5 | // target DOM nodes/elements
 6 | 
 7 | const UseRefBasics = () => {
 8 |   return <h2>useRef</h2>;
 9 | };
10 | 
11 | export default UseRefBasics;
12 | 


--------------------------------------------------------------------------------
/src/tutorial/6-useReducer/final/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | 
 3 | const Modal = ({ modalContent, closeModal }) => {
 4 |   useEffect(() => {
 5 |     setTimeout(() => {
 6 |       closeModal();
 7 |     }, 3000);
 8 |   });
 9 |   return (
10 |     <div className='modal'>
11 |       <p>{modalContent}</p>
12 |     </div>
13 |   );
14 | };
15 | 
16 | export default Modal;
17 | 


--------------------------------------------------------------------------------
/src/tutorial/6-useReducer/final/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useReducer } from 'react';
 2 | import Modal from './Modal';
 3 | import { data } from '../../../data';
 4 | // reducer function
 5 | import { reducer } from './reducer';
 6 | const defaultState = {
 7 |   people: [],
 8 |   isModalOpen: false,
 9 |   modalContent: '',
10 | };
11 | const Index = () => {
12 |   const [name, setName] = useState('');
13 |   const [state, dispatch] = useReducer(reducer, defaultState);
14 |   const handleSubmit = (e) => {
15 |     e.preventDefault();
16 |     if (name) {
17 |       const newItem = { id: new Date().getTime().toString(), name };
18 |       dispatch({ type: 'ADD_ITEM', payload: newItem });
19 |       setName('');
20 |     } else {
21 |       dispatch({ type: 'NO_VALUE' });
22 |     }
23 |   };
24 |   const closeModal = () => {
25 |     dispatch({ type: 'CLOSE_MODAL' });
26 |   };
27 |   return (
28 |     <>
29 |       {state.isModalOpen && (
30 |         <Modal closeModal={closeModal} modalContent={state.modalContent} />
31 |       )}
32 |       <form onSubmit={handleSubmit} className='form'>
33 |         <div>
34 |           <input
35 |             type='text'
36 |             value={name}
37 |             onChange={(e) => setName(e.target.value)}
38 |           />
39 |         </div>
40 |         <button type='submit'>add </button>
41 |       </form>
42 |       {state.people.map((person) => {
43 |         return (
44 |           <div key={person.id} className='item'>
45 |             <h4>{person.name}</h4>
46 |             <button
47 |               onClick={() =>
48 |                 dispatch({ type: 'REMOVE_ITEM', payload: person.id })
49 |               }
50 |             >
51 |               remove
52 |             </button>
53 |           </div>
54 |         );
55 |       })}
56 |     </>
57 |   );
58 | };
59 | 
60 | export default Index;
61 | 


--------------------------------------------------------------------------------
/src/tutorial/6-useReducer/final/reducer.js:
--------------------------------------------------------------------------------
 1 | export const reducer = (state, action) => {
 2 |   if (action.type === 'ADD_ITEM') {
 3 |     const newPeople = [...state.people, action.payload];
 4 |     return {
 5 |       ...state,
 6 |       people: newPeople,
 7 |       isModalOpen: true,
 8 |       modalContent: 'item added',
 9 |     };
10 |   }
11 |   if (action.type === 'NO_VALUE') {
12 |     return { ...state, isModalOpen: true, modalContent: 'please enter value' };
13 |   }
14 |   if (action.type === 'CLOSE_MODAL') {
15 |     return { ...state, isModalOpen: false };
16 |   }
17 |   if (action.type === 'REMOVE_ITEM') {
18 |     const newPeople = state.people.filter(
19 |       (person) => person.id !== action.payload
20 |     );
21 |     return { ...state, people: newPeople };
22 |   }
23 |   throw new Error('no matching action type');
24 | };
25 | 


--------------------------------------------------------------------------------
/src/tutorial/6-useReducer/setup/Modal.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | 
3 | const Modal = () => {
4 |   return <div>i'm modal</div>;
5 | };
6 | 
7 | export default Modal;
8 | 


--------------------------------------------------------------------------------
/src/tutorial/6-useReducer/setup/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useReducer } from 'react';
 2 | import Modal from './Modal';
 3 | import { data } from '../../../data';
 4 | // reducer function
 5 | 
 6 | const Index = () => {
 7 |   return <h2>useReducer</h2>;
 8 | };
 9 | 
10 | export default Index;
11 | 


--------------------------------------------------------------------------------
/src/tutorial/7-prop-drilling/final/1-prop-drilling.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { data } from '../../../data';
 3 | // more components
 4 | // fix - context api, redux (for more complex cases)
 5 | 
 6 | const PropDrilling = () => {
 7 |   const [people, setPeople] = useState(data);
 8 |   const removePerson = (id) => {
 9 |     setPeople((people) => {
10 |       return people.filter((person) => person.id !== id);
11 |     });
12 |   };
13 |   return (
14 |     <section>
15 |       <h3>prop drilling</h3>
16 |       <List people={people} removePerson={removePerson} />
17 |     </section>
18 |   );
19 | };
20 | 
21 | const List = ({ people, removePerson }) => {
22 |   return (
23 |     <>
24 |       {people.map((person) => {
25 |         return (
26 |           <SinglePerson
27 |             key={person.id}
28 |             {...person}
29 |             removePerson={removePerson}
30 |           />
31 |         );
32 |       })}
33 |     </>
34 |   );
35 | };
36 | 
37 | const SinglePerson = ({ id, name, removePerson }) => {
38 |   return (
39 |     <div className='item'>
40 |       <h4>{name}</h4>
41 |       <button onClick={() => removePerson(id)}>remove</button>
42 |     </div>
43 |   );
44 | };
45 | 
46 | export default PropDrilling;
47 | 


--------------------------------------------------------------------------------
/src/tutorial/7-prop-drilling/setup/1-prop-drilling.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | // more components
 4 | // fix - context api, redux (for more complex cases)
 5 | 
 6 | const PropDrilling = () => {
 7 |   return <h2>prop drilling</h2>;
 8 | };
 9 | 
10 | export default PropDrilling;
11 | 


--------------------------------------------------------------------------------
/src/tutorial/8-useContext/final/1-context-api.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useContext } from 'react';
 2 | import { data } from '../../../data';
 3 | // more components
 4 | // fix - context api, redux (for more complex cases)
 5 | 
 6 | const PersonContext = React.createContext();
 7 | // two components - Provider, Consumer
 8 | 
 9 | const ContextAPI = () => {
10 |   const [people, setPeople] = useState(data);
11 |   const removePerson = (id) => {
12 |     setPeople((people) => {
13 |       return people.filter((person) => person.id !== id);
14 |     });
15 |   };
16 |   return (
17 |     <PersonContext.Provider value={{ removePerson, people }}>
18 |       <h3>Context API / useContext</h3>
19 |       <List />
20 |     </PersonContext.Provider>
21 |   );
22 | };
23 | 
24 | const List = () => {
25 |   const mainData = useContext(PersonContext);
26 |   console.log(mainData);
27 |   return (
28 |     <>
29 |       {mainData.people.map((person) => {
30 |         return <SinglePerson key={person.id} {...person} />;
31 |       })}
32 |     </>
33 |   );
34 | };
35 | 
36 | const SinglePerson = ({ id, name }) => {
37 |   const { removePerson } = useContext(PersonContext);
38 | 
39 |   return (
40 |     <div className='item'>
41 |       <h4>{name}</h4>
42 |       <button onClick={() => removePerson(id)}>remove</button>
43 |     </div>
44 |   );
45 | };
46 | 
47 | export default ContextAPI;
48 | 


--------------------------------------------------------------------------------
/src/tutorial/8-useContext/setup/1-context-api.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useContext } from 'react';
 2 | import { data } from '../../../data';
 3 | // more components
 4 | // fix - context api, redux (for more complex cases)
 5 | 
 6 | const ContextAPI = () => {
 7 |   const [people, setPeople] = useState(data);
 8 |   const removePerson = (id) => {
 9 |     setPeople((people) => {
10 |       return people.filter((person) => person.id !== id);
11 |     });
12 |   };
13 |   return (
14 |     <>
15 |       <h3>prop drilling</h3>
16 |       <List people={people} removePerson={removePerson} />
17 |     </>
18 |   );
19 | };
20 | 
21 | const List = ({ people, removePerson }) => {
22 |   return (
23 |     <>
24 |       {people.map((person) => {
25 |         return (
26 |           <SinglePerson
27 |             key={person.id}
28 |             {...person}
29 |             removePerson={removePerson}
30 |           />
31 |         );
32 |       })}
33 |     </>
34 |   );
35 | };
36 | 
37 | const SinglePerson = ({ id, name, removePerson }) => {
38 |   return (
39 |     <div className='item'>
40 |       <h4>{name}</h4>
41 |       <button onClick={() => removePerson(id)}>remove</button>
42 |     </div>
43 |   );
44 | };
45 | 
46 | export default ContextAPI;
47 | 


--------------------------------------------------------------------------------
/src/tutorial/9-custom-hooks/final/1-fetch-example.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | import { useFetch } from './2-useFetch'
 3 | 
 4 | // ATTENTION!!!!!!!!!!
 5 | // I SWITCHED TO PERMANENT DOMAIN
 6 | const url = 'https://course-api.com/javascript-store-products'
 7 | 
 8 | const Example = () => {
 9 |   const { loading, products } = useFetch(url)
10 |   console.log(products)
11 |   return (
12 |     <div>
13 |       <h2>{loading ? 'loading...' : 'data'}</h2>
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default Example
19 | 


--------------------------------------------------------------------------------
/src/tutorial/9-custom-hooks/final/2-useFetch.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useCallback } from 'react';
 2 | 
 3 | export const useFetch = (url) => {
 4 |   const [loading, setLoading] = useState(true);
 5 |   const [products, setProducts] = useState([]);
 6 | 
 7 |   const getProducts = useCallback(async () => {
 8 |     const response = await fetch(url);
 9 |     const products = await response.json();
10 |     setProducts(products);
11 |     setLoading(false);
12 |   }, [url]);
13 | 
14 |   useEffect(() => {
15 |     getProducts();
16 |   }, [url, getProducts]);
17 |   return { loading, products };
18 | };
19 | 


--------------------------------------------------------------------------------
/src/tutorial/9-custom-hooks/setup/1-fetch-example.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | import { useFetch } from './2-useFetch'
 3 | 
 4 | // ATTENTION!!!!!!!!!!
 5 | // I SWITCHED TO PERMANENT DOMAIN
 6 | const url = 'https://course-api.com/javascript-store-products'
 7 | 
 8 | const Example = () => {
 9 |   const [loading, setLoading] = useState(true)
10 |   const [products, setProducts] = useState([])
11 | 
12 |   const getProducts = async () => {
13 |     const response = await fetch(url)
14 |     const products = await response.json()
15 |     setProducts(products)
16 |     setLoading(false)
17 |   }
18 | 
19 |   useEffect(() => {
20 |     getProducts()
21 |   }, [url])
22 |   console.log(products)
23 |   return (
24 |     <div>
25 |       <h2>{loading ? 'loading...' : 'data'}</h2>
26 |     </div>
27 |   )
28 | }
29 | 
30 | export default Example
31 | 


--------------------------------------------------------------------------------
/src/tutorial/9-custom-hooks/setup/2-useFetch.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | 
3 | export const useFetch = () => {};
4 | 


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