ex01 understand why we need context - https://codesandbox.io/s/propdrilling-nlzhm?file=/src/App.js
ex02 setup - https://codesandbox.io/s/setting-up-o0548?file=/src/App.jsx
ex03 create and provide context - https://codesandbox.io/s/consume-context-o0548?file=/src/App.jsx
ex04 consume context - https://codesandbox.io/s/consume-context-o0548?file=/src/App.jsx
ex05 let's now pass a function - https://codesandbox.io/s/consume-context-logger-tly4q?file=/src/App.jsx
ex06 extract CartProvider - https://stackblitz.com/edit/react-74uger?file=src%2Findex.js
| ex01 reduce() - | |
| https://codesandbox.io/s/reduce-exercise-cemnj?file=/src/index.js, | |
| https://codesandbox.io/s/use-reducer-type-owwc7?file=/src/App.js | |
| ex02 the most basic reducer - https://codesandbox.io/s/interesting-booth-zplqw?file=/src/App.jsx | |
| ex03 counter with reducer - https://codesandbox.io/s/wonderful-breeze-svpqc?file=/src/App.jsx | |
| ex04 cart management with useReducer - https://codesandbox.io/s/use-reducer-cart-2rlfx?file=/src/App.js | |
| ex06 the endgame - https://codesandbox.io/s/usereducer-eg-mqmi3 | |
ex01: practice useEffect - https://codesandbox.io/s/counter-qc1vp?file=/src/App.js
ex02: predict the output and order - https://codesandbox.io/s/predict-output-9k04o?file=/src/App.
ex03: save items to localStorage - https://codesandbox.io/s/wishlist-exercise-forked-lnijg?file=/src/App.jsx
ex04: save wishlist to server - https://codesandbox.io/s/wishlist-server-exercise-d5s17
ex05: make your counter print console only once - https://codesandbox.io/s/counter-log-once-bi31k?file=/src/App.js
ex06: fix saving to wishlist - https://codesandbox.io/s/wishlist-exercise-forked-lnijg?file=/src/App.jsx
ex07: GET data - https://codesandbox.io/s/load-data-exercise-forked-35rxy?file=/src/App.js
ex08: Load Data on page render - https://codesandbox.io/s/load-data-exercise-forked-35rxy?file=/src/App.js
ex09: POST data - https://codesandbox.io/s/post-request-exercise-forked-elstw?file=/src/App.js
ex10: useLocalStorage - https://codesandbox.io/s/uselocalstorage-exercise-forked-k0qnv?f
| let quote = "It's not whether you get knocked down, it's whether you get up."; | |
| console.log('Resource link!'); | |
| console.log('https://medium.com/dailyjs/4-ways-to-convert-string-to-character-array-in-javascript-994c7f73c89a'); | |
| console.log(Array.prototype.map.call('animal', (letter) => letter)); | |
| console.log(quote.split('')); | |
| console.log([...quote]); | |
| console.log(Array.from(quote)); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Loading animation</title> | |
| <style> | |
| .loading { | |
| background: linear-gradient( | |
| 100deg, |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>CSS Before and after pseudo elements</title> | |
| <style> | |
| p:before { | |
| content: '* '; | |
| } |