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

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

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

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

React Foundations & Core Frontend Development

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

О курсе

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. This course equips you with a strong foundation in React and modern frontend development, enabling you to build scalable, dynamic, and high-performance web applications. You will gain hands-on experience with core React concepts, component-driven architecture, and real-world project workflows, preparing you for professional frontend roles. You begin by exploring React’s evolution, setting up projects with modern tools like TypeScript, Next.js, and Remix, and understanding project structure. As you progress, you will master JSX, components, props, dynamic rendering, and event handling through practical examples like product cards and employee components. The course then dives deeper into state management using hooks such as useState and useEffect, followed by advanced event handling techniques and form management. You will build a complete e-commerce-style application, implementing CRUD operations, UI enhancements, and performance optimizations. Finally, you will learn routing with React Router, global state management with Context API, and advanced patterns using Redux Toolkit. This course is ideal for aspiring frontend developers, JavaScript learners, and professionals transitioning to React. Basic JavaScript knowledge is recommended, and the course is designed at an intermediate level. By the end of the course, you will be able to build full-featured React applications, manage complex state efficiently, implement routing and global state, and structure production-ready frontend projects.

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

React.jsReact ReduxContext ManagementEvent-Driven ProgrammingWeb ApplicationsFrontend PerformanceUser Interface (UI)E-CommerceJavascriptApplication DevelopmentTypeScriptFront-End Web DevelopmentCascading Style Sheets (CSS)JavaScript FrameworksUI ComponentsWeb Development Tools

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

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

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

Introduction

Introduction to SpecializationВидеоIntroduction to the Course 'React Foundations & Core Frontend Development'ЧтениеFull Specialization ResourceЧтениеReact History - MilestoneВидео

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

Packt - Course Instructors

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

React Foundations & Core Frontend Development
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 16.1 ч

9 модулей

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

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

Часть программы вашего университета
What is React RC & Latest React VersionВидео
IQ - What is React RC & Latest React VersionВидео
Creating First Project - React 19Видео
IQ - Creating First Project - React 19Видео
Understanding Project StructureВидео
IQ - Understanding Project StructureВидео
Creating Project with TypeScriptВидео
IQ - Creating Project with TypeScriptВидео
Creating Project in NextJSВидео
Creating Project in RemixВидео
IQ - Project with TypeScript and RemixВидео
02React Fundamentals31 материалов

React Fundamentals

Creating Component from ScratchВидеоIQ - Creating Component from ScratchВидеоCreating Product CardВидеоIQ - Creating Product CardВидеоRender Dynamic Values from an ObjectВидеоIQ - Render Dynamic Values from an ObjectВидеоRendering Dynamic Values from an ArrayВидеоConcept of Key Attribute in Map()ВидеоIQ - Rendering Dynamic Values from Array and Key AttributeВидеоReact Fragment & Empty FragmentВидеоIQ - React Fragment & Empty FragmentВидеоDefault vs Named ExportВидеоIQ - Default vs Named ExportВидеоThe Rules of JSXВидеоIQ - The Rules of JSXВидеоAssigning JSX to VariableВидеоIQ - Assigning JSX to VariableВидеоUnderstanding PropsВидеоIQ - Understanding PropsВидеоMaking Product Component Dynamic Using PropsВидеоConditional RenderingВидеоIQ - Conditional RenderingВидеоBasic Event Handling - ClickВидеоIQ - Basic Event HandlingВидеоParameter PassingВидеоIQ - Parameter PassingВидеоTask - Create a Dynamic Employee ComponentВидеоTask - Conditional Rendering on Employee Component (isActive)ВидеоTask - Calculate the Factorial Value by Passing ParameterВидеоBuilding Custom React Components and Mastering JSX RulesDIALOGUEReact Fundamentals - AssessmentЗадание
03State Management19 материалов

State Management

What is the State and Why Needed?ВидеоIQ - What is the State and Why Needed?ВидеоuseState() Hook - Understanding State CreationВидеоIQ - useState() Hook - Understanding State CreationВидеоState as a SnapshotВидеоIQ - State as a SnapshotВидеоUpdating State Based on Previous StateВидеоIQ - Updating State Based on Previous StateВидеоWorking with Multiple StatesВидеоInitializer Function - Avoiding Recreation of Initial StateВидеоIQ - Initializer Function - Avoiding Recreation of Initial StateВидеоArray as StateВидеоIQ - Array as StateВидеоObject as StateВидеоIQ - Object as StateВидеоTask - Initialize the State with the Large ArrayВидеоTask - Update the Elements of the State Using Updater FunctionВидеоUnderstanding State vs Regular Variables in ReactDIALOGUEState Management - AssessmentЗадание
04Event Handling - Deep Dive35 материалов

Event Handling - Deep Dive

Event Handling RecapВидеоReact Event Object - Synthetic EventВидеоIQ - React Event Object - Synthetic EventВидеоInput Event - TextboxВидеоTask - Input Event - TextboxВидеоIQ - Input Event - TextboxВидеоEvent Propagation - BubblingВидеоIQ - Event Propagation - BubblingВидеоStopping PropagationВидеоIQ - Stopping PropagationВидеоpreventDefault() - Preventing Default BehaviorВидеоIQ - preventDefault() - Preventing Default BehaviorВидеоform Event with Multiple StatesВидеоTask - form Event with Multiple StatesВидеоform Event States as ObjectВидеоTask - Using Object State with form EventВидеоSingle Event Handler Using Dynamic KeyВидеоIQ - Single Event Handler Using Dynamic KeyВидеоTask - Single Event Handler Using Dynamic KeyВидеоFunctional Update - The Correct WayВидеоInput Fields - CheckboxВидеоInput Fields - Radio ButtonВидеоTask - Input Fields - Radio ButtonВидеоIQ - Input FieldsВидеоTask - Form Handling Using Textbox, Checkbox & Radio ButtonsВидеоEvent Handling - onFocus EventВидеоEvent Handling - onBlur EventВидеоTask - Event Handling - onFocus & onBlur EventВидеоEvent Handling - onKeyUp & onKeyDown EventВидеоIQ - Event Handling - onKeyUp & onKeyDown EventВидеоEvent Handling - onMouseEnter & onMouseLeave EventВидеоTask - Event Handling - onMouseEnter & onMouseLeave EventВидеоIQ - onMouseEnter & onMouseLeave EventВидеоComprehensive React Event HandlingDIALOGUEEvent Handling - Deep Dive - AssessmentЗадание
05Managing State Practically16 материалов

Managing State Practically

IntroductionВидеоProject CreationВидеоProject Setup with Tailwind CSS and Header CreationВидеоCreating Product Card ComponentВидеоRendering Product List with Static DataВидеоCreating Add Product ModalВидеоCreating Form for Add ProductВидеоStoring the Values of the Add Product FormВидеоImplementing Add Product FunctionalityВидеоImplementing Delete FunctionalityВидеоSetting Up Edit Product FormВидеоImplementing Edit Product FunctionalityВидеоImplementing Active/Inactive Product FunctionalityВидеоRendering Active/Inactive ProductsВидеоBuilding CRUD Operations in a React Product AppDIALOGUEManaging State Practically - Deep Dive - AssessmentЗадание
06useEffect() - Working with Component Life Cycles18 материалов

useEffect() - Working with Component Life Cycles

Understanding Component Life CycleВидеоIQ - Understanding Component Life CycleВидеоIntroduction to useEffect HookВидеоUsing Simple useEffect() HookВидеоIQ - Using Simple useEffect() HookВидеоuseEffect() - Importance of the Dependency ArrayВидеоIQ - useEffect() - Importance of the Dependency ArrayВидеоuseEffect() - Cleanup FunctionВидеоIQ - useEffect() - Cleanup FunctionВидеоThe Right Place to Call the useEffect() HookВидеоWhen to Avoid Using the useEffect Hook in ReactВидеоUnderstanding React Strict Mode's Extra Setup and Cleanup CycleВидеоuseEffect() Hook - Managing DependenciesВидеоuseEffect() Vs DOM Updates - Need of UseLayoutEffect()ВидеоDeferring Effects Triggered by Interactions in ReactВидеоUnderstanding useEffect Only Runs on Client SideВидеоUnderstanding useEffect and Component Lifecycle in ReactDIALOGUEuseEffect() - Working with Component Life Cycles - Deep Dive - AssessmentЗадание
07React Router33 материалов

React Router

Introduction to RoutingВидеоUnderstanding Routing in ReactВидеоConfigure Routes Using React RouterВидеоIQ - Configure Routes Using React RouterВидеоUnderstanding Single-page Application and Multi-page ApplicationВидеоIQ - SPA vs MPAВидеоNavbar Creation on Root RouteВидеоCreating Products PageВидеоNot Found Page (404)ВидеоIQ - Not Found Page (404)ВидеоUnderstanding Nested RoutesВидеоDynamically Handling Nested Routes - Route ParameterВидеоIQ - Nested Routes - Route ParameterВидеоLayouts - Outlet EventВидеоIQ - Layouts - Outlet EventВидео"index" Attribute - Referring the Parent RouteВидеоIQ - "index" Attribute - Referring the Parent RouteВидеоUse Navbar as a LayoutВидеоPassing Data to Child Component - context & useOutletContext() hookВидеоPassing Data to Child Component - "state" and useLocation() hookВидеоIQ - context, useOutletContext(), "state" and useLocation() hookВидеоCreating Product Details CardВидеоUnderstanding the useRoutes() hookВидеоIQ - Understanding the useRoutes() hookВидеоUnderstanding NavLink ComponentВидеоIQ - Understanding NavLink ComponentВидеоNavigate Component for RedirectionВидеоuseNavigate() - Correct Way to RedirectВидеоIQ - Navigate & useNavigate()ВидеоProject RestructuringВидеоInterface ImprovementВидеоImplementing Routing and Navigation in ReactDIALOGUEReact Router - AssessmentЗадание
08The useContext() Hook - Global State Management14 материалов

The useContext() Hook - Global State Management

Prop DrillingВидеоIQ - Prop DrillingВидеоUnderstanding of Context APIВидеоIQ - Understanding of Context APIВидеоuseContext() HookВидеоIQ - useContext() HookВидеоCreating Interface for Calculator AppВидеоSetup Context API into Calculator AppВидеоHandling Input Data in the Global StateВидеоGlobal State ManipulationВидеоIQ - Global State ManipulationВидеоNested Context ProvidersВидеоUnderstanding Prop Drilling and Context API in ReactDIALOGUEThe useContext() Hook - Global State Management - AssessmentЗадание
09Redux Tool Kit (RTK) - Advanced Global State Handling20 материалов

Redux Tool Kit (RTK) - Advanced Global State Handling

Introduction to Redux and RTKВидеоIQ - Introduction to Redux and RTKВидеоCreating SliceВидеоIQ - Creating SliceВидеоConfiguring StoreВидеоIQ - Configuring StoreВидеоFetching the Store Data - useSelector()ВидеоIQ - Fetching the Store Data - useSelector()ВидеоCreating Actions in SliceВидеоIQ - Creating Actions in SliceВидеоHow Immutability in Actions Works Behind the ScenesВидеоIQ - How Immutability in Actions Works Behind the ScenesВидеоHandling Input Values in ReduxВидеоCalculating Arithmetic Operations in ReduxВидеоImplementing Redux in React Router AppВидеоConclusion to the Course 'React Foundations & Core Frontend Development'ЧтениеComparing Context API and Redux Toolkit for Global State ManagementDIALOGUERedux Tool Kit (RTK) - Advanced Global State Handling - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание