React Todo List App Tutorial - Reducer, Context, useMemo

1 year ago
14

Welcome to our comprehensive tutorial on creating a Todo App using the power of React! In this video, we'll guide you through the process of building a fully-featured Todo application that leverages advanced techniques like React Context, useReducer, LocalStorage, Dark Theme implementation, and the optimization magic of useMemo.

What you'll learn in this tutorial:
✅ Set up a React project with the necessary dependencies to get started.
✅ Dive deep into the React Context API to manage state across components seamlessly.
✅ Harness the useReducer hook to efficiently manage complex state changes in your Todo App.
✅ Implement LocalStorage integration to persist your Todo list even after page refreshes.
✅ Enhance user experience with a stylish Dark Theme using CSS and React Context.
✅ Optimize performance using the useMemo hook to prevent unnecessary re-renders.
✅ Gain a strong grasp of these advanced React concepts while building a practical application.

Throughout the video, we'll break down complex concepts into easy-to-follow steps, making this tutorial suitable for both intermediate and experienced developers. By the end, you'll have not only built a functional Todo App but also gained valuable insights into powerful tools that can be applied in various React projects.

Whether you're aiming to bolster your React skills, explore modern state management techniques, or develop an eye-catching application, this tutorial is the perfect fit for you. Join us on this coding adventure and craft a dynamic Todo App that showcases your newfound expertise!

🕛 TimeStamps 🕛
02:50 Initial base components
05:00 ThemeContext
11:44 TodoContext
13:15 Todos - AlertMsg - TodoList
15:28 form - Add Todo
18:00 check todo
19:34 delete todo - delete All
21:23 Editing Actions
26:18 Edit Todo
28:00 LocalStorage with useReducer - TodoProvider
30:00 MemoProvider

Code Source 💻:
😸GitHub🔗 https://github.com/AlephOlortegui/react-todo
Watch 👀 the most recent videos
🔗 https://www.youtube.com/@AlephNeoDev/videos

Who am I? 🔍
I am just a new developer trying to learn and grow and I would like you to join me in this journey
😸GitHub 🔗 https://github.com/AlephOlortegui?tab=repositories
💻Codepen 🔗 https://codepen.io/Oskar_Olortegui

Loading comments...