Track
Сертифікат
Станьте React Розробником
4.9+
★★★★★
★★★★★
7 відгуки
Intermediate
Опануйте мистецтво створення динамічних та інтерактивних користувацьких інтерфейсів для веб-додатків як досвідчений React-розробник. Якщо ви добре розумієте JavaScript, зосередитися на освоєнні React - мудрий вибір. Показати більше
React
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity TeamsWhat you will learn
- Build modern web applications using React, including components, props, and state management
- Navigate between pages seamlessly with React Router and implement dynamic routing
- Manage global state efficiently using Redux Toolkit for scalable applications
- Develop full-stack applications with Next.js 14, including server-side rendering and API routes
- Explore the basics of React Native to build cross-platform mobile applications
- 142 chapters
- 22 hours
- 98 tasks
Trusted by employees of leading companies
Learning track content
Module 1 / Опановуємо React
Отримайте розуміння основних принципів React. Ви дізнаєтесь про JSX (JavaScript XML), створення багаторазових компонентів інтерфейсу користувача та рендеринг елементів. Крім того, ви вивчите важливість збору даних та умовного рендерингу в React-додатках. Наприкінці цього розділу ви матимете міцний фундамент з основних концепцій React, що підготує вас до успіху в більш складних темах, які будуть розглянуті в наступних розділах.
- Що таке React?Попередній перегляд
- SPA vs. MPA у Веб РозробціПопередній перегляд
- Як React Працює з Віртуальним DOMПопередній перегляд
- Знайомство з JSX в ReactПопередній перегляд
- Створення Складних JSX ЕлементівПопередній перегляд
- Рендеринг Елементів у ReactПопередній перегляд
- Челендж: Рендеринг ЕлементаПопередній перегляд
- Компонент ReactПопередній перегляд
- Пропси в ReactПопередній перегляд
- Челендж: Функціональні КомпонентиПопередній перегляд
- Умовний РендерингПопередній перегляд
- Челендж: Умовний Рендеринг КонтентуПопередній перегляд
- Challenge: Implement Conditional Rendering – Bank AlertПопередній перегляд
- Рендеринг Набору ДанихПопередній перегляд
- Челендж: Рендеринг Набору ДанихПопередній перегляд
- Вступ до Основ React Підсумок РозділуПопередній перегляд
Вивчіть різні методи додавання стилів до React додатків. Ви дізнаєтесь, як застосовувати стилі до окремих компонентів, використовувати динамічні стилі та підтримувати масштабований і підтримуваний підхід до стилів у ваших проектах.
- Вступ до Стилізації в ReactПопередній перегляд
- Вбудовані СтиліПопередній перегляд
- Вбудовані Стилі на ПрактиціПопередній перегляд
- Челендж: Вбудовані СтиліПопередній перегляд
- Стилізація за Допомогою CSS ФайлуПопередній перегляд
- Стилізація за Допомогою CSS файлу на ПрактиціПопередній перегляд
- Челендж: Стилізація за Допомогою CSS ФайлуПопередній перегляд
- Стилізація за Допомогою CSS МодулівПопередній перегляд
- Організація Структури Файлів та ПапокПопередній перегляд
- Челендж: CSS МодуліПопередній перегляд
- Стилізація в React Підсумок РозділуПопередній перегляд
Потужні можливості в сучасній React-розробці. Хуки революціонізують те, як ми пишемо функціональні компоненти, надаючи стислий та інтуїтивно зрозумілий спосіб керувати станом та виконувати побічні ефекти. І навпаки, контекст дозволяє нам обмінюватися даними через дерево компонентів без використання пропсів. Поєднання хуків та контексту дозволяє ефективно керувати станами та спрощує обмін даними в React-додатках.
- Вступ: React Хуки та КонтекстПопередній перегляд
- useState ХукПопередній перегляд
- Челендж: Перемикання ВидимостіПопередній перегляд
- useRef ХукПопередній перегляд
- Челендж: Створення Компонента ФормиПопередній перегляд
- useEffect ХукПопередній перегляд
- Челендж: Отримання та Відображення ДанихПопередній перегляд
- useMemo ХукПопередній перегляд
- Челендж: Фільтрація Списку АвтомобілівПопередній перегляд
- КонтекстПопередній перегляд
- Контекст на ПрактиціПопередній перегляд
- Челендж: World of Astronomy ДодатокПопередній перегляд
- React Хуки та Контекст Підсумок РозділуПопередній перегляд
Покрокове керівництво про те, як розпочати реальний React-проект. Від налаштування середовища розробки до розуміння організації проекту та критично важливих інструментів - ви отримаєте знання та впевненість, щоб розпочати свою подорож з React.
Module 2 / React Router Essentials
Learn the theoretical basics of concepts such as URL, domain, protocol, query parameters, and more. Understand the significance of routing in web applications and why we need the React Router library.
Discover how to create an entire React application from scratch, with the ability to display content that adapts based on the URL using React Router functionality.
- Overview of the Multi-Page WebsiteПопередній перегляд
- Installing React RouterПопередній перегляд
- Enabling Routing in a React AppПопередній перегляд
- Defining Routes for NavigationПопередній перегляд
- Recap: First Steps in React RouterПопередній перегляд
- Optimizing Imports with Lazy LoadingПопередній перегляд
- Implementing a Fallback ComponentПопередній перегляд
- Recap: Second Steps in React RouterПопередній перегляд
- Creating and Managing NavigationПопередній перегляд
- Exploring React Router's Complete LogicПопередній перегляд
- Recap of React Router FundamentalsПопередній перегляд
Explore using query strings for sharing and managing application state via URLs, work with different data types in query parameters, and leverage React Router for navigation and effects based on URL changes.
- OverviewПопередній перегляд
- Understanding Query Strings in URLsПопередній перегляд
- Setting Up a React ComponentПопередній перегляд
- Inspecting Recent ChangesПопередній перегляд
- Working with Query ParametersПопередній перегляд
- Integrating useSearchParams HookПопередній перегляд
- Final AppПопередній перегляд
- React Router Course SummaryПопередній перегляд
Module 3 / State Management with Redux Toolkit in React
Explore the fundamental concepts of state management and show you how to leverage the power of the Redux Toolkit. We will guide you through the installation process and help you create your first React Redux Toolkit project. Additionally, meet a challenge to test your understanding and skills.
- What You Will Learn in This CourseПопередній перегляд
- Introduction to State ManagementПопередній перегляд
- Understanding Redux ToolkitПопередній перегляд
- Installing Redux ToolkitПопередній перегляд
- Creating Your First React Redux Toolkit ProjectПопередній перегляд
- Challenge: Installing Redux ToolkitПопередній перегляд
- Additional SoftwareПопередній перегляд
Investigate Redux integration with React apps, covering core concepts: actions, reducers, and the Redux store. Includes practical examples and code explanations for configuring a store, creating reducers, and connecting React components via hooks like useSelector and useDispatch.
- What AwaitsПопередній перегляд
- Understanding the Project Code and File StructureПопередній перегляд
- Creating the Redux StoreПопередній перегляд
- Integrating the Redux Store Into the React AppПопередній перегляд
- Inspecting the Store in the React AppПопередній перегляд
- Understanding Actions and Action CreatorsПопередній перегляд
- Understanding the Role of ReducersПопередній перегляд
- Inspecting Actions and Reducers in ReduxПопередній перегляд
- Connecting Redux with React ComponentsПопередній перегляд
- Completing the AppПопередній перегляд
Supercharge your skills in state management. In this hands-on workshop, you tackle real-world challenges and gain practical experience using the Redux Toolkit for seamless application development.
- Overview of the ChallengeПопередній перегляд
- Challenge Guidelines and RulesПопередній перегляд
- Challenge: Setting Up the Redux StoreПопередній перегляд
- Challenge: Creating Redux ActionsПопередній перегляд
- Challenge: Implementing the ReducerПопередній перегляд
- Challenge: Connecting Redux with ReactПопередній перегляд
- Redux Toolkit SummaryПопередній перегляд
Module 4 / Next.js 14 Mastery for Building Modern Web Apps
Let's discuss what you need to learn before diving into the Next.js framework, what to expect from this course, and what you'll build.
We will set up the project, inspect ways to add styling to our app and cover visual aspects such as images, fonts, pages, and layouts.
- Setting Up the Next.js ProjectПопередній перегляд
- Understanding the Project File and Folder StructureПопередній перегляд
- Styling Approaches in Next.jsПопередній перегляд
- Adding the Global CSS FileПопередній перегляд
- Using Tailwind CSS for StylingПопередній перегляд
- Working with CSS ModulesПопередній перегляд
- Applying Styles ConditionallyПопередній перегляд
- Adding Custom Google FontsПопередній перегляд
- Challenge: Implementing a Custom Google FontПопередній перегляд
- Handling Images in Next.jsПопередній перегляд
Learn how to easily create and manage a new view for your app and navigate through all pages seamlessly with an incorporated routing system.
Deploy the Next.js app using GitHub and Vercel accounts. Additionally, establish a database to supply the app with the necessary data.
Consider how to obtain and show data to the user clearly and efficiently.
- How to Fetch Data in Next.jsПопередній перегляд
- Working with the Dashboard PageПопередній перегляд
- Challenge: Retrieving and Displaying DataПопередній перегляд
- Dynamic vs. Static Rendering in Next.jsПопередній перегляд
- Understanding LoadersПопередній перегляд
- Implementing Specific Part LoadersПопередній перегляд
- Challenge: Create a Skeleton LoaderПопередній перегляд
- Optimizing Loaders with Component GroupingПопередній перегляд
Discover how to implement modern web features such as pagination, CRUD operations, global search, form validation, and more.
- Building the Invoices PageПопередній перегляд
- Developing the Search FunctionalityПопередній перегляд
- Adding Pagination to a Next.js AppПопередній перегляд
- Using Server Actions in Next.jsПопередній перегляд
- Creating a New Item in the DatabaseПопередній перегляд
- Updating an Item in the DatabaseПопередній перегляд
- Deleting an Item in the DatabaseПопередній перегляд
- Challenge: Implementing Form ValidationПопередній перегляд
Authentication implementation in Next.js.
- Understanding AuthenticationПопередній перегляд
- Setting Up the Login RouteПопередній перегляд
- Using NextAuth.js for AuthenticationПопередній перегляд
- Configuring Authentication and Protecting RoutesПопередній перегляд
- Hashing Passwords and Managing CredentialsПопередній перегляд
- Implementing Sign-In FunctionalityПопередній перегляд
- Connecting the UI with Authentication LogicПопередній перегляд
- Implementing Logout FunctionalityПопередній перегляд
- Final Thoughts and Next StepsПопередній перегляд
Requirements
- A computer with a browser - all browsers are supported.
- Your enthusiasm to enhance your tech skills.
- Everything else needed to start learning and practicing is already included in this course.
Over 200,000 5-star ratings and counting
Ruslan Kravchuk
Головне - вчитися і не здаватися
Матеріал хороший, є багато чого вивчити, все для того, щоб стати кращим, і головне - вчитися тому, чого хочете....
Matteo Comune
Завдяки їм я багато чого вчуся…
Завдяки їм я вчуся набагато швидше, тому що вони допомагають зрозуміти все з нуля. Це найкращий сайт, який допомагає людям без досвіду в ІТ...
Yuliana Cadavid
чудовий курс для початківців
чудовий курс для початківців, вони перевіряють ваші знання в кожному уроці...
Elpunzon
Я насолоджуюся своїм досвідом з Codefinity…
Я насолоджуюся своїм досвідом з Codefinity, вивчаючи Python. Самостійний спосіб навчання чудовий, тому що я можу вписати його у свій графік...
Alexandru Alexandru
Приємно вчитися з Codefinity
Приємно вчитися з Codefinity. Це легко і є хороші приклади того, що я тут вивчив...
jacob Templet
Easy to follow along with and provides…
Легко слідувати і надає виклик у моєму повсякденному житті. Виклик змушує мене хотіти вчитися день за днем...
Elan
Codefinity - це всебічне навчання…
Codefinity - це всебічний навчальний інструмент, який допоможе вам розвивати свої навички як інженера-програміста або науковця з даних. Вправи веселі і є хорошим способом відточити свої навички...
Thibault
Вперше вчуся кодувати
Вперше вчуся кодувати і успішно роблю це з Codefinity - дякую...
Adrien Morel
Добре спроектовано для повних початківців
Добре спроектовано для повних початківців, поступовий прогрес і змушує мене почуватися впевнено....
_Gracy
це просто ідеально пояснено
це просто ідеально пояснено! досі я не відчував жодних труднощів, тому що все так добре організовано...
Ruslan Kravchuk
Головне - вчитися і не здаватися
Матеріал хороший, є багато чого вивчити, все для того, щоб стати кращим, і головне - вчитися тому, чого хочете....
Matteo Comune
Завдяки їм я багато чого вчуся…
Завдяки їм я вчуся набагато швидше, тому що вони допомагають зрозуміти все з нуля. Це найкращий сайт, який допомагає людям без досвіду в ІТ...
Yuliana Cadavid
чудовий курс для початківців
чудовий курс для початківців, вони перевіряють ваші знання в кожному уроці...
Elpunzon
Я насолоджуюся своїм досвідом з Codefinity…
Я насолоджуюся своїм досвідом з Codefinity, вивчаючи Python. Самостійний спосіб навчання чудовий, тому що я можу вписати його у свій графік...
Alexandru Alexandru
Приємно вчитися з Codefinity
Приємно вчитися з Codefinity. Це легко і є хороші приклади того, що я тут вивчив...
jacob Templet
Easy to follow along with and provides…
Легко слідувати і надає виклик у моєму повсякденному житті. Виклик змушує мене хотіти вчитися день за днем...
Elan
Codefinity - це всебічне навчання…
Codefinity - це всебічний навчальний інструмент, який допоможе вам розвивати свої навички як інженера-програміста або науковця з даних. Вправи веселі і є хорошим способом відточити свої навички...
Thibault
Вперше вчуся кодувати
Вперше вчуся кодувати і успішно роблю це з Codefinity - дякую...
Adrien Morel
Добре спроектовано для повних початківців
Добре спроектовано для повних початківців, поступовий прогрес і змушує мене почуватися впевнено....
_Gracy
це просто ідеально пояснено
це просто ідеально пояснено! досі я не відчував жодних труднощів, тому що все так добре організовано...
Data Engineer
Сертифікат про завершення
Покажіть свої нові навички. Ви це заслужили
Discover more
Learning tracks
Лише для Ultimate
1 Курс
1 Проєкт
0 Task
Лише для Ultimate
7 Курсів
345 Завдань
Лише для Ultimate
5 Курсів
145 Завдань
Лише для Ultimate
4 Курсів
115 Завдань
Лише для Ultimate
6 Курсів
101 Завдань
Лише для Ultimate
6 Курсів
195 Завдань
Лише для Ultimate
5 Курсів
135 Завдань
Лише для Ultimate
3 Курсів
1 Проєкт
125 Завдань
Лише для Ultimate
7 Курсів
376 Завдань
Лише для Ultimate
4 Курсів
143 Завдань
Лише для Ultimate
5 Курсів
180 Завдань
Лише для Ultimate
5 Курсів
165 Завдань
Лише для Ultimate
6 Курсів
308 Завдань
Лише для Ultimate
6 Курсів
252 Завдань
Лише для Ultimate
8 Курсів
2 Проєктів
185 Завдань
Лише для Ultimate
2 Курсів
80 Завдань
Лише для Ultimate
7 Курсів
293 Завдань
Лише для Ultimate
1 Проєкт
0 Task
Лише для Ultimate
2 Курсів
21 Завдань
Лише для Ultimate
5 Курсів
139 Завдань
Лише для Ultimate
2 Курсів
0 Task
Лише для Ultimate
4 Курсів
81 Завдань
Лише для Ultimate
13 Курсів
555 Завдань
Лише для Ultimate
13 Курсів
555 Завдань
Лише для Ultimate
1 Курс
0 Task
Лише для Ultimate
0 Task
Лише для Ultimate
6 Курсів
180 Завдань
Лише для Ultimate
3 Курсів
70 Завдань
Лише для Ultimate
7 Курсів
282 Завдань
Лише для Ultimate
5 Курсів
239 Завдань
Лише для Ultimate
4 Курсів
125 Завдань
Лише для Ultimate
3 Курсів
119 Завдань
Лише для Ultimate
1 Курс
15 Завдань
Лише для Ultimate
3 Курсів
75 Завдань
Лише для Ultimate
3 Курсів
41 Завдань
Лише для Ultimate
2 Курсів
151 Завдань
Лише для Ultimate
3 Курсів
61 Завдань
Лише для Ultimate
2 Курсів
1 Проєкт
38 Завдань
Лише для Ultimate
3 Курсів
36 Завдань
Лише для Ultimate
2 Курсів
1 Проєкт
38 Завдань
Лише для Ultimate
5 Курсів
134 Завдань
Лише для Ultimate
4 Курсів
159 Завдань
Лише для Ultimate
4 Курсів
154 Завдань
Learning tracks
трек
TEST TRACK 12
Базовий
4.0
(8203)
трек
Full Stack Веб Розробка
Базовий
4.5
(59)
трек
Аналіз та Візуалізація Даних на Python
Середній
4.6
(7)
трек
SQL з Нуля до Героя
Базовий
4.7
(93)
трек
С++ для Початківців
Базовий
4.4
(17)
трек
Python з Нуля до Героя
Базовий
4.7
(284)
трек
Основи Machine Learning
Середній
4.9
(7)
трек
Python Понад Середній Рівень
Базовий
4.7
(3)
трек
Основи Java
Базовий
4.3
(9)
трек
Розробка Ігор з Unity
Базовий
4.6
(7)
трек
Become a Django Developer
Просунутий
4.5
(28)
трек
Flask for Dummies
Середній
4.5
(32)
трек
Основи Frontend Розробки
Базовий
4.6
(53)
трек
Web Developer from Zero to Hero
Базовий
4.6
(57)
трек
Preparation for Data Science
Середній
4.5
(11)
трек
Deep Learning Odyssey
Просунутий
5.0
(3)
трек
Веб-Розробка з C#
Базовий
4.8
(98)
трек
TEST E2E TRACK BEGINNER
Базовий
трек
Test Track
4.7
(3)
трек
Skilled Python BackEnd Developer
Просунутий
4.7
(261)
трек
Test Recalculate
Базовий
трек
Основи Excel
Базовий
4.5
(39)
трек
Full-Stack .NET Developer Journey
Середній
4.8
(129)
трек
Full-Stack .NET Developer Journey
Середній
4.8
(129)
трек
Test track with rating
Просунутий
4.0
(4)
трек
TEST TEST TRACK
Базовий
трек
Основи Аналітика Даних
Базовий
4.7
(116)
трек
C++ Mastery
Просунутий
трек
Java Web
Просунутий
4.5
(31)
трек
Стати Інженером QA
Базовий
4.5
(44)
трек
Video Production With Adobe
Базовий
трек
Інструменти Дизайну UI/UX
Базовий
трек
Test image upload track
Базовий
трек
Essential Office Skills
Базовий
4.6
(24)
трек
GitHub from Zero to Hero
Базовий
трек
No-Code Website Development
Базовий
трек
C Programming & Low-Level Development
Базовий
трек
testes
Базовий
4.7
(3)
трек
Test translation track
Середній
трек
Test CMS Track
Базовий
4.7
(3)
трек
Python for Data Analysis
Середній
4.6
(9)
трек
Digital Marketing Essentials
Базовий
трек
Complete Social Media Management
Базовий
Become a Development expert
Interactive exercises
Learning videos
AI-assistant on all courses
Workspaces for designing your own projects
Ready to get started?
ProBest intro offer | UltimateA complete experience to kickstart your career | |
---|---|---|
85+ Top-Rated courses | ||
Completion certificates | ||
AI-Assistant in all courses | ||
20+ hands-on Real-world projects | ||
Personalized study tracks | ||
Unlimited workspaces | ||
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity Teams