<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">
<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="p_zV1HEkfpOLGe29Y8nUe5xtV5Z8bQVtAiBTQVRWyO_0OrjiUE9Fc-wTElXRV-O6kMfZzbBzH2GgpZlSGYoXNA";gon.locale="en";gon.language="en";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLScNwxM8rjQRRWqW5G6dn6-0NvLUblFemy7EvA9VsJ7Ov5wXqA";
//]]>
</script>
<meta charset="utf-8">
<title>Course React</title>
<meta name="description" content="Skill in building fast, user-friendly interfaces that boosts chances of landing exciting roles at top tech companies">
<link rel="canonical" href="https://hexlet.io/programs/js-react-development">
<link rel="image_src" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTAsInB1ciI6ImJsb2JfaWQifX0=--4c31372fe7c51ddbc0ef0d54fe47eaba88a2b04b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png">
<meta property="og:title" content="Course React">
<meta property="og:description" content="Skill in building fast, user-friendly interfaces that boosts chances of landing exciting roles at top tech companies">
<meta property="og:url" content="https://hexlet.io/programs/js-react-development">
<meta property="og:image" content="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTAsInB1ciI6ImJsb2JfaWQifX0=--4c31372fe7c51ddbc0ef0d54fe47eaba88a2b04b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="Y4z689-YPIt1Eb3m5o9Lfcx0mAzmFD1fBvDVVlYrLScwSpfF_vMHaxIbQg5UEXy8wN4WVyoKJ1OkdR9FG_fy_A" />
<script src="/vite/assets/inertia-CgrHVkgd.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-C1cfMHAs.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-BXKrsWjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-Du9ljYPK.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/RootLayout-CUZzAr0T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DbDKujDz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DATLpQdV.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-BhY0AP_c.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-P1s4q94S.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-BsSGGK2I.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" />
<script src="/vite/assets/application-ZyVHkzwO.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-BokUl44d.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-gQnwoPhY.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-CB1F2-VC.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" media="screen" />
<!-- Google Tag Manager - deferred -->
<script>
// dataLayer stub сразу — пуши работают до загрузки скрипта
window.dataLayer = window.dataLayer || [];
// Сам скрипт — отложенно после load
window.addEventListener('load', function() {
setTimeout(function() {
dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
var j = document.createElement('script');
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
document.head.appendChild(j);
}, 1500);
});
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-WK88TH" style="display:none;visibility:hidden" width="0"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Hexlet logo" height="24" src="https://hexlet.io/vite/assets/logo_en_light-FS-yL6XB.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Menu" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
All courses
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Everything</div>
<div class="text-muted">8</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular categories</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_backend-development">Backend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_frontend-development">Frontend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Testing
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular courses</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Frontend Developer
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
About Hexlet
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">About company
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Blog
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.results">Results</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.career">Career</span>
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Testimonials
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.support">Support</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&promo_name=referal-program&promo_position=promo_position&promo_start=010724&promo_type=link" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.referal_program">Referal Program</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.certificates">Certificates</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.vacancies">Vacancies</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.teams">Teams</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.college">College</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.private_school">Private School</span>
</span></li>
</ul>
</li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Switch theme" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Sign up</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://hexlet.io/session/new" role="button"><span>Sign in</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">
</div>
<main class="mb-6 min-vh-100 h-100">
<link rel="preload" as="image" href="/vite/assets/15-DYqgXwlz.png" fetchPriority="high"/><link rel="preload" as="image" href="/vite/assets/welcome_projects-BEwoYMXD.jpg"/><div id="app" data-page="{"component":"web/programs/show","props":{"errors":{},"locale":"en","language":"en","httpsHost":"https://hexlet.io","host":"hexlet.io","colorScheme":"light","auth":{"user":{"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false}},"cloudflareTurnstileSiteKey":"0x4AAAAAAA15KmeFXzd2H0Xo","vkIdClientId":"51586979","yandexIdClientId":null,"formAuthToken":"8EjRu1yBH08FVhOjaPU5Jzb0jrGnc2GcfiR-nk6_GUqjjryNfeokr2Jc7Evaaw7mOl4A6mtte5DcobSNA2PGkQ","landing":{"stack":{"id":137,"slug":"js-react-development","title":"React","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"high","kind":"track","state":"published","stack_state":"finished","order":null,"duration_in_months":2,"lessons_count":63,"projects_count":1},"id":234,"slug":"js-react-development","title":"React","subtitle":"Skill in building fast, user-friendly interfaces that boosts chances of landing exciting roles at top tech companies","subtitle_for_lists":"","skill_list":["JSX","components","events","forms"],"locale":"en","current":true,"duration_in_months_text":"2 months","stack_slug":"js-react-development","price_text":"from $49","duration_text":"2 months","audience_text":"Translation missing: en.views.web.shared.courses.cards.it.advanced_level"},"projects":[{"id":91,"name":"Chat app (Slack)","slug":"frontend_l4_chat_project_en","state":"published","language":"javascript","description":"## Goal\n\nThe final project focuses on technologies used in frontend developers' daily work, particularly React developers. It is designed to show the range of everyday tasks you are likely to encounter. These include working with [web sockets](https://stackoverflow.blog/2019/12/18/websockets-for-fun-and-profit/), interacting with the REST API, using React (with hooks), Redux (via reduxjs/toolkit), routing on the client, authorization and authentication, and of course bundling (webpack) and deploying.\n\nReact has been the most popular solution for building a frontend for many years. It has gained a lot of features that are important to use wisely while remaining simple in its basic usage. These include hooks, context, direct interaction with the DOM, and various performance optimizations. Most of these topics are part of the project and have been developed to the level necessary for you to acquire them.\n\nBut to build truly large and maintainable applications, React alone is not enough. The issue of state management is key. Despite the presence of such a mechanism in React, it is only used for small projects or single components. Libraries like Redux are responsible for managing the overall application state. Now, in the React world, the reduxjs/toolkit library has become the standard for state management, not only linking Redux and React but also providing a lot of enhancements that greatly simplify work and reduce boilerplate code.\n\nFrontend form programming is a powerful practice with many complexities, typically requiring large amounts of code to implement even simple forms. Code is needed for validation, Ajax, networking issues, input component state saving, and error output, among other things. And the number of form fields is proportional to the amount of code. Fortunately, over the life of React, third-party developers have produced several significant enhancements and effective architectural ways to work with forms. We use one of these libraries ([Formik](https://formik.org/)) in this project.\n\nTo simplify the layout, we use the [react-bootstrap](https://react-bootstrap.github.io/) library in this project. It consists of React-friendly Bootstrap elements and components. Using pre-built components that already have the essential features (e.g., accessibility) and required logic makes it much faster to develop Bootstrap-based interfaces.\n\nNo development is complete without production, and where there is production, there is maintenance. The list of challenges you will face in this project, as in real life, does not end with assembling a bundle, dispatching, and monitoring production errors ([Rollbar](http://rollbar.com/)). \n\n\n## Description\n\nYou need to build a Slack chat clone (a very simplified version)\n\n\n\n","summary":"Build a real-time React/Redux app using AJAX, REST, websockets, React (with hooks) + Redux (@reduxjs/toolkit) + Formik\n","cover":"/vite/assets/welcome_projects-BEwoYMXD.jpg"}],"landingLearningModules":[{"items":[{"id":614,"title":"React and JSX Basics","description":"Components as the fundamental units of React, using JSX, passing data via props","order":1},{"id":615,"title":"Working with Collections and JSX Features","description":"Handling data collections, differences between JSX and HTML, dynamic class handling in components","order":2},{"id":616,"title":"State and Events","description":"Working with state in components, React event system, managing nested components using children","order":3},{"id":617,"title":"Architecture and Data Immutability","description":"Declarative programming, forms, working with immutable data structures, managing state and events in nested components","order":4},{"id":618,"title":"Global State and Optimization","description":"Functional components, Context API for global state, Virtual DOM, basics of testing React applications","order":5},{"id":619,"title":"Lifecycle, Performance, and Working with the DOM","description":"Asynchronous event handling, component lifecycle, performance optimization, using Refs for DOM interaction","order":6}],"id":204,"title":"React","duration_value":1,"duration_unit":"week","exercises_count":24,"quizzes_count":23,"order":1,"project_title":"","project_description":"","project_cover":{"name":"project_cover","record":{"id":204,"title":"React","order":1,"duration_value":1,"duration_unit":"week","exercises_count":24,"quizzes_count":23,"stack_landing_id":234,"tags":["JSX","Props","React Event System","Functional Components","Component Lifecycle"],"created_at":"2025-04-23T12:27:25.625Z","updated_at":"2025-04-30T10:34:47.188Z","project_title":"","project_description":"","project_image_data":null}},"tags":["JSX","Props","React Event System","Functional Components","Component Lifecycle"]},{"items":[{"id":626,"title":"Introduction to Redux and Action Management","description":"Redux fundamentals, action dispatching, store structure and splitting, working with reducers","order":1},{"id":627,"title":"Enhancing Functionality with Middleware","description":"Connecting middleware, extending Redux capabilities, handling middleware logic","order":2},{"id":628,"title":"Getting Started with Redux Toolkit","description":"Integrating Redux Toolkit with React, creating the first app, using slices to manage state","order":3},{"id":629,"title":"Data Normalization and Optimization","description":"Normalizing data in the store, using Entity Adapter for optimization and simplified data handling","order":4},{"id":630,"title":"Advanced Slice Capabilities","description":"Reacting to actions from other slices with extraReducers, performing async requests using createAsyncThunk","order":5},{"id":631,"title":"Automating API Handling with RTK Query","description":"Creating API services using RTK Query, automating HTTP requests, managing data with minimal code","order":6}],"id":206,"title":" Redux Toolkit","duration_value":2,"duration_unit":"week","exercises_count":15,"quizzes_count":11,"order":3,"project_title":"","project_description":"","project_cover":{"name":"project_cover","record":{"id":206,"title":" Redux Toolkit","order":3,"duration_value":2,"duration_unit":"week","exercises_count":15,"quizzes_count":11,"stack_landing_id":234,"tags":["Redux","Redux Toolkit","Slices","Entity Adapter","ExtraReducers","AsyncThunk","RTK Query"],"created_at":"2025-04-23T12:33:03.382Z","updated_at":"2025-04-30T10:34:47.195Z","project_title":"","project_description":"","project_image_data":null}},"tags":["Redux","Redux Toolkit","Slices","Entity Adapter","ExtraReducers","AsyncThunk","RTK Query"]}],"landingQnaItems":[]},"url":"/programs/js-react-development","version":"1656487db0d1dd5f33634fe1070e57e55135cbeb","encryptHistory":false,"clearHistory":false,"flash":{"events":[{"type":"Ecommerce::ProductViewedEvent","name":"Product Viewed","event_id":"7e8fc49e-49f5-4d05-af9c-aa29cc507b77","metadata":{},"data":{"user_id":null,"product_id":"137","name":"React","category":"program","locale":"en","language":"en"}}]}}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}
:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}
:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="overflow:hidden" class=""><style data-mantine-styles="inline">.__m__-_R_1mb_{padding-bottom:var(--mantine-spacing-xs);}@media(min-width: 75em){.__m__-_R_1mb_{padding-bottom:var(--mantine-spacing-xxl);}}</style><div style="--container-size:var(--container-size-lg);overflow:visible" class="m_7485cace mantine-Container-root __m__-_R_1mb_" data-size="lg" data-strategy="block"><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-top:var(--mantine-spacing-xl);margin-bottom:var(--mantine-spacing-xl)" class="m_4081bf90 mantine-Group-root"><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">JSX</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">components</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">events</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">forms</span></div></div><style data-mantine-styles="inline">.__m__-_R_2lmb_{--grid-gutter:var(--mantine-spacing-md);}</style><div style="overflow:visible;height:100%" class="m_410352e9 mantine-Grid-root __m__-_R_2lmb_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_dmlmb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_dmlmb_{--col-flex-grow:auto;--col-flex-basis:58.333333333333336%;--col-max-width:58.333333333333336%;}}</style><div style="flex-direction:column" class="m_96bdd299 mantine-Grid-col __m__-_R_dmlmb_ m_8bffd616 mantine-Flex-root __m__-_R_1ddmlmb_"><style data-mantine-styles="inline">.__m__-_R_6rddmlmb_{width:100%;}@media(min-width: 48em){.__m__-_R_6rddmlmb_{width:80%;}}@media(min-width: 62em){.__m__-_R_6rddmlmb_{width:90%;}}</style><div style="margin-bottom:var(--mantine-spacing-xxl)" class="__m__-_R_6rddmlmb_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size);font-size:var(--mantine-font-size-display-2);line-height:1" class="m_8a5d1357 mantine-Title-root" data-order="1">React</h1><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg);margin-top:var(--mantine-spacing-md)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="lg">Skill in building fast, user-friendly interfaces that boosts chances of landing exciting roles at top tech companies</p></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:auto" class="m_4081bf90 mantine-Group-root"><div class=""><a style="--button-height:var(--button-height-xl);--button-padding-x:var(--button-padding-x-xl);--button-fz:var(--mantine-font-size-xl);--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-md);display:block" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="xl" href="/programs/js-react-development/goto"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Start learning</span></span></a><div style="color:var(--mantine-color-dimmed)" class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pyramid-plus "><path d="M18.719 11.985l-5.889 -9.539a.999 .999 0 0 0 -1.664 0l-8.54 13.836a1.005 1.005 0 0 0 .386 1.452l8.092 4.054a1.994 1.994 0 0 0 1.789 0l.149 -.074"></path><path d="M12 2v20"></path><path d="M16 19h6"></path><path d="M19 16v6"></path></svg></div><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Included in subscription (over 50 courses)</p></div></div><div style="margin-top:auto" class=""><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p></div></div></div><style data-mantine-styles="inline">.__m__-_R_lmlmb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_lmlmb_{--col-flex-grow:auto;--col-flex-basis:41.66666666666667%;--col-max-width:41.66666666666667%;}}</style><div style="overflow:visible" class="m_96bdd299 mantine-Grid-col __m__-_R_lmlmb_ mantine-visible-from-md"><div style="overflow:visible;height:calc(29.375rem * var(--mantine-scale));position:relative" class=""><style data-mantine-styles="inline">@media(min-width: 62em){.__m__-_R_bdlmlmb_{right:calc(-10rem * var(--mantine-scale));}}@media(min-width: 75em){.__m__-_R_bdlmlmb_{right:calc(-6.875rem * var(--mantine-scale));}}</style><img style="width:calc(43.75rem * var(--mantine-scale));position:absolute" class="m_9e117634 mantine-Image-root __m__-_R_bdlmlmb_" src="/vite/assets/15-DYqgXwlz.png" fetchPriority="high"/></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_6mb_{padding-block:var(--mantine-spacing-md);}@media(min-width: 75em){.__m__-_R_6mb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-lg)" class="m_7485cace mantine-Container-root __m__-_R_6mb_" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_d6mb_{margin-bottom:var(--mantine-spacing-xl);}@media(min-width: 48em){.__m__-_R_d6mb_{margin-bottom:var(--mantine-spacing-xxl);}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);font-size:var(--mantine-font-size-display-3)" class="m_8a5d1357 mantine-Title-root __m__-_R_d6mb_" data-order="2">Learning syllabus</h2><div style="--accordion-chevron-size:auto" class="m_9bdbb667 mantine-Accordion-root" data-variant="separated" id="mantine-_R_l6mb_" data-accordion="true"><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item" data-active="true"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-active="true" data-chevron-position="right" type="button" aria-expanded="true" aria-controls="mantine-_R_l6mb_-panel-module-204" id="mantine-_R_l6mb_-control-module-204"><span class="m_3f35ae96 mantine-Accordion-chevron" data-rotate="true" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-h3)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1<!-- -->. <!-- -->React</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;color:var(--mantine-color-dimmed)" class="m_4081bf90 mantine-Group-root"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">24 exercises</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">23 quizzes</p></div></div><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">JSX</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Props</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">React Event System</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Functional Components</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Component Lifecycle</span></div></div></div></span></button><div style="box-sizing:border-box;opacity:1;transition:opacity 200ms ease;padding-top:var(--mantine-spacing-xl)" class="m_df78851f mantine-Accordion-panel" aria-hidden="false" role="region" id="mantine-_R_l6mb_-panel-module-204" aria-labelledby="mantine-_R_l6mb_-control-module-204"><div class="m_4ba554d4 mantine-Accordion-content"><style data-mantine-styles="inline">.__m__-_R_barl6mb_{--sg-spacing-x:var(--mantine-spacing-md);--sg-spacing-y:var(--mantine-spacing-md);--sg-cols:1;}@media(min-width: 36em){.__m__-_R_barl6mb_{--sg-cols:2;}}@media(min-width: 62em){.__m__-_R_barl6mb_{--sg-cols:3;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_barl6mb_"><style data-mantine-styles="inline">.__m__-_R_1mrarl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_1mrarl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_1mrarl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">React and JSX Basics</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Components as the fundamental units of React, using JSX, passing data via props</p></div><style data-mantine-styles="inline">.__m__-_R_2mrarl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_2mrarl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_2mrarl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Working with Collections and JSX Features</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Handling data collections, differences between JSX and HTML, dynamic class handling in components</p></div><style data-mantine-styles="inline">.__m__-_R_3mrarl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_3mrarl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_3mrarl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">State and Events</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Working with state in components, React event system, managing nested components using children</p></div><style data-mantine-styles="inline">.__m__-_R_4mrarl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_4mrarl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_4mrarl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Architecture and Data Immutability</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Declarative programming, forms, working with immutable data structures, managing state and events in nested components</p></div><style data-mantine-styles="inline">.__m__-_R_5mrarl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_5mrarl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_5mrarl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Global State and Optimization</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Functional components, Context API for global state, Virtual DOM, basics of testing React applications</p></div><style data-mantine-styles="inline">.__m__-_R_6mrarl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_6mrarl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_6mrarl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Lifecycle, Performance, and Working with the DOM</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Asynchronous event handling, component lifecycle, performance optimization, using Refs for DOM interaction</p></div></div></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item" data-active="true"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-active="true" data-chevron-position="right" type="button" aria-expanded="true" aria-controls="mantine-_R_l6mb_-panel-module-206" id="mantine-_R_l6mb_-control-module-206"><span class="m_3f35ae96 mantine-Accordion-chevron" data-rotate="true" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-h3)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2<!-- -->. <!-- --> Redux Toolkit</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;color:var(--mantine-color-dimmed)" class="m_4081bf90 mantine-Group-root"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">15 exercises</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">11 quizzes</p></div></div><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Redux</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Redux Toolkit</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Slices</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Entity Adapter</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">ExtraReducers</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">AsyncThunk</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">RTK Query</span></div></div></div></span></button><div style="box-sizing:border-box;opacity:1;transition:opacity 200ms ease;padding-top:var(--mantine-spacing-xl)" class="m_df78851f mantine-Accordion-panel" aria-hidden="false" role="region" id="mantine-_R_l6mb_-panel-module-206" aria-labelledby="mantine-_R_l6mb_-control-module-206"><div class="m_4ba554d4 mantine-Accordion-content"><style data-mantine-styles="inline">.__m__-_R_bbbl6mb_{--sg-spacing-x:var(--mantine-spacing-md);--sg-spacing-y:var(--mantine-spacing-md);--sg-cols:1;}@media(min-width: 36em){.__m__-_R_bbbl6mb_{--sg-cols:2;}}@media(min-width: 62em){.__m__-_R_bbbl6mb_{--sg-cols:3;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_bbbl6mb_"><style data-mantine-styles="inline">.__m__-_R_1mrbbl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_1mrbbl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_1mrbbl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Introduction to Redux and Action Management</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Redux fundamentals, action dispatching, store structure and splitting, working with reducers</p></div><style data-mantine-styles="inline">.__m__-_R_2mrbbl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_2mrbbl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_2mrbbl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Enhancing Functionality with Middleware</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Connecting middleware, extending Redux capabilities, handling middleware logic</p></div><style data-mantine-styles="inline">.__m__-_R_3mrbbl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_3mrbbl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_3mrbbl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Getting Started with Redux Toolkit</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Integrating Redux Toolkit with React, creating the first app, using slices to manage state</p></div><style data-mantine-styles="inline">.__m__-_R_4mrbbl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_4mrbbl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_4mrbbl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Data Normalization and Optimization</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Normalizing data in the store, using Entity Adapter for optimization and simplified data handling</p></div><style data-mantine-styles="inline">.__m__-_R_5mrbbl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_5mrbbl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_5mrbbl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Advanced Slice Capabilities</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Reacting to actions from other slices with extraReducers, performing async requests using createAsyncThunk</p></div><style data-mantine-styles="inline">.__m__-_R_6mrbbl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_6mrbbl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_6mrbbl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Automating API Handling with RTK Query</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Creating API services using RTK Query, automating HTTP requests, managing data with minimal code</p></div></div></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_amb_{padding-block:var(--mantine-spacing-md);}@media(min-width: 75em){.__m__-_R_amb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-lg)" class="m_7485cace mantine-Container-root __m__-_R_amb_" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_damb_{margin-bottom:var(--mantine-spacing-xl);}@media(min-width: 48em){.__m__-_R_damb_{margin-bottom:var(--mantine-spacing-xxl);}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);font-size:var(--mantine-font-size-display-3)" class="m_8a5d1357 mantine-Title-root __m__-_R_damb_" data-order="2">Projects</h2><style data-mantine-styles="inline">.__m__-_R_lamb_{--carousel-slide-gap:0rem;--carousel-slide-size:100%;}</style><div style="--carousel-control-size:calc(1.625rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_lamb_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap;height:100%" class="m_4081bf90 mantine-Group-root"><div style="--ar-ratio:1.3333333333333333" class="m_71ac47fc mantine-AspectRatio-root"><img style="width:calc(25rem * var(--mantine-scale))" class="m_9e117634 mantine-Image-root mantine-visible-from-sm" src="/vite/assets/welcome_projects-BEwoYMXD.jpg"/></div><div style="height:100%" class=""><p style="font-size:var(--mantine-font-size-h1)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Chat app (Slack)</p><p style="white-space:pre-line" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Build a real-time React/Redux app using AJAX, REST, websockets, React (with hooks) + Redux (@reduxjs/toolkit) + Formik
</p></div></div></div></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_emb_{padding-block:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_emb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-lg)" class="m_7485cace mantine-Container-root __m__-_R_emb_" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_demb_{margin-bottom:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_demb_{margin-bottom:var(--mantine-spacing-xxl);}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);font-size:var(--mantine-font-size-display-3)" class="m_8a5d1357 mantine-Title-root __m__-_R_demb_" data-order="2">How learning is organised</h2><style data-mantine-styles="inline">.__m__-_R_lemb_{--grid-gutter:var(--mantine-spacing-md);}</style><div class="m_410352e9 mantine-Grid-root __m__-_R_lemb_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_3dlemb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_3dlemb_{--col-flex-grow:auto;--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_3dlemb_"><div style="--accordion-chevron-size:auto" class="m_9bdbb667 mantine-Accordion-root" data-variant="separated" id="mantine-_R_bbdlemb_" data-accordion="true"><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item" data-active="true"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-active="true" data-chevron-position="right" type="button" aria-label="Simple, clear and always at hand" aria-expanded="true" aria-controls="mantine-_R_bbdlemb_-panel-theory" id="mantine-_R_bbdlemb_-control-theory"><span class="m_3f35ae96 mantine-Accordion-chevron" data-rotate="true" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Simple, clear and always at hand</p></div></div></span></button><div style="box-sizing:border-box;opacity:1;transition:opacity 200ms ease" class="m_df78851f mantine-Accordion-panel" aria-hidden="false" role="region" id="mantine-_R_bbdlemb_-panel-theory" aria-labelledby="mantine-_R_bbdlemb_-control-theory"><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">You learn the theory in a convenient text format - easy to read even from your phone. Live examples help you immediately understand how everything works in practice. The material is organised in such a way that you move step by step from simple to complex without missing important details</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="Check and consolidate knowledge" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-quizzes" id="mantine-_R_bbdlemb_-control-quizzes"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Check and consolidate knowledge</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-quizzes" aria-labelledby="mantine-_R_bbdlemb_-control-quizzes" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">After each topic, you go through quizzes to make sure you understand everything. Questions of varying levels of difficulty will give you the opportunity to both test your knowledge base and practise your application of knowledge</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="Learn from real-life challenges" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-exercises" id="mantine-_R_bbdlemb_-control-exercises"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn from real-life challenges</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-exercises" aria-labelledby="mantine-_R_bbdlemb_-control-exercises" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">We've created a convenient virtual environment where you solve problems right in your browser. You have a code editor, a console and automatic tests that instantly show results</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="AI mentor in your studies" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-totaAI" id="mantine-_R_bbdlemb_-control-totaAI"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">AI mentor in your studies</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-totaAI" aria-labelledby="mantine-_R_bbdlemb_-control-totaAI" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">Our AI-powered Learning Assistant is like a mentor that's always on hand. It understands where you are in the course, what you need to do, and what your code looks like. If something goes wrong, you get clear and helpful hints right away</p></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_5dlemb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_5dlemb_{--col-flex-grow:auto;--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div style="text-align:center" class="m_96bdd299 mantine-Grid-col __m__-_R_5dlemb_"><div style="--ar-ratio:1.7777777777777777" class="m_71ac47fc mantine-AspectRatio-root"><div style="background:var(--mantine-color-gray-1);width:calc(37.5rem * var(--mantine-scale));height:100%" class=""></div></div></div></div></div></div><div style="background-color:light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><style data-mantine-styles="inline">.__m__-_R_dimb_{padding-block:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_dimb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-md)" class="m_7485cace mantine-Container-root __m__-_R_dimb_" data-size="md" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_2timb_{--sg-spacing-x:0rem;--sg-spacing-y:0rem;--sg-cols:1;}@media(min-width: 36em){.__m__-_R_2timb_{--sg-spacing-x:var(--mantine-spacing-xs);--sg-spacing-y:var(--mantine-spacing-xs);--sg-cols:2;}}@media(min-width: 48em){.__m__-_R_2timb_{--sg-spacing-x:var(--mantine-spacing-xxl);--sg-spacing-y:var(--mantine-spacing-xxl);}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_2timb_"><div style="margin-bottom:var(--mantine-spacing-lg)" class=""><p style="font-size:var(--mantine-font-size-h3);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Subscription 3,900 ₽/month</p><p style="margin-bottom:var(--mantine-spacing-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">The subscription gives access to all courses in the "subscription" catalog. Cancel anytime. Company payments are available.</p><a style="--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="lg" href="https://hexlet.io/subscription/new?back_to=https%3A%2F%2Fhexlet.io%2Fprograms%2Fjs-react-development"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Subscribe →</span></span></a></div><div style="align-items:center;height:100%" class="m_8bffd616 mantine-Flex-root __m__-_R_lmtimb_"><ul style="padding:0rem" class="m_abbac491 mantine-List-root"><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">50+ courses</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Lifetime access to theory</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Learn in parallel</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Learning with an AI assistant</span></div></li></ul></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">About Hexlet</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">About us</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io/category/4316" data-target="_blank" role="button">Help</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Site Map</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Learn</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend-development">Backend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_frontend-development">Frontend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_python">Python
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Testing
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_beginners">Popular Courses For Beginners</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Frontend Developer</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_advanced">Popular Courses For Advanced</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/web-development-free">Fundamentals of Web Development</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-development">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/css-animation">CSS Animation</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/http-api">HTTP API</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/layout-designer-positioning">Position CSS</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/cli-basics">Command line basics</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/git-basics-free">Git fundamentals</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Facebook" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.facebook.com/hexlethq"><span class="bi bi-facebook"></span>
</a></li>
<li class="me-3">
<a aria-label="Instagram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.instagram.com/hello_hexlet/"><span class="bi bi-instagram"></span>
</a></li>
<li>
<a aria-label="Twitter" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://twitter.com/Hexlet_IO"><span class="bi bi-twitter-x"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:%2B7%20717%20272%2076%2070">+7 717 272 76 70</a>
<span class="d-block opacity-50 small">free call</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Legal</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer"><span class="translation_missing" title="translation missing: en.layouts.footer_content.offer">Offer</span></a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts"><span class="translation_missing" title="translation missing: en.layouts.footer_content.contacts">Contacts</span></a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>TOO "Hexlet"</div>
<div>The Republic of Kazakhstan, Almaty</div>
<div>Auezova St., 14A</div>
<div>BIN 230340043714
</div>
</div>
</div>
</div>
</footer>
<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-CIOaBlj-.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DejNWqwz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-DZwEN4Zo.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-CJocDKTE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-DH3_MBnL.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-Cj65YiRw.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-Csl7vw8x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-DeAQqnBE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-CN66HKVH.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-DQgTDFJJ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-BcxwEZ7X.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/prop-types-DGBR76ns.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>