🎉Живий ефір від Сергія вже в цю суботу!🎉

👉 Ми тут трохи запрацювалися з нашим курсом, тому чергова серія "балачок" трохи відкладається, але це не біда, адже @babich_ss підготував цікаву оффлайн/онлайн подію про IT, яка відбудеться вже в цю суботу.

😎 А якщо ви Львові - то її навіть можна відвідати в живу і позадавати каверзні питання її учасникам!

https://t.me/frontiarnia_news/73

😉Зробили більше практики!😉

👂На початку 2022 року, New York Times, за семизначну суму придбала одну гру. Це не був AAA проект з величезною командою дизайнерів та програмістів. Тут не було ніякого Unreal Engine або Unity. Одна людина, JavaScript та браузер. От і все що було потрібно для того щоб стати відомим та заробити приємну суму грошей.

✍️ Ця гра називається Wordle і саме її ми обрали для нашої сесії лайвкодінгу, щоб ви покроково змогли подивитися як написати її аналог на React самостійно!

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

❓А домашнє завдання ми викладемо після відео про обробку помилок!

Бережіть себе і скоро побачимось!

🦣 CSS еволюція та React 🦣

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

🦄 Тому CSS почав еволюціонувати. Так з'явилися препроцесори, CSS Modules, та навіть CSSinJs, які намагалися вирішити проблему "складного" CSS.

👉 Ось саме про цю еволюцію та про те, як вона реалізована в React-і наша наступна лекція Еволюція CSS та React, яка вже готова для перегляду.

Дивіться, коментуйте і бережіть себе, скоро побачимося!

💪 Електрика електрикою, а навчання ніхто не відміняв.

✍️ Коли ми переможемо і все повернеться до норми, саме ми будемо рухати цифровий світ вперед.

👉 Тому зібралися і продовжуємо лупати сю скалу.

❓Як поділити React застосунок на компоненти❓

✍️ Розподілення React застосунку на компоненти це дуже важлива навичка, яка допомагає писати "чистий" код, який легко читати та легко підтримувати.

😎 І хоча опанувати цю навичку досить не просто, ми все ж таки підготували для вас відео, де на прикладі вже готового React застосунку розібрали підхід до "розрізання" апки на компоненти.

👩‍🏫 Ми поговорили про презентаційні компоненти, компоненти з логікою, загальні компоненти та компоненти специфічні для конкретного модуля.

👉 Відео завантажене і я його дуже і дуже рекомендую для вашого перегляду, бо правильно поділений застосунок - це запорука його подальшого розвитку! Код до відео тут

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

❗️Світло є, продовжуємо навчання ❗️

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

👉 Якщо ви не хочете бачити білий екран - ці помилки треба уміти обробляти про що і буде наша наступна лекція - Обробка помилок в React.

💪 Лекція вийшла, складна і скоріше за все ми зробимо її спрощену версію. Але загальне уявлення ви отримаєте, тож запрошую до перегляду і нагадую що ваші відгуки вітаються!

І про особисте. Я не _арестович, і розповідати про те що все закінчиться через 2-3 тижні не буду. Найближчим часом нас чекають найскладніші випробування. Але всі випробування минають і все що нам потрібно - це берегти себе, своїх близьких та допомагати іншим. Разом ми вистоїмо та переможемо.

Тому - бережіть себе, ми обов'язково скоро побачимося!

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

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

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

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

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

Отже, на виконання завдання відводиться 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);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://t.me/toisamyibabich/582

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

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

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

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

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

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

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

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

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

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

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

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

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