👩‍🏫Практика з формами👩‍🏫

👉 Форми - одна з найпопулярніших функціональностей які існують на фронтенді. Ви будете зустрічатися з ними постійно від початку вашої кар'єри і аж до поки не перейдете на бекенд. Навіть вступне завдання на курс було пов'язано з формами.

👨‍💻 Саме тому ми підготували для вас наступне відео, де зробимо вступне завдання, але на React. Ми подивимось як створити форму, отримати з неї дані, та навіть показати діалог. Такий собі простенький мікро застосунок за 30 хвилин.

Бережіть себе, а ми вже готуємо наступне відео - як створити на React дуже відому гру Wordle, яку New York Times придбав для себе в 22 році.

🦣Хуки, частина ТРЕТЯ🦣

❓ Чи була у вас колись ситуація, що для передачі даних від батьківського компоненту до дочірнього потрібно пройти крізь сім кіл інших компонентів? От якби їх можна було б отримати якось інакше, та ще й перемалювати компонент коли дані змінилися!

🤩 Саме для цього в React існує контекст. А для того щоб отримати для нього доступ з функціональних компонентів існує хук useContext.

👉Про це, а також про кастомні хуки в нашій новій лекції - "useContext та Кастомні Хуки" яка вже завантажена на YouTube, а завдання для самоконтролю - в коментарях під цим постом.

Бережіть себе, наступне відео про debug загалом та React Developer Tools вже завтра!

🪲Debug та React 🪲

🥶 Дебаггінг це не просте, але вкрай важливе уміння яке буде з вами весь час вашої кар'єри. Неважливо на чому ви пишете чи то на JS чи то на Elm, чи навіть на якомусь brainfuck. Без дебагінгу просто нікуди.

👉 Саме тому, наступну лекцію з нашого курсу ми присвятили дебагу де розглянули як загальні інструменти (Chrome Dev Tools) так і React Developer Tools. Нова лекція вже завантажена YouTube та чекає на вас.

😺 До речі, а ви звернули увагу, що дебагінг українською звучить як "де баг?" що цілком відповідає змісту цього слова? Можливо дебаг придумали українці?

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

І знову - бережіть себе, будьте у безпеці.

Все мине, і русня також мине. А ми будемо сидіти на берегу Дніпра і дивитися як тече вода і несе течія.

😎TypeScript - основи😎

✍️ TypeScript однозначно зайняв своє місце серед інструментів веб розробки. З мого досвіду - більшість проектів стартують саме на ньому. Тому, хоча ця тема напряму не стосується React, ми вирішили додати її до нашого курсу.

👉 Ми розповіли про типи, явні та не явні, подивились на помилки та навіть заглянули під капот TypeScript, який, як виявляється, написаний на тому самому TypeScript

Лекція вже доступна для перегляду, а ви бережіть себе і близьких. Все буде добре.

❗️Всім привіт❗️

🥶 У мене, як і в багатьох з вас, немає світла, тому нові відео можуть виходити з затримками.

👉 Наступне відео у нас про CSS, його розвиток та про React, яке вийде коли я зможу його завантажити на YouTube. А от після цього у нас буде майже двотижнева пауза, тому що ми підемо з курсом на практику, а потім на коротенький відпочинок. А повернемося вже з лекціями про React Router, Redux, Axios та іншими важливими інструментами.

❤️ А поки що хочу сказати - ми тут саме заради вас. Ми не заробляємо на цьому каналі, тут немає ні реклами, ні спонсорів окрім моєї компанії. Єдине що нас мотивує - це ви, розуміння того що це вам потрібно і корисно. І коли ви не дивитеся наші відео, не коментуєте - ми не розуміємо що йде не так. Чи поганий матеріал, чи подача, чи це просто нікому не потрібно. І це демотивує.

🙏 Тому, будь-ласка, дивіться відео та давайте зворотній зв'язок. Якщо вам сподобалося відео - поставте лайк, напишіть комент - це мотивує нас робити нові відео і збільшує вірогідність що відео побачать інші люди. Якщо вам не сподобалося - теж напишіть, щоб ми розуміли що йде не так. Це дійсно важливо і не складно.

І, звичайно, бережіть себе та продовжуйте навчання. Кожна зима закінчиться і ця не буде виключенням. Побачимося!

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

👉 Ми тут трохи запрацювалися з нашим курсом, тому чергова серія "балачок" трохи відкладається, але це не біда, адже @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 хвилин.

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

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