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

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

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

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

Professional React Development

Курс от Coursera
Уровень не указан≈ 36 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

Build the practical skills needed to create modern, scalable React applications in this comprehensive course within the Web Development Skill Path. You will learn how to apply established architectural patterns, implement clean component design principles, and build functional React components that render dynamic interfaces using props, lists, event handlers, and reusable logic. Through hands-on practice with React Hooks, including useState and useEffect, you will manage component state, fetch data from APIs, and structure interactive UIs with confidence. You will also explore essential JavaScript tooling, modular code organization, and automated build processes to support professional front-end workflows. This course brings together expert content from Meta and Packt, giving you multiple perspectives on React development and modern JavaScript practices. You will progress from core component foundations to navigation patterns, state management, and production-ready tooling. By the end, you will be equipped to work within existing codebases, build responsive interfaces, and contribute effectively to real-world React projects. Ideal for aspiring front-end developers and learners seeking job-ready React skills grounded in practical, industry-aligned techniques.

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

Package and Software ManagementFrontend PerformanceDevelopment EnvironmentCode ReusabilityUI ComponentsWeb ApplicationsResponsive Web DesignJavaScript FrameworksNode.JSSoftware Development ToolsEvent-Driven ProgrammingJavascriptBuild ToolsWeb Development ToolsReact.jsWebpackFront-End Web Development

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

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

01Start Here: Get Oriented and Check Your Skills2 материалов
Start Here: How This Skill-Based Course WorksЧтениеSkill Diagnostic: Find Your Recommended Starting PointЗадание
02React Components45 материалов

Setting the Stage

Building Your React Foundation: Understanding HTML, CSS, and JavaScriptDIALOGUE

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

Professionals from the Industry

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

Professional React Development
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 36 ч

7 модулей

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

Субтитры: Арабский, Французский, Узбекский, Украинский, Китайский (Китай), Греческий, Итальянский, Бразильский португальский, Вьетнамский, Нидерландский, Корейский, Немецкий, Пушту, Русский, Тайский, Индонезийский, Шведский, Турецкий, Азербайджанский, Испанский, Хинди, Японский, Казахский, Венгерский, Польский

Часть программы вашего университета
How is React used in the real world?Видео
Before you learn ReactЧтение
JavaScript modules, imports - exportsЧтение
Working with Labs in this courseЧтение
Additional readingЧтение

React Components and Where They Live

Why React?ВидеоReact.js overviewВидеоIntroduction to functional componentsВидеоCreating React componentsВидеоTranspiling JSXЧтениеYour First ComponentЛабораторнаяSolution: Your first componentЧтениеSelf review: Your first componentЗаданиеThe React project structureВидеоCustomizing the projectЧтениеImporting componentsВидеоCreating and importing componentsЛабораторнаяSolution: Creating and importing componentsЧтениеSelf review: Creating and importing componentsЗаданиеKnowledge check: React components and where they liveЗаданиеAdditional resources for React components and where they liveЧтениеSetting up a React project in VS Code (Optional)Чтение

Component Use and Styling

Principles of components: PropsВидеоDissecting propsЧтениеUsing props in componentsВидеоPassing propsЛабораторнаяSolution: Passing propsЧтениеSelf review: Passing propsЗаданиеIntroducing JSXВидеоProps and childrenЧтениеStyling JSX elementsЧтениеPractical stylingВидеоJSX syntax and the arrow functionЧтениеEmbedded JSX expressionsВидеоTernary operators and functions in JSXЧтениеExpressions as propsЧтениеEmbedding in attributesВидеоReact ComponentsDIALOGUEMultiple componentsЛабораторнаяSolution: Multiple componentsЧтениеRandom Number Cards: A Hands-On React App for BeginnersЛабораторнаяSelf review: Multiple componentsЗаданиеModule summaryВидеоAdditional resourcesЧтение
03Navigation, Updating and Assets in React.js28 материалов

Linking and Routing

Basic Types of navigationВидеоNavigationЧтениеThe navbarВидеоCreating a routeЛабораторнаяSolution: Creating a routeЧтениеSelf review: Creating a routeЗаданиеKnowledge check: NavigationЗаданиеConditional renderingВидеоApplying conditional renderingЧтениеConditional componentsЧтениеSingle view conditional updatesВидеоDynamic Component Rendering in React: A Login/Logout AppЛабораторнаяKnowledge check: Conditional updatesЗаданиеAdditional resourcesЧтение

Using Assets in React

What is an asset and where does it live?ВидеоBundling assetsЧтениеUsing embedded assetsВидеоDisplaying imagesЛабораторнаяSolution: Displaying imagesЧтениеSelf review: Displaying imagesЗаданиеAudio and video
04Components36 материалов

Course Introduction

Introduction to the courseВидеоReact and your career opportunitesВидеоCourse syllabusЧтениеSetting up a React project in VS Code (Optional)ЧтениеSetting up VS code (Optional)ВидеоInstalling Node and NPM (Optional)ЧтениеWorking with Labs in this courseЧтениеGrid layoutsВидео

Rendering Lists in React

Transforming lists in JavaScriptВидеоRender a simple list componentВидеоExercise: Create a basic List componentЛабораторнаяSolution: Create a basic List componentЧтениеSelf-review: Create a basic List componentЗаданиеWhat are Keys in React?Видео

Forms in React

What are controlled components?ВидеоControlled components vs. Uncontrolled componentsЧтениеCreating a Form component in ReactВидеоCreate a Controlled Form ComponentВидеоExercise: Create a registration formЛабораторнаяSolution: Create a registration formЧтение

React Context

What you know about Props and StateВидеоWhat is Context, and why is it used?ВидеоReact ContextDIALOGUEExercise: Create a light-dark theme switcherЛабораторнаяSolution: Create a light-dark theme switcherЧтениеSelf-review: Create a light-dark theme switcherЗадание
05React Hooks and Custom Hooks33 материалов

Getting started with hooks

Working with React hooksВидеоRevising useState hookВидеоWorking with complex data in useStateЧтениеUsing the useState hookВидеоExercise: Managing state within a componentЛабораторнаяSolution: Managing state within a componentЧтениеSelf-review: Managing state within a componentЗаданиеWhat are side effects?ВидеоWhat is the useEffect hook?ЧтениеUsing the useEffect hookВидеоKnowledge check: Getting started with hooksЗаданиеAdditional resourcesЧтение

Rules of Hooks and Fetching Data with Hooks

What are the rules of hooks?ВидеоWhat you need to know before fetching dataВидеоData fetching using hooksЧтениеFetching data – Putting it all togetherВидеоFetching data with useEffectDIALOGUEExercise: Can you fetch data?Лабораторная

Advanced hooks

What is useReducer and how it differs from useStateВидеоWhen to choose useReducer vs useStateЧтениеuseRef to access underlying DOMВидеоCustom hooksЧтениеExercise: Create your own custom hook, usePreviousЛабораторнаяSolution: Create your own custom hook, usePreviousЧтение
06Modules and Tooling17 материалов

Modules and Tooling

Introduction to the Course 'Modern JavaScript Tooling, Modules, and Backend Integration'ЧтениеFull Specialization ResourcesЧтениеProject IntroductionВидеоWhat Are Modules?ВидеоInstalling and Using Node.jsВидеоCommonJS ModulesВидеоNPM Packages/ModulesВидеоES ModulesВидеоModule BundlersВидеоWebpack Basic SetupВидеоCSS and Style LoadersВидеоHTML Webpack PluginВидеоWebpack DevServer PluginВидеоBabel SetupВидеоCSS Minify Extract PluginВидеоTracalorie Refactor to Use WebpackВидеоDeploy Tracalorie to NetlifyВидео
07Skill Assessment: Professional React Development2 материалов

Lesson

Learner Expectations for Skill AssessmentЧтениеProfessional React DevelopmentЗадание
Видео
Media packagesЧтение
Create an audio / video componentВидео
Song selectionЛабораторная
Solution: Song selectionЧтение
Self review: Song selectionЗадание
Module summary: navigation, updating and assets in React.jsВидео
Additional resourcesЧтение
Using Keys Within List ComponentsВидео
Knowledge check: Rendering Lists in ReactЗадание
Additional resourcesЧтение
Self-review: Create a registration form Задание
Knowledge check: Forms in ReactЗадание
Additional resourcesЧтение
How re-rendering works with ContextЧтение
Knowledge check: React ContextЗадание
Module summary: ComponentsВидео
Additional resourcesЧтение
Solution: Can you fetch data?Чтение
Self-review: Can you fetch data?Задание
APIsВидео
Knowledge check: Rules of Hooks and Fetching Data with HooksЗадание
Additional resourcesЧтение
Self-review: Create your own custom hook, usePreviousЗадание
Knowledge check: Advanced HooksЗадание
Module summary: React Hooks and Custom HooksВидео
Additional resourcesЧтение