Track
Сертифікат
Станьте React Розробником
4.7+
★★★★★
★★★★★
67 відгуки
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
- 171 chapters
- 27 hours
- 119 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Попередній перегляд
Module 5 / Foundations of React Native
The comprehensive introduction to React Native outlines the prerequisites and course objectives and offers guidance on efficient learning practices. Understand what to expect from the course and how to approach the learning journey effectively.
Explore the foundational concepts of React Native, from setting up the development environment to understanding React Native components. Get hands-on experience building a simple app and laying the groundwork for more complex projects.
- Setting Up the React Native ProjectПопередній перегляд
- Understanding React Native ComponentsПопередній перегляд
- Working with View and Text ComponentsПопередній перегляд
- Using the Image ComponentПопередній перегляд
- Styling in React NativeПопередній перегляд
- Challenge: Apply Styles to ComponentsПопередній перегляд
- Working with TouchableOpacity for User InteractionПопередній перегляд
- Implementing ScrollView for Scrolling ContentПопередній перегляд
- Rendering Lists in React NativeПопередній перегляд
- Challenge: Build an Interactive Resort ListПопередній перегляд
- Quiz: React Native BasicsПопередній перегляд
Learn efficient management of dynamic states, props, navigation, and hooks to create polished React Native applications.
- Managing State in React NativeПопередній перегляд
- Using Props for Component CustomizationПопередній перегляд
- Challenge: Mastering Props and StateПопередній перегляд
- Navigation in React NativeПопередній перегляд
- Implementing Stack NavigationПопередній перегляд
- Implementing Tab NavigationПопередній перегляд
- Using React Hooks in React NativeПопередній перегляд
- Quiz: React Native State, Props, and NavigationПопередній перегляд
Explore advanced aspects of React Native development, covering crucial topics such as Input handling, StatusBar, ActivityIndicators, and more. Dive deep into practical techniques for building sophisticated mobile applications.
- Using the Switch Component for TogglesПопередній перегляд
- Managing Loading States with ActivityIndicatorПопередній перегляд
- Working with the Modal ComponentПопередній перегляд
- Handling User Input with TextInputПопередній перегляд
- Challenge: Dark/Light Mode Toggler with Activity IndicatorПопередній перегляд
- Quiz: Advanced React Native ComponentsПопередній перегляд
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
7 Курсів
293 Завдань
Лише для Ultimate
6 Курсів
169 Завдань
Лише для Ultimate
4 Курсів
115 Завдань
Лише для Ultimate
6 Курсів
101 Завдань
Лише для Ultimate
4 Курсів
143 Завдань
Лише для Ultimate
3 Курсів
38 Завдань
Лише для Ultimate
7 Курсів
376 Завдань
Лише для Ultimate
2 Курсів
1 Проєкт
57 Завдань
Лише для Ultimate
7 Курсів
346 Завдань
Лише для Ultimate
6 Курсів
309 Завдань
Лише для Ultimate
5 Курсів
146 Завдань
Лише для Ultimate
5 Курсів
135 Завдань
Лише для Ultimate
3 Курсів
71 Завдань
Лише для Ultimate
6 Курсів
239 Завдань
Лише для Ultimate
5 Курсів
239 Завдань
Лише для Ultimate
4 Курсів
125 Завдань
Лише для Ultimate
3 Курсів
119 Завдань
Лише для Ultimate
3 Курсів
75 Завдань
Лише для Ultimate
4 Курсів
159 Завдань
Лише для Ultimate
4 Курсів
154 Завдань
Learning tracks
трек
Веб-Розробка з C#
Базовий
4.8
(2364)
трек
Python з Нуля до Героя
Базовий
4.7
(8366)
трек
SQL з Нуля до Героя
Базовий
4.7
(2598)
трек
С++ для Початківців
Базовий
4.5
(491)
трек
Розробка Ігор з Unity
Базовий
4.7
(76)
трек
Основи Excel
Базовий
4.7
(309)
трек
Основи Java
Базовий
4.7
(199)
трек
Python Понад Середній Рівень
Базовий
4.7
(69)
трек
Full Stack Веб Розробка
Базовий
4.7
(860)
трек
Основи Frontend Розробки
Базовий
4.7
(832)
трек
Аналіз та Візуалізація Даних на Python
Середній
4.7
(571)
трек
Основи Machine Learning
Середній
4.6
(125)
трек
C++ Mastery
Просунутий
4.8
(16)
трек
Java Web
Просунутий
4.7
(1168)
трек
Стати Інженером QA
Базовий
4.7
(725)
трек
Video Production With Adobe
Базовий
5.0
(5)
трек
Інструменти Дизайну UI/UX
Базовий
5.0
(4)
трек
Essential Office Skills
Базовий
4.8
(245)
трек
Digital Marketing Essentials
Базовий
5.0
(3)
трек
Complete Social Media Management
Базовий
5.0
(1)
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