К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
React State Management, Effects & Custom Hooks · LearnSpace
Назад в каталог
courseraПрограммирование

React State Management, Effects & Custom Hooks

Курс от Packt
Средний≈ 15.7 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. Learn to manage complex state with React Context and custom hooks while building real-world applications such as portfolio websites and interactive games. Dive into professional projects to practice dark/light mode, weather apps, and more, while understanding how to effectively use React's powerful state management features. With hands-on challenges, this course offers an engaging learning experience to ensure you build not just theoretical knowledge but also practical expertise. You will begin with understanding React Context, its common mistakes, and best practices. Then, you will learn how to incorporate React Context into a professional project—such as building a portfolio website with dark/light mode functionality. Through this, you will explore key concepts like component trees, managing state, and optimizing performance in React. Moving forward, you will develop key projects like the card flip game and weather app, using advanced hooks like useEffect and useRef. These projects will give you a clear understanding of handling side-effects and managing DOM elements efficiently. You will also dive into handling real-time data and dynamic content with React’s built-in hooks. This course is perfect for intermediate developers looking to solidify their React skills with projects that tackle real-world use cases. By the end of the course, you will be able to use React Context and hooks like useEffect and useRef to manage state, build interactive components, and persist dynamic content across different projects.

Навыки, которые вы освоите

React.jsContext ManagementFrontend PerformanceData PersistenceUser Interface (UI)Application Programming Interface (API)JavaScript FrameworksCode ReusabilityFront-End Web DevelopmentUI Components

Программа курса

10 модулей · 116 учебных материалов

01React Context Review - Common mistakes and best practices5 материалов

React Context Review - Common mistakes and best practices

Introduction to the course 'React State Management, Effects & Custom Hooks'ЧтениеFull Course ResourcesЧтениеReact Context Review - Common mistakes and best practicesВидеоUsing and Consuming React Context EffectivelyDIALOGUE

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

React State Management, Effects & Custom Hooks
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 15.7 ч

10 модулей

Язык: Английский

Часть программы вашего университета
React Context Review - Common mistakes and best practices - AssessmentЗадание
02Professional Project: Portfolio Website - Dark/Light Mode, React Context24 материалов

Professional Project: Portfolio Website - Dark/Light Mode, React Context

IntroductionВидеоComponent TreeВидеоBuilding the File StructureВидеоSetting Up the Navbar LayoutВидеоDesktop Navigation LinksВидеоAdding Light/Dark Mode ToggleВидеоMobile Menu with Hamburger IconВидеоBuilding ScrollDots for NavigationВидеоBuilding the Hero SectionВидеоProjects Section LayoutВидеоCreate the ProjectCard ComponentВидеоFiltering Projects by TypeВидеоBuilding the Skills & Experience Section LayoutВидеоSkills GridВидеоExperience TimelineВидеоBuilding the Layout of Recommendations SectionВидеоTestimonialCardВидеоArrowNavigationВидеоCompany Logos Row with CompanyLogo ComponentВидеоBuilding the Contact SectionВидеоBuilding the FooterВидеоDark/Light Mode PersistingВидеоBuilding and Structuring React Portfolio Website ComponentsDIALOGUEProfessional Project: Portfolio Website - Dark/Light Mode, React Context - AssessmentЗадание
03Reference values with Refs7 материалов

Reference values with Refs

IntroductionВидеоCreating a Timer Using RefВидеоAccessing a DOM Node with RefВидеоAccessing Another Component's DOM NodesВидеоBest Practices for DOM Manipulation with RefsВидеоWorking with React Refs: Patterns and PitfallsDIALOGUEReference values with Refs - AssessmentЗадание
04Reference values with Refs Review - Common mistakes and best practices3 материалов

Reference values with Refs Review - Common mistakes and best practices

Reference values with Refs Review - Common mistakes and best practicesВидеоMastering Refs in React (Including React 19 Changes)DIALOGUEReference values with Refs Review - Common mistakes and best practices - AssessmentЗадание
05Professional Project: Card Flip Game - useRef16 материалов

Professional Project: Card Flip Game - useRef

Introduction - User WalkthroughВидеоComponent TreeВидеоBuilding the File StructureВидеоSet Up the Game State in App - Generate and Shuffle Icons Using the Fisher-Yates AlgorithmВидеоBuild the Settings Component and Define reInitialiseGame in the ProcessВидеоReset ButtonВидеоScoreBoardВидеоConditionally Show Graffiti When the Game Is WonВидеоBuilding the GameBoard ComponentВидеоAdd Flipping Logic to the Card ComponentВидеоMove Flipping Logic to GameBoard Using RefsВидеоPlay a Victory Sound When the Player Matches All Card PairsВидеоPlay Flipping Sound on Card FlipВидеоReset the GameBoardВидеоManaging Card Flip Logic and User Feedback in React Memory MatchDIALOGUEProfessional Project: Card Flip Game - useRef - AssessmentЗадание
06React Effects7 материалов

React Effects

Introduction to useEffectВидеоuseEffect DependenciesВидеоuseEffect Cleanup FunctionsВидеоListening for a Keyboard KeyВидеоGoogle Maps ResizingВидеоMastering useEffect and Cleanup in ReactDIALOGUEReact Effects - AssessmentЗадание
07React Effects Review - Common mistakes and best practices3 материалов

React Effects Review - Common mistakes and best practices

React Effects Review - Common mistakes and best practicesВидеоMastering React Effects: useEffect, Dependencies, and CleanupDIALOGUEReact Effects Review - Common mistakes and best practices - AssessmentЗадание
08Professional Project: Weather App - useEffect14 материалов

Professional Project: Weather App - useEffect

Introduction - User WalkthroughВидеоComponent TreeВидеоProject Structure – Creating Files and FoldersВидеоHeaderВидеоBuild SearchBar and Retrieve Real Cities from the Open-Meteo Geocoding APIВидеоBuild a useEffect to Fetch Weather Data When a City Is SelectedВидеоBuild a useEffect that Transforms the API Data When Data ChangesВидеоBuild the CurrentWeather ComponentВидеоBuild the HumidityCard ComponentВидеоBuild the WindSpeedCard ComponentВидеоBuild the HourlyForecast ComponentВидеоBuild the Forecast ComponentВидеоBuilding and Refactoring Weather Card Components in ReactDIALOGUEProfessional Project: Weather App - useEffect - AssessmentЗадание
09Professional Project: Story Collection - Multi-language UI, React Context, React17 материалов

Professional Project: Story Collection - Multi-language UI, React Context, React

Introduction - User WalkthroughВидеоComponent TreeВидеоProject Structure – Creating Files and FoldersВидеоBuilding the Language Context and Wrapping App in the ProviderВидеоRouting & Layout with App.jsxВидеоBuilding the HeaderВидеоBuilding the LanguageToggle ComponentВидеоBuilding the Footer ComponentВидеоSupabase Configuration & Environment SetupВидеоStoryList Page – Fetching & Displaying DataВидеоStoryCard ComponentВидеоStoryDetail PageВидеоStoryDetail Page: Building the Story Content SectionВидеоBuilding the NotFound PageВидеоBuild a Beautiful Custom ScrollbarВидеоBuilding a Multilingual Story List Page in ReactDIALOGUEProfessional Project: Story Collection - Multi-language UI, React Context, React - AssessmentЗадание
10Professional Project: Kanban Board with Drag & Drop like Trello - useEffect20 материалов

Professional Project: Kanban Board with Drag & Drop like Trello - useEffect

Introduction - User WalkthroughВидеоComponent TreeВидеоProject Structure – Creating Files and FoldersВидеоAdding Dark Mode with Theme Toggle and useEffectВидеоBuilding the Kanban Board: Managing Column State and Rendering TasksВидеоAdding & Deleting ColumnsВидеоAdding TasksВидеоEditing Column TitlesВидеоEditing Tasks InlineВидеоUse useRef to Focus and Scroll to the End of the Textarea When Editing StartsВидеоImplementing Task Deletion in the Kanban BoardВидеоImplementing Drag and Drop for TasksВидеоHandling Task Movement on Drag EndВидеоApply Custom Scrollbar Styles Using a Utility ClassВидеоPersisting Kanban State to localStorageВидеоConclusion to the Course 'React State Management, Effects & Custom Hooks'ЧтениеReact Kanban Board: Task Editing and State UpdatesDIALOGUEProfessional Project: Kanban Board with Drag & Drop like Trello - useEffect - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание