This content originally appeared on DEV Community and was authored by The Nerdy Dev
Recently, I released a video on making an Exercise Tracker Application using React.js. Today at the time of writing this article, it has crossed 10k+ views on YouTube.
Here is the link for the same if you want to get started with React but you are confused as to where to start from.
So check this out :
The features that we build 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.
⏱ 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)
So this is it for this article. Thanks for reading.
Don't forget to leave a like if you loved the article. Also share it with your friends and colleagues.
PS - If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :
Looking to learn React.js with one Full Project, check this out :
Support my channel:
? Join the Discord community ????: https://discord.gg/fgbtN2a
Thank you! ?
Follow me on:
? Twitter: https://twitter.com/The_Nerdy_Dev
? Instagram: https://instagram.com/thenerdydev
This content originally appeared on DEV Community and was authored by The Nerdy Dev
The Nerdy Dev | Sciencx (2021-09-26T10:29:31+00:00) 10k+ views on my Full React Project Video. Retrieved from https://www.scien.cx/2021/09/26/10k-views-on-my-full-react-project-video/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.