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

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

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

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

Mastering React: From Fundamentals to Real Projects

Курс от SkillsBooster Academy
Начальный≈ 10.5 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

This course teaches you React from the ground up — starting with the core concepts and building up to a real working application. You will learn how to create components, manage state, handle forms, validate data, and connect your app to a REST API. Every topic is covered with clear explanations and hands-on practice exercises. The course also covers the most common mistakes developers make in React — in JSX, state management with useState, and side effects with useEffect. Knowing these mistakes early will save you hours of debugging and help you build better apps from the start. Throughout the course, you'll explore: React Fundamentals: Set up your development environment, create your first React application, and understand how the project structure works. Creating Components: Build your first React component, write markup with JSX, use variables inside JSX, and learn how to import and export components properly. Adding Interactivity: Pass props between components, respond to events, render lists, use Fragment, and apply conditional rendering to show or hide content. Styling in React: Apply styles using inline styles, CSS files, CSS Modules, and global stylesheets — and explore alternative styling options. Managing State: Understand the component lifecycle, use the useState hook, and handle batch state updates for predictable UI behavior. Managing Complex State: Update objects and arrays in state correctly without mutating them directly. Building a To-Do List App: Build a full To-Do List application step by step — create a form, display and style the list, add edit and delete functionality, and implement filtering by status. Validating Form Data: Add form validation using React Hook Form and Yup — display error messages and create custom validation rules. Working with REST APIs: Fetch, create, update, and delete data via API calls using fetch and useEffect, integrate Axios, and handle errors with try/catch and async/await. Advanced API Techniques: Organize API logic in separate files, build a custom React hook for API calls, display error banners, and show spinners during loading. Common React Mistakes: Learn and fix the most frequent mistakes developers make in JSX syntax, useState hook usage, and useEffect hook behavior.

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

React.jsUI ComponentsHTML and CSSJavascriptFront-End Web DevelopmentSoftware DevelopmentFrontend IntegrationRestful APIDevelopment EnvironmentGitHubApplication Programming Interface (API)Web Development ToolsWeb ApplicationsEvent-Driven ProgrammingGit (Version Control System)JavaScript FrameworksUser Interface (UI)DebuggingProgramming PrinciplesCode Reusability

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

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

01Introduction to React10 материалов
IntroductionВидеоWhat is ReactВидеоMaster React Fundamentals with Maya (your AI Mentor)DIALOGUEEnvironment SetupВидео

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

Anton Voroniuk

CEO, SkillsBooster Academy | Google Academy Trainer | Generative AI Leader

Dmytro Vasyliev

Senior Frontend Engineer | AI-Powered Development & React Expert

Mastering React: From Fundamentals to Real Projects
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 10.5 ч

15 модулей

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

Часть программы вашего университета
Creating React ApplicationВидео
Application StructureВидео
See Example of Application StructureЧтение
Cleaning Up ApplicationВидео
Developer ToolsВидео
Do a Quick Knowledge CheckЗадание
02Creating Component7 материалов
Introduction: Creating React ComponentsВидеоYour First React ComponentВидеоImporting and Exporting ComponentsВидеоSee Example of Importing and Exporting ComponentsЧтениеWriting Markup with JSXВидеоUsing Variables in JSXВидеоDo a Quick Knowledge CheckЗадание
03Adding Interactivity8 материалов
Introduction: Adding InteractivityВидеоPassing Props to a ComponentВидеоComponent Props ManipulationsВидеоResponding to EventsВидеоRendering ListВидеоFragment ComponentВидеоConditional RenderingВидеоDo a Quick Knowledge CheckЗадание
04Styling in React7 материалов
Introduction: Styling in ReactВидеоUsing Inline StylesВидеоUsing CSS FilesВидеоUsing CSS ModulesВидеоUsing Global CSS StylesВидеоAlternative Styling OptionsВидеоDo a Quick Knowledge CheckЗадание
05Managing State6 материалов
Introduction: Managing StateВидеоComponent life-cycle and stateВидеоComponent state vs local variablesВидеоUsing useState hookВидеоBatch updating of useStateВидеоDo a Quick Knowledge CheckЗадание
06Managing Complex State6 материалов
Introduction: Managing Complex StateВидеоUpdating Objects in StateВидеоAdding/Deleting items in Array StateВидеоUpdating items in Array StateВидеоSee Example of Managing Complex StateЧтениеDo a Quick Knowledge CheckЗадание
07Working with Form Controls7 материалов
Setting Up New Application via ViteВидеоCreate Application Layout for To-Do ListВидеоCreating a Form to Add New To-Do’sВидеоStructuring and Styling Form Fields ВидеоHandling Form Submission with onSubmitВидеоStoring Form Data in the StateВидеоDo a Quick Knowledge CheckЗадание
08Displaying To-Do List5 материалов
Expanding/Collapsing Additional Form FieldsВидеоCreating and Displaying To-Do ListВидеоStructuring and Styling To-Do ListВидеоMove Static Data about Priorities into VariablesВидеоUpdating To-Do Status with Controlled ComponentsВидео
09Advancing To-Do List Functionality7 материалов
Preparing Components for Editing functionalityВидеоDisplaying an Edit Form for To-Do’sВидеоAllowing User to Edit Items in a ListВидеоAdding Delete Functionality to Remove ItemsВидеоDisplay Filtering Options for To-Do ListВидеоMove Static Data about Filters into VariablesВидеоAllowing User to Filter Items in ListВидео
10Validating Form Data6 материалов
Getting Started with Form ValidationВидеоUsing React Hook Form LibraryВидеоDisplaying Validation Error MessagesВидеоStyling Validation Error MessagesВидеоCreating Validation Rules with YupВидеоProvide Custom Validation for Deadline with YupВидео
11Manipulating Data via API7 материалов
Understanding REST APIs and MethodsВидеоAsynchronous Operations and PromisesВидеоGetting API key for MockAPI toolВидеоSetting Up a Fake API with MockAPI toolВидеоFetching Todo’s via API using fetch and useEffectВидеоCreating, Updating and Deleting Todo via API CallВидеоFiltering Todo’s via API CallВидео
12Advanced Techniques for API usage6 материалов
Organizing API Calls in Separate FilesВидеоSimplifying HTTP Requests with AxiosВидеоHandle API Errors with Try...Catch and Async/AwaitВидеоUse React Custom Hook to organise API CallsВидеоDisplay API Error Messages in the Alert BannerВидеоImplementing Spinners During API CallsВидео
13Beginner Mistakes - JSX syntax9 материалов
Introduction: What You’ll Learn HereВидеоBrowse All Example Code on GitHubЧтениеReturning Multiple ElementsВидеоNot Generating Unique KeysВидеоRendering Zero by MistakeВидеоMissing Whitespace in JSXВидеоMissing Curly Brackets in StylesВидеоUsing class instead of classNameВидеоIgnoring how Virtual DOM WorksВидео
14Beginner Mistakes - useState hook7 материалов
Browse All Example Code on GitHubЧтениеMixing Up State and PropsВидеоMutating State Directly ВидеоReading State Right After UpdateВидеоForgetting Functional UpdatesВидеоUsing Hooks Inside Loops or ConditionsВидеоSwitching From Uncontrolled to ControlledВидео
15Beginner Mistakes - useEffect hook7 материалов
Browse All Example Code on GitHubЧтениеForgetting Dependency Arrays in useEffectВидеоMissing Dependencies from useEffect ВидеоCreating Infinite Loops with useEffectВидеоAdding Everything to the Dependency ArrayВидеоNot Cleaning Up Effects ProperlyВидеоUsing Async Functions Inside useEffectВидео