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

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

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

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

ReactJS - The Beginner Masterclass

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

О курсе

Updated in May 2025. This course now 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. Dive into the world of ReactJS with this comprehensive beginner masterclass! You'll start by mastering the foundational concepts, from setting up a React development environment to building your first components and understanding how React handles the DOM. By the end of this course, you'll have a solid understanding of React fundamentals and be equipped to build dynamic, modern web applications. Your learning journey begins with an introduction to React's advantages and a quick project to get hands-on experience. Next, you'll delve into core concepts like JSX, props, state management, and styling. Through hands-on examples, you'll build interactive applications like the Random Quote App, Grocery List App, and a feature-rich BookSearch App, gaining experience in state management, forms, interactivity, and API integration. As you progress, you'll explore advanced features like custom hooks, conditional rendering, and connecting to backend APIs with React’s useEffect hook. The course concludes with deployment strategies, including setting up a GitHub repository and deploying apps using Vercel, ensuring you're ready to showcase your skills in a professional setting. This course is perfect for beginners with a basic understanding of JavaScript who want to start building modern, user-friendly web apps. Whether you're a student, developer, or professional looking to upskill, this masterclass is your gateway to mastering React.

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

React.jsApplication DeploymentApplication Programming Interface (API)Development EnvironmentCascading Style Sheets (CSS)User Interface (UI)UI ComponentsContinuous DeploymentCloud DeploymentJavascriptWeb ApplicationsJavaScript FrameworksBootstrap (Front-End Framework)

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

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

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

Introduction

Lesson 1 - Introduction and Course PrerequisitesВидеоFull Course ResourcesЧтениеLesson 2 - Build a Simple React App - FastВидеоLesson 3 - Finalizing the Random Dog AppВидео

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

Packt - Course Instructors

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

ReactJS - The Beginner Masterclass
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 13.4 ч

8 модулей

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

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

Часть программы вашего университета
Introduction - AssessmentЗадание
02React Fundamentals22 материалов

React Fundamentals

Lesson 1 - Understanding Old vs New Way of Building Web Apps - SPAsВидеоLesson 2 - Motivation for Using React as the Solution to Vanilla JSВидеоLesson 3 - What is ReactJS - How it WorksВидеоLesson 4 - Setup Dev Environment - VS Code-Chrome Browser & Install NodejsВидеоLesson 5 - Installing Important Extensions - VS CodeВидеоLesson 6 - Create and Run a React Project with Vite - Full OverviewВидеоLesson 7 - React Project File and Folder WalkthroughВидеоLesson 8 - Create our First Component in ReactВидеоLesson 9 - JSX and How React Treats the DOM - OverviewВидеоLesson 10 - Babeljs - JSX Compiled to JavaScriptВидеоLesson 11 - Understanding the Main Files - app-main and indexВидеоLesson 12 - Writing JavaScript Inside of JSX Code - Book ComponentВидеоLesson 13 - Introduction to Props - Refactor Book Component to Use PropsВидеоLesson 14 - Adding an Array of Books & Pulling Data from that Array - ManuallyВидеоLesson 15 - Using the Map Function to Loop Through a List of Books and Show ThemВидеоLesson 16 - Understanding the React Key PropВидеоLesson 17 - Props and One-Way Data Flow - OverviewВидеоLesson 18 - Destructuring PropsВидеоLesson 19 - Section Summary - React Basics and IntroductionВидеоLesson 20 - UserProfile Card Challenge and SolutionВидеоUnderstanding React: Old vs New Web Development ApproachesDIALOGUEReact Fundamentals - AssessmentЗадание
03React State and Styling17 материалов

React State and Styling

Lesson 1 - Introduction to State Management, Forms and Interactivity in ReactВидеоLesson 2 - Restructuring the Project - Create a Components Folder and Add Book and UserProfile Components into Separate FilesВидеоLesson 3 - Pulling Book Data from a Different Data FileВидеоLesson 4 - Introduction to State in React - The Wrong Way to Change StateВидеоLesson 5 - Using React Hook useState to Fix the State Management IssueВидеоLesson 6 - Overview of How State Works in ReactВидеоLesson 7 - Random Quote App - SetupВидеоLesson 8 - RandoQuote App - Thorough Setup - Final ProductВидеоLesson 9 - How State Works in React - ReviewВидеоLesson 10 - Styling our Components - Overview of CSS Files in our ProjectВидеоLesson 11 - Installing Bootstrap and Using it in Quotes AppВидеоLesson 12 - Adding Another Piece of State - Random ColorВидеоLesson 13 - Lifting State Up - React Pattern OverviewВидеоLesson 14 - Lifting State Up - Hands-On - RandomQuoteВидеоLesson 15 - Lift State Up - Hands-On - Simple CounterВидеоReact Component State and StylingDIALOGUEReact State and Styling - AssessmentЗадание
04Forms and Interactivity - Grocery List App23 материалов

Forms and Interactivity - Grocery List App

Lesson 1 - FormsВидеоLesson 2 - Setup a Simple Form and InputВидеоLesson 3 - Form and preventDefault MethodВидеоLesson 4 - Form - Controlled ElementsВидеоLesson 5 - Adding Form Input Data into a State List and Show the List Items on PageВидеоLesson 6 - Multi-Input Form Setup - Hands-OnВидеоLesson 7 - Setting Up Multi-Form Input Data and the handleChange Event HandlerВидеоLesson 8 - OnHandle Submit - Add Simple Validation and Show the Card with Person DataВидеоLesson 9 - Hands-On: What We'll Be Building - GroceryList App - DemoВидеоLesson 10 - Hands-On - GroceryList Component - Adding Fake Data and Showing a ListВидеоLesson 11 - Creating the Footer and Nav ComponentsВидеоLesson 12 - Styling the GroceryList ItemВидеоLesson 13 - Add Grocery FormВидеоLesson 14 - Fixing Clear Form IssuesВидеоLesson 15 - Adding Bootstrap IconВидеоLesson 16 - Passing the toggleBought as a Prop - Part 1ВидеоLesson 17 - Implementing the Toggling - Testing in the Console - It WorksВидеоLesson 18 - Changing the Circle Color and Item Text When Clicked - StrikethroughВидеоLesson 19 - Adding the handleRemoveItem Prop and Function to Remove an ItemВидеоLesson 20 - Adding Stats in the Footer ComponentВидеоLesson 21 - Form - Section SummaryВидеоBuilding Forms in ReactDIALOGUEForms and Interactivity - Grocery List App - AssessmentЗадание
05Connecting to the Backend - Consuming APIs - UseEffect Hook7 материалов

Connecting to the Backend - Consuming APIs - UseEffect Hook

Lesson 1 - Connecting to the Back End - Understanding Side Effects, Hooks and useEffect - OverviewВидеоLesson 2 - Fetching Data from a Server the Wrong WayВидеоLesson 3 - Fetching Data from the Backend the Right Way with useEffect HookВидеоLesson 4 - Setting Up Loading StateВидеоLesson 5 - Use Dependency Array and Adding Values that Control Side Effects - Hands-OnВидеоData Fetching in React with useEffectDIALOGUEConnecting to the Backend - Consuming APIs - UseEffect Hook - AssessmentЗадание
06Build a BookSearch App19 материалов

Build a BookSearch App

Introduction to Forms in React - OverviewВидеоLesson 2 - Setup NavBar ComponentВидеоLesson 3 - Create Footer ComponentВидеоLesson 4 - Pulling in Books from APIВидеоLesson 5 - Setup the URL Search QueryВидеоLesson 6 - Setup SearchBar and PropsВидеоLesson 7 - Making Sure The SearchTerm is Updating Correctly - DebuggingВидеоLesson 8 - Showing Books on ScreenВидеоLesson 9 - Adding Loading StateВидеоLesson 10 - Clearing the Search FormВидеоLesson 11 - Setup the api-client File and Implementing fetchBooksВидеоLesson 12 - Custom Hooks and Creating a Custom Hook - useBooksВидеоLesson 13 - Adding the AbortController InterfaceВидеоLesson 14 - Book Detail Component - Part 1ВидеоLesson 15 - Conditional Rendering with && - Testing SelectedBookВидеоLesson 16 - Show Book Details in a Modal - WorkingВидеоLesson 17 - Handling Missing Books API Missing FieldsВидеоBuilding and Refactoring a React Project with Google Books APIDIALOGUEBuild a BookSearch App - AssessmentЗадание
07Deployment5 материалов

Deployment

Lesson 1 - Build and Setup Vercel and Deploy the AppВидеоLesson 2 - Connecting to GitHub Repo and Automate DeploymentВидеоLesson 3 - Bookshelf App and Section SummaryВидеоDeploying a React Application to VercelDIALOGUEDeployment - AssessmentЗадание
08Wrap Up3 материалов

Wrap Up

Course Wrap UpВидеоFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание