Loading...

Mastering React Context for State Management in React Native | DEVember Day 16

3389 101________

Welcome to Day 16 of #DEVember and today we'll dive deep into the world of global state management using React Context in React Native. In today’s tutorial, we will master React Context by building the logic of a To-Do app. You'll learn how to use Context for managing global state, effectively build and manage your app's logic using React Context, and persist your app's state on device storage. You'll discover how to effectively handle global state in your app, efficiently manage your app's logic using React Context, and store your app's state on device storage.

🌟DEVember Day 16: www.notjust.dev/projects/devember/day16

If you have ideas of features, topics or apps you would like me to cover during #DEVember, you can submit them on our 💡Idea Board:
github.com/notJust-dev/DEVember/discussions/catego…

📚 Today's Agenda:
introduction to React Context and Global State Management
Setting Up React Context in a React Native Project
Building the To-Do App Logic with React Context
Implementing State Persistence on Device Storage
Managing Context in Functional Components
Best Practices for State Management with Context
Recap and Demo

❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclass/?utm_source=youtube…

📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?utm_source=youtube&utm_medium…

💬 Join the notJust Development gang and let's build together:
Twitter: twitter.com/VadimNotJustDev
Instagram: www.instagram.com/VadimNotJustDev
Facebook: www.facebook.com/notjustdev
LinkedIn: www.linkedin.com/in/vadimsavin
Discord: discord.gg/VpURUN2

Timecodes:
0:00 Introduction to DEVember, Day 16 Overview
2:11 Setting Up Day 16 Project and Analyzing To-Do Application State Management
3:52 Introduction to React Context for Global State Management
6:38 Planning and Structuring React Context Implementation
8:06 Contextualizing Data Management in To-Do App
10:03 Implementing Context Provider for our App
37:02 Testing and Verifying Context-Based Task Management
39:26 Transitioning from Index-Based to ID-Based Task Management
43:10 Implementing Context-Based Task Addition and Deletion
45:25 Transitioning Task Filtering to Context Provider
47:17 Implementing Context-Based Task Filtering in To-Do Screen
51:44 Transitioning Task List Item to Context-Based Management
53:13 Implementing Context-Based Task Deletion in Right Actions Component
55:41 Transitioning to ID-Based Task Management for Reliability
58:07 Implementing Unique Task IDs with UUID Library
1:05:24 Transitioning FlatList Key to Unique Task IDs
1:07:41 Implementing Data Persistence with AsyncStorage
1:09:25 Refining Data Deletion Logic with Unique IDs
1:11:13 Implementing ID-Based Task Deletion in Right Actions Component
1:13:01 Transitioning to ID-Based Task Completion Management
1:17:01 Transitioning from Title to ID Rendering for Task List Items
1:18:51 Implementing Data Persistence with AsyncStorage
1:21:21 Structuring Data Loading and Saving Functions in Context Provider
1:30:39 Testing Data Persistence and Reloading App
1:31:32 Enhancing Context with Additional Task Data
1:32:24 Implementing Task Count Features in Context Provider
1:35:28 Wrapping Up Tutorial

Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #ReactNative

コメント