Кастомні хуки та memory leak
ITVDN: курси програмування
Відеокурси з
програмування

    Обери свою IT спеціальність

    Підписка

    Обери свою IT спеціальність

    Підписка

      ×

      Ви відкрили доступ до тесту! Пройти тест

      Ви дійсно бажаєте відкрити доступ до тестування за курсом React Поглиблений на 40 днів?

      ВІДЕОУРОК № 6. Кастомні хуки та memory leak

      Для перегляду повної версії відеокурсу, онлайн тестування та отримання доступу до додаткових навчальних матеріалів придбайте курс Придбати курс
      Для перегляду всіх відеокурсів ITVDN, представлених у Каталозі, а також для отримання доступу до навчальних матеріалів та онлайн тестування придбайте підписку Придбати підписку

      На першому уроці курсу ми розглянемо загальний план уроків курсу. Ви навчитесь створювати React проєкт на основі TypeScript. Зможете додати роутинг за допомогою бібліотеки React Router. Розглянете спосіб налаштування базового Redux store з простим редюсером для відображення списку елементів. Також створите компонент для відображення інформації про фільми і налаштуєте СSS стилі для нього.

      Читати далі...

      На уроці ви розглянете що таке CSS препроцесори на прикладі Sass. Навчитесь використовувати CSS модулі та писати базові @media запити. Налаштуєте стилі для картки фільму та layout сторінки.

      Читати далі...

      Розглянемо UI бібліотеки, їхні типи та переваги. Зробимо огляд двох популярних UI бібліотек Material UI та Bootstrap. Познайомимось із підходом CSS-in-JS, його перевагами та недоліками. Також розглянемо базові можливості бібліотек emotion та styled-components.

      Читати далі...

      На уроці познайомимось із TMDB API для того, щоб відобразити список фільмів. Налаштуємо developer account та отримаємо token. Зробимо запит до Now Playing API із нашого проєкту за допомогою fetch. Збережемо список фільмів у redux store. Наприкінці підключимо бібліотеку Material UI і використаємо її компоненти замість ручної стилізації.

      Читати далі...

      На уроці розглянемо використання контексту в React разом із useContext хуком. Навчимось застосовувати хук useRef. Застосуємо портали для рендерингу поза піддеревом елемента. Додатково розглянемо error boundary для обробки помилок в компонентах.

      Читати далі...

      Навчитесь створювати власні (кастомні) хуки на прикладі useIntersectionObserver для завантаження фільмів під час скролінгу сторінки. Подивитесь на потенційний memory leak під час використання useEffect.

      Читати далі...

      Пригадаємо основні особливості HTML форм. Познайомитесь із загальними концепціями бібліотек Formik та React Hook Form та їхніми відмінностями. Створите форму для фільтрації фільмів за допомогою React Hook Form та компонентів Material UI.

      Читати далі...

      Розглянемо поняття мемоізації на прикладі React.memo, useMemo та useCallback. Подивимось, коли варто і не варто застосовувати React.memo та які переваги вона дає. Використаємо ці функції в нашому проєкті на практиці.

      Читати далі...

      На уроці познайомимось із React Developer Tools для дослідження дерева компонентів та профайлингу. Також розглянемо альтернативні способи програмного профайлингу частини дерева компонентів. Навчимось використовувати React.lazy та Suspense для динамічного завантаження модулів. Додатково подивимось на можливості React Router для динамічного завантаження маршрутів.

      Читати далі...

      Розглянемо проблеми, що виникають при роботі із core Redux бібліотекою на прикладі boilerplate коду. Познайомимось із бібліотекою Redux Toolkit, що покликана розв’язати ці проблеми. Подивимось на можливості RTK Query для завантаження даних в Redux застосунках.

      Читати далі...

      На уроці перепишемо Redux store та запити до API, використовуючи RTK Query. Розглянемо спосіб реалізації infinite scroll за допомогою RTK Query. Також будемо використовувати Redux DevTools для дослідження запитів в store.

      Читати далі...

      Познайомимось із мовою запитів GraphQL та основними елементами синтаксису для здійснення запитів та зміни даних на сервері. Розглянемо систему типів GraphQL для створення схеми даних.

      Обговоримо популярні бібліотеки для роботи з GraphQL в React та навчимось на практиці робити запити.

      Читати далі...

      Розглянемо поняття автентифікації та авторизації. Додамо можливість логіну через сторонній identity provider на прикладі Auth0. Створимо приватні маршрути для захисту сторінок, що вимагають логіну. Познайомимось із протоколом OpenID Connect та JWT токенами. Навчимось робити запити до API, що вимагає авторизацію через access токени.

      Читати далі...

      Познайомимось із концепцією Server-side Rendering (SSR), та порівняємо її із звичним рендерингом. Розглянемо Server React DOM APIs та hydration, які дають змогу реалізувати SSR. Зробимо огляд React meta-frameworks (Next.js, Remix та ін.). та їхньої ролі в SSR. Розглянемо React Server Components та їхню відмінність від звичайного Server-side Rendering.

      Читати далі...

      Поговоримо про те, які переваги дає написання тестів розробнику. Розглянемо основні типи тестів та їхнє застосування в frontend застосунках. Познайомимось із Jest Testing Framework та його альтернативами. Навчимося тестувати компоненти за допомогою React Testing Library.

      Читати далі...
      ПОКАЗАТИ ВСЕ

      Купуй передплатуз доступом до всіх курсів та сервісів

      Бібліотека сучасних IT знань у зручному форматі

      Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      59.99 $
      Придбати
      Преміум Plus
      • Усі відеокурси на 12 місяців
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      100.00 $
      199.99 $
      Придбати
      Акція
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      89.99 $
      Придбати
      коментарі та обговорення
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.