Free React For Beginners

Лекції на початок 2023

👨‍💻 Новий рік лише розпочався а ми вже плануємо наступні лекції, і ось найближчі:

👉 Верстка в прямому ефірі з Сергієм Бабічем - 12.01.22, 19:00. Буде компонентний підхід, css змінні, grid-и та інші корисні прийоми.
👉 React та StoryBook. Навіщо та як?
👉 React та Performance - оптимізація завантаження
👉 React та Performance - оптимізація в runtime
👉 Web та Secure coding

Як бачите дата є лише для першої лекції, всі інші зараз в стані розробки, але чекати довго не доведеться.

Тож бережіть себе і чекаю всіх вас на наших ефірах!

З наступаючими вас святами!

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

😍 Але що сталося то сталося і я дуже вдячний моїм друзям, моїй компанії та вам, без яких цього всього могло просто не бути. Ви круті, сильні і не реально мотивовані (повірте, мені є з чим порівнювати) .

😎 Щодо наступного року - конкретних планів немає. Треба впорядкувати робочі моменти, треба відпочити від викладання ну і скласти план чого ми хочемо від 23 року. Я хочу відкрити оффлайн інтернатуру в Ітері, але для цього потрібні певні умови, яких наразі немає, тому будемо бачити.

❤️А в цьому році у мене все. Вітаю вас зі святами. Бажаю сил, бажаю снаги та терпіння, бажаю вакансій, бажаю гарних колективів і цікавих проектів. Вірю що все у вас вийде!

Бережіть себе і гарних всім свят!

Розбір домашнього завдання з React-Router-Dom

✍️Під час розгляду домашніх завдань наших студентів ми побачили певну кількість типових помилок при роботі з React-Router-Dom. І тому, поки є світло, вирішили записати відео з код рев'ю однієї з робіт.

👉 Якщо у вас є складнощі з роутером, або ви просто хочете порівняти своє рішення з тим що пропоную я - запрошую до перегляду.

Бережіть себе і з наступаючим всіх святами!

Спрощуємо роботу з формами у React

👂 В одному з попередніх відео ми вже розбирали роботу з формами в React. Але, зазвичай, з чистими формами працюють не дуже часто, надаючи перевагу бібліотекам, що спрощують та прискорюють роботу розробника.

👉 Саме з такою бібліотекою ми сьогодні і познайомимось . Це React Hook Form яка розроблена для використання у функціональних компонентах, має зручні інструменти з коробки та підтримую асинхронну валідацію і валідацією за допомогою Yup, Joi та інших.

😎 Cама бібліотека важить 25kb (мініфікована, не жата), має 2.6 мільйонів заважантажень на тиждень та 32 тисячі зірок. Останній коміт був учора, тож ви можете бути впевнені що хоча б ще один рік бібліотека буде жива та підтримувана.

Бережіть себе і до скорої зустрічі!

😎React, UI бібліотеки або як нам час економити😎

💪 Ви можете написати будь-який код, від математичного модулю до складної таблиці з групуванням, підвантаженням даних з серверу та віртуальним скролом. Але часу на це може піти більше ніж на сам проект та й баги ніхто не відміняв.

👉Саме тому, ми використовуємо сторонні бібліотеки які вже відтестовані та задовольняють усі вимоги. Не є виключенням і UI компоненти, які також можна "взяти" зі сторонніх бібліотек, таких як, наприклад MUI (material UI). Саме про них і йде мова в нашій новій лекції, яка вже завантажена на YouTube.

🧨 Ми також зачепили StoryBook - популярний інструмент для документування власних UI компонентів, який буде в нагоді у великих проектах.

Бережіть себе і до скорої зустрічі.

✍️ Redux - частина друга ✍️

😢 Можливо це не на часі, бо у багатьох немає світла, води та навіть опалення (у мене, наприклад ні води ні опалення), але ми продовжуємо викладати навчальні відео.

👉 Тому як ви знайдете час та сили - ось друга частина відео про #redux, middleware та thunk. Штуки не найпростіші але й не захмарні.

Дякую Ігорю за лекцію, а ви бережіть себе і давайте продовжувати лупати цю скалу.

😢 Харків, Запоріжжя - мої співчуття 😢

😅 Отже ми пішли в Redux 😅

😂 Скажу чесно - якби моя воля я б Redux не читав. Причина цьому проста - на сьогодні існують більш зручні рішення ніж Redux. Як ті що відносно давно на ринку - MobX, так і нові, такі як Recoil.

👉 Але коду написаного на Redux настільки багато що ми мусимо дати хоча б щось. Тим паче що сама ідея Redux дуже цікава для будь-якої розробки. Тому ми викладаємо перше відео (дякую Ігорю за лекцію) з Redux циклу де ми зачепили:

✍️ useReducer як найпростішу реалізацію redux
✍️ синхронний Redux з Redux Toolkit

А от асинхронний Redux буде трохи згодом.

❤️ Для кого відео буде складним - по-перше це нормально, навіть не хвилюйтесь. По-друге - спочатку пограйтеся з useReducer, щоб осягнути ідею, а потім вже бийте в Redux. Код до лекції тут

Бережіть себе, зустрінемось наступного разу!

П.С. Дублюю лінку на відео - https://youtu.be/2L77hzkirgo

Не часто я роблю перепости, але тут є сенс.

Пост про те, ким має бути Senior і чому Senior React Developer це не ОК.

П.С. Відео про #redux в обробці.

https://t.me/toisamyibabich/582

🔥Друга частина про новий #React #Router - практика🔥

😍Нарешті викладаю другу частину про React роутер, на цей раз суто практичну. Взяли апку без роутера і поетапно додали туди роутер.

До речі апка вийшла цікава, нашим буде приємно)

👉Ласкаво прошу для закріплення матеріалу.

❗️Трохи інформації про канал❗️

🤯 Ми провели опитування щодо можливості додання "неформату" в канал, і хоча думки розділилися, формат каналу залишається без змін. Неформат поїде в окремий канал, якщо такий з'явиться.

💰 Ми закінчили експерименти з рекламою на YouTube, і наразі реклама на каналі вимкнена. Була ідея монетизувати канал і зароблене відправляти ЗСУ, але розмір того що ми отримали настільки мерзенний мізерний що це просто немає жодного сенсу.

🕺 Ми плануємо відпочинок на після нового року. Перший пріоритет - довести курс до кінця (сподіваюся ми встигнемо до 31.12, але багато чого залежить не від нас), потім пауза і зменшення активності, потім буде обговорення що робити з курсом V3 і куди рухатись.

👉 Якщо у вас є коментарі або запитання - прошу під пост.

🔥Відео про новий #React #Router🔥

😍 Нарешті перша частина відео про #React #router вже готова до перегляду і я дуже з цього задоволений, бо вийшло і не складно і продуктивно.

👉 Отже, що розібрали:

1. Новий підхід до створення навігації який тільки но з'явився. Тут хоч статтю пиши бо наразі свіжої інформації не так багато.
2. Створення шаблону для сторінки, щоб не дублювати навігаційний блок, футер та таке інше
3. Обробку помилок, яка тепер значно спростилася (хоч видаляй попереднє відео про обробку)
4. Динамічні роути та отримання параметрів з URL.
5. Отримання даних для сторінки, що нарешті реалізовано по-людськи. Судячи з усього це буде моєю найулюбленішою фічею.

👂 Як бачите інформації багато, але завдяки продуманому дизайну роутера працювати з нею не складно і все відео у нас зайняло лише 49 хвилин.

👀 А друга частина, де ми будемо робити мікро апку на новому роутері, я викладу вже завтра. Це буде матеріал для закріплення. Завдання для самоперевірки буде в цьому пості у коментарях.

Бережіть себе і до скорої зустрічі!

#React, типові помилки та рефакторинг

👉 Відео з вчорашнього ефіру вже залите на YouTube і чекає на своїх глядачів.

👂З цікавого, під час рефакторингу я спробував показати як можна виправляти код маленькими кроками залишаючи його функціональним, а не йти шляхом тотальної руйнації та перепилювання усього з нуля.

✍️ А перше відео про #reactrouterdom буде вже завтра, коли закінчиться його обробка.

Тож бережіть себе і до зустрічі!

❗️Маленьке нагадування про сьогоднішній ефір на 19:00❗️

👉 А ще прохання поширити цей допис в лінкедині. Давайте зберемо трохи аудиторії 😎

😅 Ну і тримаймо пальці щоб не вимкнули світло!

🧑‍💻 Код рев'ю в прямому ефірі🧑‍💻

❓ Пам'ятаєте у нас було завдання написати гру для запам'ятовування літер? Поле 3Х3, з'являються літери, потім зникають і ви маєте відкрити всі літери виду А або Б.

😊 Так от, саме з цим завданням до мене звернувся один із підписників з проханням провести код рев'ю. Відкривши код, я побачив доволі цікаві помилки і запропонував йому зробити прямий ефір, який буде корисний не лише для нього але й для інших, на що він ласкаво погодився.

👉 Отже, вже завтра, в середу 07.12, о 19:00, ми зробимо прямий ефір з код рев'ю, на якому ви також зможете поставити і власні запитання. Ефір буде на цьому посиланні

Бережіть себе і до скорої зустрічі!

У нас сьогодні практичні зайняття з групою і я подумав, а чого б не поділитися з вами.

Отже, на виконання завдання відводиться 180 хвилин.

👉 Завдання

Draw a simple user registration form with next fields

1. Email.
2. Password
3. Password Confirmation

All fields are required for submitting. Password and Password Confirmation should match

On submit the call to an API should be performed (see request bellow)

After successful submit, the rating from the response should be displayed on the screen instead of form.

API might return status code 400 with validation errors or 500 with 30% chance. Errors should be handled.

Request example:

fetch('https://react-course-api.azurewebsites.net/user', {body: JSON.stringify({name: 'test', password: '123123', passwordConfirmation: '123123'}), method: 'POST',   headers: {
      'Content-Type': 'application/json'
    }}).then(x=>x.json()).then(console.log);

Моя робоча відпустка добігла кінця і з четверга ми повертаємося до навчання.

✍️ І почнемо ми з роутеру в #React, який дуже не очікувано змінився з травневої лекції. Тепер у нас "новий підхід" до створення роутів, який, як на мене, ну прямо дуже схожий на підгледжений в #Angular. Не можу сказати чи добре це чи погано, але лекцію потрібно робити з нуля. 😅

👉 Тож чекаю всіх у цей четвер на нашому каналі.

Всім гарної неділі, бережіть себе і до скорої зустрічі!