Summary
Full Transcript
Most of the tutorial videos on YouTube for creating TODO app or Shopping list App are using the incorrect way, by using 2 state variables. For a small application, you can use that approach, but it's better to use a FORM. GOOF UP: At 25:31 I had used the key 'purchased' incorrectly, but for some reason my video shooting paused, and I fixed the issue, Then I again changed the code and fixed it again, but my video editing Intern missed that, so ignore that 🥲 In this video, I have covered the best way to create a Shopping list App or Todo app Key Moments: 0:00-1:58 - Introduction to the Project 1:59-3:18 - Creating the UI for Shopping List App 3:19-6:46 Don't do this 6:47-12:12 - The right way - Add Item to List 12:13-16:52 - Display List items in UI & fix addItem function 16:53-20:38 - Remove item from Shopping list Function 20:39-24:07 - Mark Done/Purchased Function 24:08-25:51 - Improving the UI on marking Done 25:52 - Quick Revision, adding more features & End note Complete Playlist: https://www.youtube.com/playlist?list=PLLGlmW7jT-nROpfmMFDj7ccjCujXOLIey Github Repo with code: https://github.com/thisisabhishek/hello-reactjs I hope you enjoy this video and learn something new. If you do not know JavaScript, then you must learn JavaScript before starting ReactJS, and I have an amazing FREE course for JavaScript to help you learn JS - https://www.studytonight.com/code/js-course/ Follow me on Instagram: Studytonight with Abhishek - https://instagram.com/study.tonight/ Abhitonight (Hindi Reels) - https://www.instagram.com/abhitonight/ LinkedIn: https://www.linkedin.com/in/ahlawatabhishek/ Keywords: learn reactjs reactjs tutorial reactjs complete tutorial reactjs tutorial 2023 reactjs complete tutorial 2023 reactjs beginner tutorial react tutorial beginner react tutorial 2023 learn react 2023 reactjs for web development reactjs jobs reactjs career react JSX reactsjs jsx tutorial add style to jsx style attribute with jsx how to use style in jsx element CSS as module in reactjs forms in reactjs form handling in react get form data in reactjs reactjs todo app
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
