Learn React.js with Full Project (React Hooks & React Router) | React Crash Course
In this video, we will make a full Exercise Tracker Application using React.js and React Router. The features of the application that we will be building in this course are:
1. Fetching the list of exercises from a local JSON Server
2. Create a New Exercise
3. Update an already existing exercise
4. Delete an existing exercise
5. Toggling the completion status of an exercise and showing it in visually.
6. Creating a filter component to filter the exercises based on the completion status - pending, all, completed.
and more.
#javascript #reactjs
----------------------------------------
⏱ Timestamps ⏱
📌 let's start (0:00)
📌 demo of our exercise tracker project (0:20)
📌 a quick glance over the starter files (1:37)
📌 setting up our starter project and installation (2:00)
📌 whiteboard : deciding about the components for our project (2:15)
📌 starting the project (7:20)
📌 installation of json-server package & running it (7:36)
📌 creating our first page component - homepage (9:05)
📌 bringing our first hook into action - useState (9:23)
📌 fetching data from our data source using another hook - useEffect (10:25)
📌 installation and setting up react-router (13:50)
📌 defining our first route : home page route(14:57)
📌 seeing our fetched exercises in react-dev-tools extension (17:16)
📌 starting with exercise list component (18:00)
📌 passing our fetched exercises to the exercises list component as a prop (21:10)
📌 creating an exercise item component (22:16)
📌 using the exercise item in exercises list and passing exercise as a prop (25:15)
📌 starting with delete exercise functionality (28:28)
📌 whiteboard: understanding the process for deletion of item (29:35)
📌 defining our delete exercise handler in home page component (32:16)
📌 passing a pointer to our delete exercise handler as a prop to exercises list component (33:29)
📌 forwarding the pointer to delete exercise handler as a prop further down to exercise item component (33:29)
📌 ensuring the deletion of item gets reflected in our local JSON store (35:20)
📌 starting with toggling the exercise completion status functionality (37:10)
📌 defining our toggle exercise completion handler in home page component (38:29)
📌 forwarding a pointer to our toggle exercise handler as a prop to exercises list component (41:45)
📌 forwarding the pointer to our toggle exercise handler further down to our exercise item component (42:57)
📌 invoking our toggle exercise completion handler via the on toggle exercise prop (43:08)
📌 ensuring the toggling of the completion status gets reflected in our local JSON store (45:34)
📌 laying out our create exercise form (49:44)
📌 handling form submission for creating a new exercise (58:07)
📌 using the useHistory hook to push the user back to home page on exercise creation (1:02:50)
📌 creating the navbar component (1:04:37)
📌 starting with edit exercise component (1:07:50)
📌 creating a route for the edit exercise component using dynamic segment (1:09:20)
📌 adding a router link for editing an exercise for an exercise item (1:09:53)
📌 extracting the id of an exercise from the router params using the useParams hook (1:11:30)
📌 using the id that we get from router params to load the exercise in our edit exercise component (1:13:19)
📌 handling form submission for updating the populated exercise (1:16:41)
📌 filtering the exercises based on their completion status (1:20:57)
📌 creating our base filter component (1:21:40)
📌 setting up a current filter state in our home page component (1:25:20)
📌 creating an update exercise handler in our home page component (1:25:55)
📌 passing a pointer to our update exercise handler down to base filter (1:26:56)
📌 passing the current filter down to base filter (1:27:42)
📌 using the current filter prop in base filter component to give extra styles to our navlinks (1:28:26)
📌 using the filter to show exercises based on their completion status on home page (1:29:32)
📌 end of the project (1:31:20)
📂📂 Starter Files:
https://github.com/The-Nerdy-Dev/Star...
📂📂 Component Styles:
https://github.com/The-Nerdy-Dev/CSS-...
📂📂 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads
---
Support my channel:
💜 Join the Discord community 👨👩👧👦: / discord
💜 One time donations via PayPal
Thank you! 🙏
---
Follow me on:
👉 Twitter: / the_nerdy_dev
👉 Instagram: / thenerdydev
Auf dieser Seite können Sie das Online-Video Learn React.js with Full Project (React Hooks & React Router) | React Crash Course mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer The Nerdy Dev 08 Juni 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 27,623 Mal angesehen und es wurde von 289 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
