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

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

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

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

Building Projects with React and APIs

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

О курсе

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 empowers you to build real-world React applications by integrating APIs, managing state, and deploying projects efficiently. You will gain hands-on experience with React Router, Context API, TypeScript basics, and asynchronous data fetching while learning best practices for component composition and project structure. The course begins with API integration using a Crypto Dash project, teaching you how to fetch, display, filter, and sort dynamic data. You’ll also learn to handle async operations, environment variables, and build responsive UI components. Guided exercises ensure that theoretical concepts are applied immediately in practical scenarios. Next, you will explore advanced routing strategies, server-side rendering concepts, loaders, pagination, and project-level state management with the Context API through projects like a Shopping Cart UI and Friendly Dev project. You’ll also implement inner pages, form actions, Markdown-based blogs, and reusable UI components to deepen your full-stack React skills. This course is ideal for JavaScript developers, front-end engineers, or anyone aiming to build modern, dynamic web apps. A basic understanding of React fundamentals is recommended, and the course difficulty is structured at an intermediate level. By the end of the course, you will be able to fetch and manipulate API data, build multi-page React apps using routing and context, implement project-level state management, create responsive and interactive UI components, and deploy fully functional React projects.

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

User Interface (UI)JavascriptContext ManagementFrontend IntegrationInteractive Data VisualizationJSONCode ReusabilityReact.jsUI ComponentsTypeScriptDashboard CreationFront-End Web DevelopmentResponsive Web DesignApplication Programming Interface (API)JavaScript FrameworksData PersistenceApplication DeploymentRestful API

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

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

01Working With APIs – Crypto Dash Project13 материалов

Working With APIs – Crypto Dash Project

Introduction to the Course 'Building Projects with React and APIs'ЧтениеFull Specialization ResourcesЧтениеSection & Project IntroВидеоAPI Info & Project SetupВидео

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

Packt - Course Instructors

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

Building Projects with React and APIs
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 13.7 ч

7 модулей

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

Часть программы вашего университета
Making HTTP RequestsВидео
Async/Await In useEffectВидео
Display Coin DataВидео
Environment VariablesВидео
Limit SelectorВидео
Filter CoinsВидео
Sort Order SelectorВидео
Fetching and Displaying Cryptocurrency Data in ReactDIALOGUE
Working With APIs – Crypto Dash Project - AssessmentЗадание
02React Router in Declarative Mode – Extend Crypto Dash Project12 материалов

React Router in Declarative Mode – Extend Crypto Dash Project

Intro To RoutingВидеоReact Router SyntaxВидеоHomepage RouteВидеоAbout Page & Link ComponentВидеоNot Found PageВидеоFetch Coin DetailsВидеоDisplay Coin DetailsВидеоAdd Loading SpinnerВидеоGet & Format Chart DataВидеоShow ChartВидеоUnderstanding Client-Side Routing in React ApplicationsDIALOGUEReact Router in Declarative Mode – Extend Crypto Dash Project - AssessmentЗадание
03Build & Deploy6 материалов

Build & Deploy

Section IntroВидеоUnderstanding The Build ProcessВидеоThe Build CommandВидеоDeploy To VercelВидеоUnderstanding the React Build & Deployment WorkflowDIALOGUEBuild & Deploy - AssessmentЗадание
04Context API – Shopping Cart UI15 материалов

Context API – Shopping Cart UI

Section IntroВидеоWhat Is the Context API?ВидеоProject SetupВидеоJSON Server SetupВидеоDisplay Product DataВидеоSetup ProxyВидеоProduct ContextВидеоCart ContextВидеоAdd To Cart ButtonВидеоHeader & Cart CountВидеоCart Items DropdownВидеоRemove Items & Clear CartВидеоStore Cart Items To Local StorageВидеоMastering React Context API for Global State ManagementDIALOGUEContext API – Shopping Cart UI - AssessmentЗадание
05React Router Framework Mode – Friendly Dev Project13 материалов

React Router Framework Mode – Friendly Dev Project

Section & Project IntroВидеоProject Setup & File StructureВидеоCreating RoutesВидеоDevtools Console Error FixВидеоSSR & Client HydrationВидеоLinks & NavigationВидеоActive Link StylingВидеоResponsive MenuВидеоHero ComponentВидеоIntroduction To Types (TypeScript)ВидеоLayout RoutesВидеоExploring React Router Framework Mode and SSRDIALOGUEReact Router Framework Mode – Friendly Dev Project - AssessmentЗадание
06Loaders, Filtering, Pagination & More13 материалов

Loaders, Filtering, Pagination & More

Loaders OverviewВидеоFetch Projects With LoaderВидеоCreate Project TypeВидеоDisplay Loader DataВидеоDynamic Route & Client LoaderВидеоDetails Page OutputВидеоProject PaginationВидеоPagination ComponentВидеоProject Category FilterВидеоAnimate Project FilterВидеоFeatured ProjectsВидеоSwitching from useEffect to Loaders for Data Fetching in ReactDIALOGUELoaders, Filtering, Pagination & More - AssessmentЗадание
07Inner Pages, Actions, Markdown Blog19 материалов

Inner Pages, Actions, Markdown Blog

About PageВидеоContact Page JSXВидеоReact Router Actions ExampleВидеоForm Validation With ActionsВидеоNot Found PageВидеоWhat Is Markdown?ВидеоFetch Post MetaВидеоDisplay Post MetaВидеоSingle Post & MarkdownВидеоDisplay Details PageВидеоSort Posts By DateВидеоRe-Use Pagination ComponentВидеоBlog Post FilterВидеоLatest Blog PostsВидеоCreating Blog Pages with React Router, Markdown, and JSONDIALOGUEConclusion to the Course 'Building Projects with React and APIs'ЧтениеInner Pages, Actions, Markdown Blog - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание