Free React For Beginners

Живий приклад того, як перші два кроки займають 600мс.

Схема завантаження абстрактного ресурсу

👨‍💻#WebPerf - як браузер вантажить ресурс (3)👨‍💻 Для того, щоб завантажити будь-який ресурс (html, CSS, JS, тощо) потрібно зробити наступні кроки ➡️ Знайти сервер Коли ви пишете в браузерному рядку https://drag13.io , браузер ніц не знає що це за адреса і куди звертатися. Для того щоб це дізнатися, він робить запит до сервісу доменних імен для отримання IP адреси вашого серверу (я тебе по айпі знайду!!!) ➡️ Встановити з ним зв'язок Після того як браузер дізнався адресу серверу, з ним треба вийти на зв'язок (можливо сервера там давно й немає немає) і, якщо у нас з'єднання захищене (https), то ще й помінятися сертифікатами ➡️ Запитати в нього ресурс і почати отримувати відповідь Якщо сервер живий і відповідає, браузер надсилає йому запит за конкретним ресурсом, наприклад index.html і очікує на передачу даних. Сервер, в свою чергу, шукає в себе ресурс і віддає його (або не віддає) і ще робить купу інших речей (наприклад логує) ➡️ Обробити ресурс Дані, які ми отримуємо з сервера є "сирими" і часто стиснутими. Тому браузеру потрібно їх розпакувати та перетворити на щось корисне. Так HTML перетворюється на спеціальну структуру в пам'яті - DOM, CSS на СSSOM, JS - перетворюється з літер на код який зрозумілий браузеру. Важливо, що "ціна" обробки а також можливість оброблення під час завантаження залежить від виду ресурсу. ➡️ "Виконати" ресурс І тільки тепер ми можемо "виконати" ресурс - відмалювати HTML, накласти стилі, виконати JS. От такий шлях потрібно пройти кожному ресурсу який вантажить наш браузер для того що б ви побачили корисний контент. І як ви вже розумієте, на кожному етапі з цих етапів щось може піти не так...

🎉А ми на DOU🎉 😎 Телеграм не дуже підходить для розлогих текстів, тому про наші пригоди з другою версією курсу я написав невеличку статтю на DOU. Кому цікаво як ми готувались до другої версії курсів і побачити трохи фотографій - прошу до читання. Пишуть що це займе аж дві хвилини 😂 👉 А якщо коротко - то я більш-менш (десь на 80%) задоволений тим що вийшло. Дуже підгадили рашисти з відключенням світла, але прогрес нашої групи був наочний. Можливо трохи постраждала якість відео записів але довелось жертвувати. ✍️ З висновків - підхід з окремою групою був правильний, але групу взяли завелику. Наступна буде, нажаль, меншою. Вибачайте :( ❤️ Дякую всім хто прийняв участь, дивився наші відео, писав коментарі та ставив лайки. Ви молодці, ви круті, і я вірю що всі ви знайдете свою роботу мрії. Бережіть себе і скоро побачимось. П.С. Скоріше за все я і сам в найближчий час відправлюсь на трьох тижневе навчання.

👨‍💻WebPerformance - користь швидкодії завантаження (2)👨‍💻 ❓Якщо користь швидкодії рантайму досить очевидна (ніхто не буде користуватися застосунком який зависає), то зі швидкодією завантаження все не так очевидно. Здавалося б, що немає особливої різниці скільки ваш сайт/застосунок завантажується. Дві, три, чотири секунди - яка різниця? Але насправді це не так. 😅 Як виявилось, існує кореляція між часом завантаженням та відсотком людей, які залишають ваш сайт не дочекавшись завантаження. Що, в свою чергу, впливає на продажі або на покази реклами. 👉 Іншими словами - швидкодія завантаження напряму впливає на ваш дохід або дохід вашого клієнта. Наприклад Trainline, зменшивши час очікування усього на 300мс збільшив прибуток на 8_000_000 фунтів стерлінгів на рік. Але перед тим, як переходити до оптимізацій завантаження, спочатку потрібно розібратися з тим, як це завантаження взагалі відбувається.

👨‍💻WebPerformance - про терміни (1)👨‍💻 Коли ми говоримо про #перформанс (або швидкодію), бажано розуміти, "а про що конкретно ми о це розмовляємо". Бо видів швидкодії може бути щонайменше два: ➡️ Швидкодія завантаження. Простими словами, як довго ваш користувач бачить білий екран або екран без корисного контенту. ➡️ Швидкодія рантайму. Це коли сайт вже завантажився, ми щось натискаємо, а інтерфейс починає пропускати кадри ("лагати"), або взагалі перестає відповідати на дії користувача. І І то і то є швидкодія. Але незважаючи на це та на те, що вони між собою частково пов'язані - причини проблем, а найголовніше шляхи до вирішення будуть, у своїй більшості, відрізнятися. @reactbeginners

Публічне код рев'ю: шукаємо добровольців 🥲 Ми тут планували зробити сесію з код рев'ю, але в людини яка спочатку погодилася, тепер змінилися плани. 😎 Тому, якщо у вас є бажання пройти код рев'ю, яке побачить наш канал - напишіть під цим постом. 👉 Від вас треба робочий код на #React та згода на його публічне обговорення. Проводитимо я та Сергій, буде не боляче 😅 А цей тиждень у нас буде присвячений #webperformance тож нові пости саме про це - незабаром. Бережіть себе і до скорої зустрічі.

А ось і матеріали з останнього ефіру Приїхали матеріали з останнього ефіру про верстку: — Дизайн — Репозиторій — Бабіч Тепер можна спробувати повторити верстки і піддивитися в ті моменти які не встигли. Бережіть себе!

🥸 Про експертність 🥸 ❓Нещодавно мені задали питання з теми яку я начебто трохи знаю, але так, знаєте, на рівні десь чув і дивився в пів ока. 🥸 Зрозуміло що експертної думки у мене бути про це не може, про що я так і сказав. А потім згадав деяких інших "експертів" які завжди готові виносити свою авторитетну думку з будь-якого питання - від вирощування грибів до геополітики найвищого рівня. 👉 До чого я веду. Не знати щось - це нормально. Визнавати, що ти чогось не знаєш - це нормально і жодним чином не робіть нікого гірше. Набагато гірше бути тим, про кого писав класик: - Несіть мені усі по три рубля, і мудрості вам дам я 🤬 ❗️Тому не соромтеся казати "я не знаю", не соромтеся ставити начебто "дурні" запитання і давайте вчитися разом, аби не бути такими "експертами". Бережіть себе і тихих вам вихідних

Прямий ефір починається! Верстати чи не верстати - ось у чому питання, на яке прямо зараз, під час прямого ефіру, буде відповідати Сергій Бабіч! Приєднуйтесь!

Поки Сергій готується до сьогоднішнього ефіру про верстку... 🤓 Я також готуюся до наступного ефіру про #перформанс #React застосунків. Не скажу що все йде просто, бо моментів багато і треба їх якось впорядкувати, але справа потроху рухається. 🧐 Я вже роблю #React застосунок, із купою типових помилок щоб розібрати їх під час лекції. Сама ж лекція відбудеться десь днів за десять бо ще треба багато зробити, тож чекайте на більше детальний анонс трохи пізніше. 👉А я всіх чекаю вже сьогодні, 12 січня о 19:00 на лекції Сергія Бабіча з верстання, якого, як відомо, забагато не буває! Бережіть себе і до скорої зустрічі!

я ж видалив

Верстаємо за Бабічем наживо 😎 Верстка — це те, що ми маємо опанувати в першу чергу, і часом нам може здаватися що з нею все зрозуміло: div туди, span сюди, float: left, та й погнали в продакшн! 🥸 Та насправді HTML та CSS набагато складніші та глибші, ніж здається на перший погляд. В них постійно можна знаходити щось нове, несподіване, магічне та й просто прикольне. Головне — практикуватись у верстці, навіть якщо ви вже досягли 80-го рівня в #React та силою самої лише думки рухаєте кнопки на найскладніших формах. 👉Саме з цією метою Сергій Бабіч і верстатиме для вас у прямому етері та спробує розібратись, чи можливо застосувати компонентний підхід в чистому HTML та CSS, поділиться деякими цікавими спостереженнями та знахідками, трошки посвариться на дизайнерів, питиме лимонад та відповість на ваші запитання. ❤️ Готуйте каву та печиво, ефір буде не маленький. А ще під час трансляції ми спробуємо зібрати кошти для ЗСУ. Бережіть себе, чекаю всіх, верстки забагато не буває!

Трохи про гроші, бо це важливо. ✍️ Як більшість знає - в 2022 році ми збирали пожертви для наших військових через мою картку а також через OpenCollective. В 23 році ми продовжимо це робити і всі гроші які ви нам переводите - будуть відправлені на Перемогу. 💎 Наш залишок - 2584,30 грн., лежить цілим і чекає на слушну нагоду принести користь, або нагальної потреби. (ну і поки я його доб'ю до якоїсь круглої суми), то ж за бажанням долучайтесь. Дякую вам за довіру, це велика відповідальність для мене.

З наступаючими вас святами! 😊 Я дуже радий, що ще тоді, у квітні ми розпочали цю освітню ініціативу і змогли протриматися до другого курсу. Якби рік тому мені хтось сказав що я буду на 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. Штуки не найпростіші але й не захмарні. Дякую Ігорю за лекцію, а ви бережіть себе і давайте продовжувати лупати цю скалу.