Фронтенд: React

Topic outline

• 

  General

  • Announcements Forum
• 

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

  • Information Wiki

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

    Telegram @RomanSavitskyi

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

• 

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

  • Лекція №1. Рендеринг, NodeJS File

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

  • Лекція №2 "Props, state, events" File

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

  • Лекція №3. "Export, import, conditional rendering, list, keys File

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

  • Лекція №4. "Хуки" File

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

  • Лекція №5 "Custom hooks, portals, fragments" File

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

  • Лекція №6 "Basic Forms. React-hook-form, yup File

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

  • Лекція №7. "CSS, CSS in JS, CSS modules" File

    Відео тут

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

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

  • Лекція №8 "React Router v6. React.lazy. Suspense" File

    Відео тут

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

  • Лекція №9 "useContext, propTypes, renderProps" File

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

  • Лекція №10 "React, redux, redux toolkit" File

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

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

• 

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

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

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

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

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

  • Лабораторна робота "Props, state, events" 29.09 Assignment

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

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

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

  • Лабораторна робота "Export, import, conditional render, lists, keys" 29.09 Assignment

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

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

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

  • Лабораторна робота "Hooks, Custom hooks, fragments, portals"" Assignment

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

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

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

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

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

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

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

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

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

  • Лабораторна робота "Basic Forms" Assignment

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

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

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

  • Лабораторна робота "Router, Suspense, React.Lazy" Assignment

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

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

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

  • Лабораторна робота "Flux, redux, Redux Toolkit" Assignment

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

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

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

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

  • Лабораторна робота "Testing in React" Assignment

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

  • Сертифікат Udemy Assignment

    Одним із варіантів успішного завершення курсу є здача сертифікату 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/

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

  • Співбесіда Assignment

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

  • Реакт тест Quiz

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

• 

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

  • React Developer Roadmap URL

    Завжди актуальний роадмеп по розвитку реакт розробника

  • Full react roadmap URL

    Повний реакт роадмеп зі всіма функціями, можливостями і що за чим вивчати

  • Freecodecamp безкоштовний текстовий курс URL

    Freecodecamp - безкоштовний ресурс з можливістю вивчення різних технологій та можливостей, а також із практичними задачами для підготовки до співбесіди та інше

  • Рефакторинг та чистота коду URL

    Україномовний ресурс з якісним матеріалом по оптимізації, рефакторингу та запахах коду

  • Відеокурс по Реакт від А. В. Морозова. URL

    Пречудовий курс по реакт від Андрія Васильовича Морозова

  • Реакт. Віталій Рубан. Канал + ютуб курс URL

    Телеграм канал, а також відеокурс про реакт, а також джаваскрипт для студентів та початківців

  • Реакт курс від Максима Руднього URL

    Ще один україномовний реакт курс. Непогано поділений і пропрацьований матеріал

  • React-use добірка URL

    Добірка кастомних хуків для більшості можливих АРІ

  • PropTypes lib URL

    Бібліотека з можливістю використання типів в JS

• 

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

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

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

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

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

    

• 

  Topic 6