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

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

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

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

React Fundamentals, Components, and State Management

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

О курсе

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 React from scratch with this comprehensive course, covering core concepts like components, state management, and React hooks. You'll gain hands-on experience building real-world applications like CountOPedia, ContactOPedia, and RouteOPedia. As you progress, you'll master React fundamentals, work with lifecycle methods, and explore advanced techniques like routing and hooks to manage state and data. Starting with setting up your development environment and writing your first React code, you'll gradually dive into creating reusable components, handling events, and managing state. This course is for web developers with basic programming knowledge in JavaScript, HTML, CSS, and .NET APIs. By the end of this course, you'll be able to build dynamic React applications with state and lifecycle management, use React hooks effectively, and implement routing for complex, interactive web apps.

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

React.jsUI ComponentsBootstrap (Front-End Framework)Data ValidationCascading Style Sheets (CSS)Web Design and DevelopmentUser Interface (UI)Web Development ToolsEvent-Driven ProgrammingHTML and CSSJavaScript FrameworksCode ReusabilityASP.NETJavascriptApplication Programming Interface (API)

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

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

01Introduction11 материалов

Introduction

Introduction to the SpecializationВидеоIntroduction to the Course 'React Fundamentals, Components, and State Management'ЧтениеFull Specialization ResourcesЧтениеWhy Should You Learn React?Видео

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

Packt - Course Instructors

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

React Fundamentals, Components, and State Management
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 13.2 ч

9 модулей

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

Субтитры: Арабский, Французский, Итальянский, Корейский, Индонезийский, Испанский, Японский

Часть программы вашего университета
Live Demo - Final ProjectВидео
What We Will Build - Part 1Видео
What We Will Build - Part 2Видео
Course PrerequisitesВидео
Project ResourcesВидео
Tools NeededВидео
Visual Studio Code ExtensionsВидео
02React Fundamentals17 материалов

React Fundamentals

Set Up Basic HTML and Add React CDNВидеоFirst React CodeВидеоAssignment 1 - Writing First React CodeВидеоCreating Element and Rendering in ReactВидеоWhat Is JSX?ВидеоBetter Way to Create React ProjectsВидеоCreate ProjectВидеоRun the ProjectВидеоCleanup ProjectВидеоMake the Project Functional AgainВидеоFirst React ComponentВидеоAssignment 2 - React ComponentВидеоAssignment 3 - Parent Child ComponentВидеоAssignment 3 Solution - Parent-Child ComponentВидеоRules of JSXВидеоUnderstanding React Components and JSXDIALOGUEReact Fundamentals - AssessmentЗадание
03React Components24 материалов

React Components

Work with StylesВидеоAdding Bootstrap ClassesВидеоWork with Classes - Part 1ВидеоVariables in JSXВидеоAssignment 3 - Adding ConstВидеоAssignment 3 Solution - Adding Constant.ВидеоHTML Element in JSXВидеоStudent ComponentВидеоExport and Import ComponentsВидеоAssignment 4 - Separating Student ComponentВидеоAssignment 4 Solution - Separating Student ComponentВидеоProps and ComponentsВидеоInstall Third-Party Libraries and ImagesВидеоImport Image and Header DesignВидеоFooter and Main Body ComponentВидеоAssignment 5 - Fix Error and DesigningВидеоPassing Components as ChildrenВидеоFinal HierarchyВидеоArrow FunctionВидеоFunctional Versus Class ComponentsВидеоClass ComponentsВидеоAssignment 6 - Convert MainBody to Class ComponentВидеоReact JSX Styling and PropsDIALOGUEReact Components - AssessmentЗадание
04React State - CountOPedia14 материалов

React State - CountOPedia

Create CountOPediaВидеоAssignment 7 Solution - Set Up CountOPediaВидеоCounter Application ButtonsВидеоClick EventsВидеоSetting and Retrieving StateВидеоDemo - React StateВидеоState SummaryВидеоNew SetState SyntaxВидеоCountOPedia UIВидеоRandom Play and Reset ButtonВидеоAssignment 8 - Game Status and Last PlayВидеоAssignment 8 Solution - Game Status and Last PlayВидеоBuilding a React Counter GameDIALOGUEReact State - CountOPedia - AssessmentЗадание
05ContactOPedia - CRUD Operations26 материалов

ContactOPedia - CRUD Operations

Create Project - ContactOPediaВидеоAdd ComponentsВидеоSkeleton of ComponentsВидеоAdd Contact UIВидеоFavorite and General Contact StateВидеоIndividual Contact UIВидеоLook and Feel ContactOPediaВидеоAdd Contact HandlerВидеоAdd Contact in ActionВидеоAdd ValidationsВидеоDisplay Validation and Success NotificationВидеоToggle FavoritesВидеоAssignment 9 - Delete ContactВидеоAssignment 9 Solution - Delete ContactВидеоAdd Random User to Contact ListВидеоAxios CallВидеоDemo - Adding Random ContactВидеоAssignment 10 - Remove All ContactВидеоAssignment 10 Solution - Remove all ContactВидеоWhich Contact Has to Be UpdatedВидеоToggle UI Based on UpdateВидеоCancel Button in ActionВидеоUpdate Contact - Part 1ВидеоUpdate Contact - Part 2ВидеоManaging Contacts in a React AppDIALOGUEContactOPedia - CRUD Operations - AssessmentЗадание
06CyclOPedia - Lifecycle Methods Class Components12 материалов

CyclOPedia - Lifecycle Methods Class Components

Create Project - CyclOPediaВидеоSet Up Random APIВидеоDisplay InstructorВидеоcomponentDidUpdateВидеоControlled ComponentВидеоSaving in Local StorageВидеоSeparating Out InstructorВидеоcomponentWillUnmountВидеоLoad Student ListВидеоBug TimeВидеоUnderstanding and Using React Class Component Lifecycle MethodsDIALOGUECyclOPedia - Lifecycle Methods Class Components - AssessmentЗадание
07WatchOPedia - Hooks in React12 материалов

WatchOPedia - Hooks in React

Create WatchOPediaВидеоSet Up CounterВидеоuseState in ActionВидеоGotchas with useStateВидеоObjects and StateВидеоAnother Gotcha with useStateВидеоSomething ExcitingВидеоWatchOPedia Movie SetupВидеоAssignment 11 Solution - Display Movie ListВидеоAssignment 12 Solution - Add a Movie to WatchВидеоState Management in React: From Class Components to HooksDIALOGUEWatchOPedia - Hooks in React - AssessmentЗадание
08CyclOPedia - Lifecycle Methods Functional Components14 материалов

CyclOPedia - Lifecycle Methods Functional Components

Initial ProjectВидеоName and Feedback Input fieldsВидеоuseEffect OverviewВидеоuseEffect - First Render OnlyВидеоuseEffect - Unmount in ActionВидеоAssignment 13 - Use EffectВидеоAssignment 13 Solution - Use EffectВидеоLoad Student on Counter UpdateВидеоuseRef and previous valuesВидеоuseRef on Student CountВидеоMore Common Uses of useRefВидеоuselD HookВидеоUnderstanding React Hooks: useEffect, useRef, and useState in Functional ComponentsDIALOGUECyclOPedia - Lifecycle Methods Functional Components - AssessmentЗадание
09RouteOPedia - Routing in React21 материалов

RouteOPedia - Routing in React

Set Up RouteOPediaВидеоCreate More ComponentsВидеоFirst RouteВидеоLink ComponentВидеоAssignment 14 - Product RoutesВидеоAssignment 14 Solution- Product RoutesВидеоNested RoutesВидеоIndex in Nested RouteВидеоNot FoundВидеоParameters in URLВидеоAssignment 15 - Parameters in URLВидеоNavLink ComponentВидеоNavigate Using useNavigate HookВидеоUsing Link Component to NavigateВидеоAnother Navigation MethodВидеоNavigate BackВидеоConclusion to the Course 'React Fundamentals, Components, and State Management'ЧтениеUnderstanding React Router DOM RoutingDIALOGUERouteOPedia - Routing in React - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание