> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qodr.id/llms.txt
> Use this file to discover all available pages before exploring further.

# 24 pekan

> Penjabaran tentang jurusan dan alur belajar javascript path

### pekan 14

filter render

list :

* making filter component
* filter 1 type
* filter multiple type
* GET POST PUT DELETE
* nodejs, npm

link:

* [https://www.youtube.com/watch?v=4\_iT6EGkQfk\&pp=ygUUZmlsdGVyaW5nIGphdmFzY3JpcHQ%3D](https://www.youtube.com/watch?v=4_iT6EGkQfk\&pp=ygUUZmlsdGVyaW5nIGphdmFzY3JpcHQ%3D)
* [https://www.youtube.com/watch?v=mF\_uwbH0xtQ\&pp=ygUUZmlsdGVyaW5nIGphdmFzY3JpcHQ%3D](https://www.youtube.com/watch?v=mF_uwbH0xtQ\&pp=ygUUZmlsdGVyaW5nIGphdmFzY3JpcHQ%3D)
* [https://www.youtube.com/watch?v=tkfVQK6UxDI\&pp=ygUWZ2V0IHBvc3QgcHV0IGRlbGV0ZSBqcw%3D%3D](https://www.youtube.com/watch?v=tkfVQK6UxDI\&pp=ygUWZ2V0IHBvc3QgcHV0IGRlbGV0ZSBqcw%3D%3D)
* [https://www.youtube.com/watch?v=XHokFQeQ6Lk\&pp=ygUWZ2V0IHBvc3QgcHV0IGRlbGV0ZSBqcw%3D%3D](https://www.youtube.com/watch?v=XHokFQeQ6Lk\&pp=ygUWZ2V0IHBvc3QgcHV0IGRlbGV0ZSBqcw%3D%3D)
* [https://www.youtube.com/watch?v=q-xS25lsN3I\&pp=ygUMYmFzaWMgbm9kZWpz](https://www.youtube.com/watch?v=q-xS25lsN3I\&pp=ygUMYmFzaWMgbm9kZWpz)
* [https://www.youtube.com/watch?v=TlB\_eWDSMt4\&pp=ygUMYmFzaWMgbm9kZWpz](https://www.youtube.com/watch?v=TlB_eWDSMt4\&pp=ygUMYmFzaWMgbm9kZWpz)

### pekan 16

* full website html css js

list :

* demo full website
* testimonial
* toggle card
* full website functionality with git
* upload to netlify

link :

* [https://www.youtube.com/watch?v=3-2Pj5hxwrw](https://www.youtube.com/watch?v=3-2Pj5hxwrw)
* [https://www.youtube.com/watch?v=\_JfuNMsxc0A](https://www.youtube.com/watch?v=_JfuNMsxc0A)
* [https://www.youtube.com/watch?v=0YFrGy\_mzjY](https://www.youtube.com/watch?v=0YFrGy_mzjY)
* [https://www.w3schools.com/howto/howto\_website.asp](https://www.w3schools.com/howto/howto_website.asp)
* [https://www.idn.id/memadukan-htmlcss-dan-javascript-untuk-membuat-website/](https://www.idn.id/memadukan-htmlcss-dan-javascript-untuk-membuat-website/)
* [https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/)
* [https://www.youtube.com/watch?v=3OSLxZ-VV-8](https://www.youtube.com/watch?v=3OSLxZ-VV-8)

### pekan 18

* react component making

list :

* intro to react
* vite
* npm
* installation
* jsx
* styling

link:

* [https://react.dev/](https://react.dev/)
* [https://vite.dev/](https://vite.dev/)
* [https://vite.dev/guide/](https://vite.dev/guide/)
* [https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite](https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite)
* [http://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/](http://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)
* [https://www.w3schools.com/nodejs/nodejs\_npm.asp](https://www.w3schools.com/nodejs/nodejs_npm.asp)
* [https://www.w3schools.com/react/react\_jsx.asp#:\~:text=What%20is%20JSX%3F,and%20add%20HTML%20in%20React](https://www.w3schools.com/react/react_jsx.asp#:~:text=What%20is%20JSX%3F,and%20add%20HTML%20in%20React).
* [https://www.w3schools.com/react/react\_css.asp](https://www.w3schools.com/react/react_css.asp)
* [https://tailwindcss.com/docs/guides/create-react-app](https://tailwindcss.com/docs/guides/create-react-app)

### pekan 20

* full static website react with reusable component

list :

* react router
* outlet
* hooks
* getting data and error handling
* suspense

link:

* [https://reactrouter.com/](https://reactrouter.com/)
* [https://reactrouter.com/en/main/start/tutorial](https://reactrouter.com/en/main/start/tutorial)
* [https://www.w3schools.com/react/react\_router.asp](https://www.w3schools.com/react/react_router.asp)
* [https://www.npmjs.com/package/react-router-dom](https://www.npmjs.com/package/react-router-dom)
* [https://www.youtube.com/watch?v=oTIJunBa6MA](https://www.youtube.com/watch?v=oTIJunBa6MA)
* [https://reactrouter.com/en/main/components/outlet](https://reactrouter.com/en/main/components/outlet)
* [https://react.dev/reference/react/Suspense](https://react.dev/reference/react/Suspense)
* [https://www.freecodecamp.org/news/react-suspense/](https://www.freecodecamp.org/news/react-suspense/)

### pekan 22

* fetch and render

list :

* loading state
* getting data and rendring data
* filterting data
* useState
* conditional rendering
* search functionality
* debounce method

link :

* [https://rapidapi.com/guides/loading-state-react](https://rapidapi.com/guides/loading-state-react)
* [https://www.dhiwise.com/post/enhancing-user-experience-with-the-loading-component-in-react](https://www.dhiwise.com/post/enhancing-user-experience-with-the-loading-component-in-react)
* [https://www.freecodecamp.org/news/how-to-make-a-filter-component-in-react/](https://www.freecodecamp.org/news/how-to-make-a-filter-component-in-react/)
* [https://developer.mozilla.org/en-US/docs/Learn/Tools\_and\_testing/Client-side\_JavaScript\_frameworks/React\_interactivity\_filtering\_conditional\_rendering](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
* [https://react.dev/reference/react/useState](https://react.dev/reference/react/useState)
* [https://www.w3schools.com/react/react\_usestate.asp](https://www.w3schools.com/react/react_usestate.asp)
* [https://www.freecodecamp.org/news/debouncing-explained/](https://www.freecodecamp.org/news/debouncing-explained/)
* [https://www.npmjs.com/package/use-debounce](https://www.npmjs.com/package/use-debounce)

### pekan 24

* dark mode and carts with react context

list :

* context usages
* darkmode tutorial
* cart tutorial

link :

* [https://react.dev/reference/react/useContext](https://react.dev/reference/react/useContext)
* [https://www.w3schools.com/react/react\_usecontext.asp](https://www.w3schools.com/react/react_usecontext.asp)
* [https://medium.com/zestgeek/mastering-reacts-usecontext-hook-simplifying-state-management-65894e6dc431](https://medium.com/zestgeek/mastering-reacts-usecontext-hook-simplifying-state-management-65894e6dc431)
* [https://jaypeeter.hashnode.dev/implementing-dark-mode-in-react-using-usecontext-and-usereducer](https://jaypeeter.hashnode.dev/implementing-dark-mode-in-react-using-usecontext-and-usereducer)
* [https://medium.com/lets-make-something-up/creating-light-dark-mode-on-a-react-app-with-context-589a5465f639](https://medium.com/lets-make-something-up/creating-light-dark-mode-on-a-react-app-with-context-589a5465f639)
* [https://dev.to/anne46/cart-functionality-in-react-with-context-api-2k2f](https://dev.to/anne46/cart-functionality-in-react-with-context-api-2k2f)
* [https://www.youtube.com/watch?v=HptuMAUaNGk](https://www.youtube.com/watch?v=HptuMAUaNGk)
* [https://www.youtube.com/watch?v=l3m2Rnl6FPw](https://www.youtube.com/watch?v=l3m2Rnl6FPw)