Структура за темами

  • Загальне

  • Загальна інформація про курс

    • Information Вікі


      Савіцький Роман

      Telegram @RomanSavitskyi

      gitlab @Savitskyi 
      github roman-savitskyi
      bitbucket Roman.Savitskyi@infopulse.com

  • Лекційні матеріали

    • Лекція №1. Рендеринг, NodeJS Файл

      Перша оглядова лекція, на якій студент вивчає поняття фреймворк, бібліотека, отримує короткий опис трійки веб бібліотек. Додатково розглядається конфігурування реакт, create-react-app, а також використання NodeJS при побудові реакт застосунків

    • Лекція №2 "Props, state, events" Файл

      На лекції детально розглянуто поняття компоненту, властивостей, стану компонентів. а також подій. Проведені порівняння зі звичайним JS, а також розглянуто поняття синтаксичних подій

    • Лекція №3. "Export, import, conditional rendering, list, keys Файл

      Лекція, в якій було розглянуто експорт, імпорт, бандл і вебпак, як відбувається збірка і як можна аналізувати її.
      Додатково розкрито умовний рендеринг, список, ключі. Також для ознайомлення додано роадмапи для вивчення реакту.

    • Лекція №4. "Хуки" Файл

      Що таке хук? Яку проблему вирішує хук? useState useEffect useMemo useCallback useRef

    • Лекція №5 "Custom hooks, portals, fragments" Файл

      Розібрали можливості фрагментів, найбільш корисні використання порталів, кастомних хуків. А також подивились на добірку react-use

    • Лекція №6 "Basic Forms. React-hook-form, yup Файл

      Розібрали керовані, некеровані компоненти, як і коли використовувати форми, основні особливості textarea, select, input["file"], а також як працювати з комплексними формами з використанням сторонніх бібліотек (React-hook-form, yup)

    • Лекція №7. "CSS, CSS in JS, CSS modules" Файл

      Відео тут

      На лекції розглянули переваги та недоліки застосування різних підходів для роботи зі стилями. 

      CSS, CSS in JS, CSS modules, препроцесори

    • Лекція №8 "React Router v6. React.lazy. Suspense" Файл

      Відео тут

      На лекції розібрали роботу роутера 6ї версії, динамічний роутинг, вкладений роутинг, хуки роутингу, а також принципи завантаження сторінки ліниво, та переваги, недоліки лейзі підходу.

    • Лекція №9 "useContext, propTypes, renderProps" Файл

      Детально розібрали можливості renderProps, а також ознайомились з useContext. За допомогою інтергованого відео отримали інформацію щодо тонких можливостей useContext. 
      Поверхнево подивились на propTypes з точки зору можливостей використання.

    • Лекція №10 "React, redux, redux toolkit" Файл

      Відео лекції тут

      На лекції розглянуто можливості стейт менеджерів, розібрано редакс і можливі покращення з редакс тулкітом

  • Практичні завдання

    • Лабораторна робота "Рендеринг, NodeJS" 15.09 Завдання

      Завдання тут 

      Виконати лабораторну роботу по компонентам, рендеру данних.
      Максимальний бал виконання - 9.
      Час виконання - до 30.09.22.

      Критерії оцінювання

      • Завдання виконане вчасно - 1 бал
      • Завдання виконане у повній мірі - 6 бали
      • Завдання аргументоване, дані відповіді на доп. запитання - 2 бал


      Роботи приймаються у вигляді посилання на ваш гіт, де зберігається Ваше завдання

    • Лабораторна робота "Props, state, events" 29.09 Завдання

      Завдання тут 

      Виконати лабораторну роботу по компонентам, рендеру данних.
      Максимальний бал виконання - 9.
      Час виконання - до 13.10.22.

      Критерії оцінювання

      • Завдання виконане вчасно - 1 бал
      • Завдання виконане у повній мірі - 6 бали
      • Завдання аргументоване, дані відповіді на доп. запитання - 2 бал


      Роботи приймаються у вигляді посилання на ваш гіт, де зберігається Ваше завдання

    • Лабораторна робота "Export, import, conditional render, lists, keys" 29.09 Завдання

      Завдання тут 

      Виконати лабораторну роботу по компонентам, рендеру данних.
      Максимальний бал виконання - 9.
      Час виконання - до 13.10.22.

      Критерії оцінювання

      • Завдання виконане вчасно - 1 бал
      • Завдання виконане у повній мірі - 6 бали
      • Завдання аргументоване, дані відповіді на доп. запитання - 2 бал


      Роботи приймаються у вигляді посилання на ваш гіт, де зберігається Ваше завдання

    • Лабораторна робота "Hooks, Custom hooks, fragments, portals"" Завдання

      Завдання тут 

      Виконати лабораторну роботу по компонентам, рендеру данних.
      Максимальний бал виконання - 18.
      Час виконання - до {date}.

      Критерії оцінювання

      • Демонстрація 3 бали

      • Дані відображено 2 бали

      • Працює сортування 3 бали

      • Працює фільтрація 3 бали

      • Працює портальний нотіфікейшен 3 бали

      • Працюють улюблені товари 3 бали

      • Працюють кліки і фокус 1 бал

      Роботи приймаються у вигляді посилання на ваш гіт, де зберігається Ваше завдання

    • Лабораторна робота "Basic Forms" Завдання

      Завдання тут

      Виконати лабораторну роботу по компонентам, рендеру данних.
      Максимальний бал виконання - 9.
      Час виконання - до 25 листопада.

      Критерії оцінювання

      • Завдання виконане вчасно - 1 бал
      • Виконано форму 1 - 2 бали
      • Завдання виконане у повній мірі - 4 бали
      • Завдання аргументоване, дані відповіді на доп. запитання - 2 бал


      Роботи приймаються у вигляді посилання на ваш гіт, де зберігається Ваше завдання

    • Лабораторна робота "Router, Suspense, React.Lazy" Завдання

      Завдання тут

      Виконати лабораторну роботу по компонентам, рендеру данних.
      Максимальний бал виконання - 9.
      Час виконання - до 10.12.

      Критерії оцінювання

      • Завдання виконане вчасно - 1 бал
      • Завдання виконане у повній мірі - 6 бали
      • Завдання аргументоване, дані відповіді на доп. запитання - 2 бал


      Роботи приймаються у вигляді посилання на ваш гіт, де зберігається Ваше завдання

    • Лабораторна робота "Flux, redux, Redux Toolkit" Завдання

      Завдання тут

      Виконати лабораторну роботу по компонентам, рендеру данних.
      Максимальний бал виконання - 9.


      Критерії оцінювання

      • Завдання виконане вчасно - 1 бал
      • Завдання виконане у повній мірі - 6 бали
      • Завдання аргументоване, дані відповіді на доп. запитання - 2 бал


      Роботи приймаються у вигляді посилання на ваш гіт, де зберігається Ваше завдання

    • Лабораторна робота "Testing in React" Завдання

      У звʼязку з перебоями світла, лекція буде подана лише частково 8.12 на базі декількох прикладів.

      Автоматично лабораторна зарахована всім студентам як максимум

    • Сертифікат Udemy Завдання

      Одним із варіантів успішного завершення курсу є здача сертифікату Udemy з усною співбесідою.

      Сертифікат Udemy повинен бути виданий на ваше імʼя і відповідати всім правилам академічної доброчесності.

      Рекомендовані курси:

      • https://www.udemy.com/course/react-the-complete-guide-incl-redux/
      • https://www.udemy.com/course/react-redux/
      • https://www.udemy.com/course/react-2nd-edition/

      Не рекомендований курс, але є студенти, які вже розпочали, тому він також в списку

      • https://www.udemy.com/course/javascript_full/


      Якщо ви хочете запропонувати будь-який інший, можете пропонувати в телеграм чаті.

    • Співбесіда Завдання

      Якщо ви виконуєте самостійне завдання або маєте бажання здати сертифікат Udemy, Вам необхідно пройти співбесіду для валідації ваших знань.
      Співбесіда буде включати 15-30хв розмову з невеликим технічним завданням, якщо зі співбесіди буде не зрозуміло чи технічно ви виконували запитання.

      Завдання співбесіди провалідувати знання з сертифікувати і підтвердити персональне виконання завдання саме Вами.
      Оцінювання 50 балів.

    • Реакт тест

      Тест на розуміння реакт, а також закріплення теоретичної частини 

  • Додаткова корисна інформація, посилання

  • Практичне завдання на самовиконання

    • Самостійне завдання "Судоку"

      Створити гру "Судоку"

      Гра повинна реалізовувати наступну функціональність

      • Генерація поля для судоку
      • Реалізація інтерфейсу за допомогою UI бібліотек (картинка нижче). Допускається покращення інтерфейсу.
      • Функціонал вперед, назад повинен використувувати редукс. Допускається використання рекойлу.
      • Повинен бути алгоритм підсвідки помилки.
      • Користувач має змогу почистити одне з полів форми. 
      • Реалізувати можливість підказки.
      • ЗАВДАННЯ на 100 балів. Додати розвʼязання легких судоку без використання сторонніх бібліотек.

  • Секція 6