Про курс
Курс “React поглиблений” продовжує занурювати вас у можливості популярного фреймворка для розробки вебдодатків. Під час проходження програми ви розроблятимете вебзастосунок на основі публічного API, використовуючи різноманітні техніки, які пропонує React та його суміжні бібліотеки.
На курсі ви навчитеся впроваджувати роутинг за допомогою бібліотеки React Router, використовувати CSS препроцесори та UI бібліотеки, навчитеся використовувати публічні API для отримання даних. Також ви будете використовувати Redux Toolkit для спрощення коду та розв’язання багатьох проблем, реалізуєте можливість логіну через сторонній identity provider та багато іншого.
Цей курс входить до спеціальності:
Попередні Вимоги
Для гарного розуміння матеріалів даного курсу рекомендовано пройти курс React Базовий, мати базові знання CSS та HTML та досвід використання HTTP API.
Ви навчитеся
- Будувати state management за допомогою Redux і Redux Toolkit.
- Розуміти основи популярних CSS-фреймворків для стилізації.
- Використовувати бібліотеку Material UI і її компоненти замість ручної стилізації.
- Використовувати React hooks і створювати власні (кастомні) хуки.
- Розуміти, як дослідити проблеми швидкодії React застосунку.
- Використовувати React Developer Tools для дослідження дерева компонентів та профайлингу.
- Розв’язувати проблеми з memory leak.
- Використовувати React.lazy та Suspense для динамічного завантаження модулів, React Router для динамічного завантаження маршрутів.
- Використовувати RTK Query для звертання до API.
- Додавати автентифікацію для застосунку на основі OAuth2.
- Використовувати мову запитів GraphQL для здійснення запитів та зміни даних на сервері.
- Познайомитись із концепцією Server-side Rendering (SSR).
- Дізнатися про Jest Testing Framework та його альтернативи. Навчитися тестувати компоненти за допомогою React Testing Library.
- 10 год 5 хв
- 15
- українська
Що входить до курсу
×
Ви дійсно бажаєте відкрити доступ до тестування за курсом React Поглиблений на 40 днів?
На першому уроці курсу ми розглянемо загальний план уроків курсу. Ви навчитесь створювати 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.
Доступ до повного курсу з навчальними матеріалами та тестуванням на 30 днів за 19,99 USD
Придбати
Запитання і відповіді
Онлайн курси мають низку переваг перед офлайн форматом:
- Незалежність від локації. Онлайн дозволяє навчатися де завгодно.
- Збереження часу та грошей на дорогу. Ви економите час та гроші з поїздок на курси та назад.
- Онлайн курси дешевші. Немає потреби в приміщенні та ноутбуках для студентів, тому вартість нижча
- Комфортний темп навчання, постійний доступ до інформації. Навчання у вашому темпі будь-коли і будь-де 24/7. Також є доступ до записаних уроків, чого немає в офлайн форматі.
На ITVDN є 2 формати навчання: Live Online та відео курси. Ціна навчання залежить від обраного вами способу навчання.
Якщо ви хочете навчатися самостійно у форматі відео курсів, вартість навчання складе в середньому 10-15 USD на місяць в залежності від обраного вами пакету підписки.
Live Online – це онлайн навчання з тренером у групах разом із іншими студентами. Навчання у даному форматі коштує в середньому 6-7 USD за одну годину.
Залежить від того, скільки уваги програмуванню ви виділятимете щоденно, яка саме це мова і який у вас досвід кодингу. Середній час на опанування однієї мови за умови регулярних занять хоча б 2 год/день:
- новачки – від 3 до 6 місяців;
- ті, хто мають базові знання з іншої мови – від 1 до 3 місяців;
- професійні програмісти – до 1 місяця.
Найкращий варіант інвестиції часу – 8 годин щоденно (20% теорії + 80% практики). Більше практики – швидше опанування програмування.
Для опанування ІТ-спеціальності треба виділити не менше 500 годин, з яких близько 100 годин – на перегляд відео уроків або відвідування онлайн занять із ментором, а 400 – на виконання практичних завдань за пройденими темами.
В залежності від того, скільки часу ви готові виділяти на навчання в день, ви зможете пройти програму за 3-8 місяців. Якщо у вас є певна база знань з ІТ, кількість необхідного часу буде меншою.
Також тривалість навчання залежить від обраної вами спеціальності, оскільки набір технологій, які ви маєте вивчити, буде різним.
Починати варто з тих, які містять в назві слово “Стартовий”. Такі курси мають вступний матеріал для знайомства з мовою або технологією.
Якщо ж ви плануєте навчатися за конкретною спеціальністю у форматі відео курсів, перейдіть на сторінку спеціальності і прокрутіть до заголовку “Відео курси за спеціальністю …”. Нижче буде список відео курсів, котрі відсортовано в порядку необхідності вивчення.
Ще нижче ви знайдете Roadmap зі спеціальності – путівник, на якому зображені відео курси у вигляді дерева, що також вас легко зорієнтує у послідовності проходження курсів.
Якщо ви обираєте Live Online навчання з тренером, все дуже просто:
- відвідуйте всі заняття, вчасно виконуйте д/з;
- додатково дивіться відео уроки на ITVDN;
- після кожного уроку проходьте коротке тестування;
- практикуйтеся в Інтерактивному практикумі;
- спілкуйтеся з одногрупниками в ході вирішення д/з, задавайте питання ментору на уроках та поза ними;
- в кінці кожного курсу складайте екзамен на TestProvider (та отримуйте Сертифікати);
- в кінці всього навчання проходьте екзамен зі спеціальності і отримайте Диплом.
Ми маємо спеціальний розділ – “Вакансії”, котрий допомагає нашим студентам шукати першу роботу в ІТ. Детальніше про можливості та призначення розділу за посиланням.
А для тих, хто навчається онлайн з ментором, у нас додатково передбачена індивідуальна допомога HR-фахівця щодо підготовки до працевлаштування з першого дня навчання і до отримання першого job-оферу. Вона включає в себе допомогу в оформленні соцмереж, підготовці резюме, проведення пробної співбесіди, надання порад щодо пошуку роботи та самопрезентації тощо.
На жаль, дана послуга на ITVDN не передбачена, однак ви можете замовити індивідуальну консультацію з нашим ментором. Деталі ви знайдете за посиланням.
На ITVDN відсутні курси для дітей, тому комфортний вік для початку навчання за нашими матеріалами – від 14 років.
Ніяких вимог до вашого рівня англійської ми не висуваємо, оскільки всі навчальні матеріали йдуть російською або українською мовами. При цьому базові знання англійської будуть корисні для комфортного пошуку інформації в гуглі, читання документацій в інтернеті тощо.
На ITVDN можна пройти повне навчання з нуля до спеціаліста рівня Trainee/Junior. Якщо ви вже практикуючий розробник, наші відео курси допоможуть поглибити ваші знання до рівня Middle.
Після закінчення дії вашої підписки доступ до відео курсів, на жаль, буде закрито. Однак ви зможете користуватися тими навчальними матеріалами, які ви завантажили на свій девайс під час навчання.
Ні, знижки не додаються.
Відгуки наших студентів
Відгуки в DOU
4,9/5 - 200 відгуків
Відгуки в Facebook
5,0/5 - 707 відгуків
Відгуки в Google
4,9/5 - 836 відгуків