Free React For Beginners

Ефір готовий для перегляду, але давайте з головного

💰 Завдяки вам і спільноті @fwdays (це вони проводять конференції не зважаючи на війну) ми зібрали 13_141 гривен. На ці гроші, я, сьогодні, куплю таку штуку як Pahacell. Це кровоспинний матеріал, який через певний час розсмоктується в рані і його не потрібно звідти вирізати. І вже на цьому тижні наша посилка буде в госпіталі робити свою добру справу. Тож величезне вам дякую, це дуже важливо і єдино про що я шкодую, що ми не можемо купити його хоча б ящик. Накладна буде також сьогодні, я її сюди викладу і оновлю нашу таблицю з донатами.

❤️ Подарунки також вже відправлені (ще в суботу) тож вже мають бути у вас. Їх три комплекти і після суботнього ефіру Itera Ukraine вирішила нам підкинути ще трохи. Тож, якщо ви не заперечуєте, ми цей збір трохи пізніше повторимо.

👉 А от щодо самого ефіру - мені потрібна ваша думка, тож, будь-ласка дайте відповідь на наступне коротеньке опитування

Субота, ранок, а я готуюсь до виступу і нервую як на першому!

🕺 А на столі в мене подаруночки, і їх навіть більше ніж я обіцяв. А чому? Бо ви дуже круті, і просто написати дякую - я не можу, цього просто мало!

👉 Тож приходьте сьогодні на ефір (він о 14:00), послухайте мене знервованого і заберіть ці подарунки))

❗️А ось список учасників розіграшу. Якщо ви себе не знайшли, або не співпадають цифри - дайте мені знати!

***твєєва: 7; ***rck: 2; ***ytrokolisnyk: 10; ***volvatres: 1; ***lomka: 3; ***ekrumian: 5; ***ahomet: 5; ***helg: 2; ***g_alex: 2; ***ryna_the_eye: 1; ***sana_stets: 2

Все, побіг готуватись щоб не осоромитись!

Вітаю з відбоєм!

UPD - Все зібрано, дякую всім хто долучився!

❗️Дуже велике прохання всім хто закинув гроші і не отримав від мене підтвердження - НАПИШІТЬ МЕНІ❗️

💰 А ще в нас тепер є банка, де все-все видно

Повітряна тривого продовжується, тож давайте подивимось що у нас з розіграшем та зборами

💰 Зібрано: 1910 гривень
💪 Усього учасників: 6 осіб
🕺 У розіграші: 3! особи

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

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

❗️Якщо ви перераховували гроші, але не писали мені і хочете прийняти участь - будь-ласка, напишіть!

Бережіть себе!

Поки я сиджу в коридорі - напишу корисний пост key

❓Що робити коли потрібно відмалювати список, а ID, або іншого унікального ключа немає?

👉 Насправді все досить просто - потрібно створити його самостійно. Але не під час рендеру, а під час отримання або створення даних. І вже тут можна використовувати будь-які засоби і index, і uuid, і uniqueId з lodash. А в рендері ви просто цей ключ використаєте, і все, нічого складного немає.

✍️ Прикріпляю зображення та stackblitz для прикладу.

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

А ось приклад паралельної активності

Знайшли цей планшет майже на 10_000 гривень дешевше (при чому новий, хоча коробка убита), скинулись на оплату, та зараз вже передаємо на той самий проклятий напрямок.

Якщо з його допомогою буде знищено хоча б одна одиниця будь-якої техніки русні, він окупиться багатократно

А от і наше відео про типові помилки в React

🔥 Як і обіцяв, викладаю нове відео з React і саме для початківців про типові помилки і про те як їх вирішити

У відео ви знайдете розбір:

❓ Чому дані на сторінці можуть не оновлюватися і як це виправити
❓ Чому React скаржиться на відсутність key у списках і до чого це призводить
❓ Як зробити нескінченний перерендер за допомогою useEffect і чому це працює.

А ще я нагадую що у нас триває збір на медикаменти для покровського госпіталю. За кожні сто гривень ви отримаєте шанс виграти чудову книжку Книга-мандрівка. Незалежні та фірмову футболочку, тож долучайтеся у кого є змога. Кожна гривня важлива!

@reactbeginners

🔥Отже, це сталося! 🔥

❗️Сергій БабІч таки відкрив свій ютуб канал про розробку, і виклав перше відео (і як завжди про CSS).

🕺 І це не може не радувати, тому що якісного українського контенту стає більше і більше. Тому, якщо ви любите навчатися з гумором, якщо вам подобається web і розробка в цілому - запрошую приєднуватися до каналу Сергія.

👉 Ну і давайте побажаємо йому натхнення, терпіння та знайти десь на все це час. На цьому шляху зайвим то не буде 😅

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

👉 Коротенький апдейтик 👈

😢 Я облажався з вимірюваннями React апки. Вибачте кого ввів в оману, цифри геть інші, як буде час - опублікую, там ДУЖЕ несподівано. Але треба тепер 10 раз перевіряти.

👩‍🏫 Готую нове відео - "Топ помилок в React" та як їх виправити. Контент саме для початківців, і саме про React. Буде key | state | effect. Мало бути сьогодні але прийшов негайний запит + в мене сьогодні перший навчальний день. Тож я не встигну, буде у вівторок - середу. Формат: 10 - 15хв.

💰 По зборах - зібрали 1810 гривень + 200 вже було. Найбільший внесок 1000 гривен, найменший 10. Дякую кожному хто долучився, продовжуємо далі. І п'ять гривень важливі. Картку ви знаєте. Паралельно ще треба купити планшет на Бахмутський напрямок, але там є чим закрити.

Такі у нас справи, бережіть себе і продовжуємо працювати.

❤️ Більше подарунків! ❤️

👉 В наступну суботу (11.02, 14:00) ми проведемо благодійний
ефір про швидкодію під час якого розіграємо вже не один подарунок, а два.

🍎 Перший подарунок ви вже бачили - це абсолютно нова книга - "Книга-мандрівка. Незалежні" випущена в 2022 році і присвячена нашій незалежності.

🍉 А другий подарок, вже від моєї компанії - патріотична та супер м'якенька, фірмова футболка - Ukrainian Bravery, яку ви бачите зараз на фото. (фотограф я поганий, але футболка класна!)

👉 Тож долучайтесь до зборів. І ваші гроші, і мої, підуть на дуже важливу справу - рятування тих, хто зараз захищає нашу Країну. А ще я дуже вдячний всім хто вже долучився! Ви круті!

Номер картки для збору - 4731185629296887

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

🧐 А чому я так багато пишу про швидкодію?🧐

😀 Звичайно, тому ще мені це подобається, але існує й інша причина чому, на мою думку, ця тема може бути корисна вам

❗️Річ у тім, що робота зі швидкодією, дуже добре прокачує розуміння того, як працює браузер і як працює мережа. А це ті знання які необхідні фронтенд розробнику будь-якого рівня і які можуть стати вам у нагоді як під час розробки, так і під час співбесіди.

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

А тепер відповіді на вчорашні пости:

1. Єдина зміна - Critical CSS, тобто вбудова CSS, який необхідний для відображення сторінки, в саму сторінку. Важливо пам'ятати що це не панацея і може зробити навіть гірше, якщо розмір вбудованого CSS буде великим.

2. Переведення проекту з чистого HTML на React (без оптимізацій) знизило performance score з 94.3 до 87 на моїй машині. Але якщо брати дані з pagespeed.web.dev, то картина цікавіша: деградація з 85 до 61 на мобільному і 98 на 82 на десктопі. Така ціна React-у. У матеріалі для вимірювання була помилка. Коректні цифри будуть пізніше

Бережіть себе, новини про розіграш трохи пізніше.

👨‍💻 #WebPerf - Все не так страшно(6)👨‍💻

❓Пам'ятаєте ефір з Сергієм Бабічем про верстку? Готуючись до наступного ефіру мені стало цікаво, а що зі швидкодією того мікросайту який створив Сергій.

😎 Я його стягнув, встановив parcel щоб не мучатися зі збіркою, вилив на Azure, щоб не дивитись локально і запустив LightHouse.

😉 Результат мене не здивував - 93, 93, 97. Все ж таки сайт повністю статичний, маленький та Сергій ще й трохи оптимізував деякі моменти (хоча бідкався що нєєє)

❓І тут мені стало цікаво - чи можна його значно покращити за лише одну принципову зміну

Через деякий час виявилось, що за одну зміну я можу стрибнути одразу до 99.

Як гадаєте - за рахунок чого? Пишіть ваші варіанти в коментарях!

Тут сайт,а тут код.

П.С. Ми продовжуємо збирати кошти на госпіталь, завтра буде додатковий приємний анонс.

👨‍💻 #WebPerf - Як міряти швидкодію завантаження? (5)👨‍💻

👉 Якщо потрібно оцінити загальну картину "на око":

1. Відкриваємо анонімне вікно
2. Відкриваємо бажану сторінку та відкриваємо Chrome Developer Tools
4. Переходимо на вкладку LightHouse
5. Обираємо лише Performance чекбкос
6. Натискаємо Analyze і записуємо рейтинг.
7. Повторюємо все ще два рази і виводимо середнє значення.

➕З плюсів - це швидко та більш-менш зрозуміло - якщо результат 90+ то скоріше за все (але це не точно) у вас все добре, робити нічого не потрібно.

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

😎 Але незважаючи на це, такий підхід чудово підходить для самоконтролю під час розробки застосунку. Просто час від часу запускаєте LightHouse і пересвідчуєтесь що все в нормі. Якщо несподівано оцінка дуже впала - дивимось історію комітів. До-речі, раджу зберігати результати LighHouse звіту щоб мати змогу порівнювати як результати так і причини.

А от якщо вам потрібно більш грунтовний підхід, починається абсолютна інша історія...

П.С. Ми збираємо на гроші для Покровського госпіталю. Буду дуже вдячний за кожну гривню!

Новий ефір та розіграш цікавого подарунку

😅 Ну що, обіцяв то ж треба робити. Оголошую дату нового ефіру про #швидкодію завантаження на прикладі #React застосунку, який відбудеться в суботу, 11 лютого о 14:00. Поговоримо про те як міряти, що міряти та поексперементуємо на тестовій апці.

❗️ Окрім цього я також хочу розіграти один цікавий подарунок - книгу про історію незалежності України яку мені подарували за виступ на конференції в 2022 році. Ця книга для мене цінна тим, що вона є символом втілення мрій незважаючи ні на що. Тож я віддаю її з відчуттям гордості (і зовсім трошки з сумом 😁)

❗️Для того щоб прийняти участь у розіграші потрібно зробити ТРИ РЕЧІ:

👉 перерахувати на 4731185629296887 суму кратну 100грн (кожні 100 грн - один шанс)
👉 написати мені в особисті ім'я та суму
👉 прийти на ефір 11.02.23

❓А гроші підуть на обладнання для Покровського госпіталю у прифронтовій зоні. Перші 5000 я вже відправив, бо чекати немає часу, але їм потрібні ще і, нажаль, багато.

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

Аналітика від DOU та корисні ресурси

🥊 DOU опублікував аналітику про найми джунів і вона не дуже втішна, бо конкуренція лише росте.

👉 Тому не можу не порадити канал з вакансіями для початківців (які і нам дуже допомогли) - Don't Panic Junior IT Jobs

😊 Там є різні вакансії, в тому числі для фронтів + всілякі корисні матеріали саме для джунів. Зайдіть, подивіться, можливо стане в нагоді. Нажаль зараз треба пробувати все

❗️А ще - вчіть англійську. Це суттєво підвищує ваші шанси знайти роботу. Наразі, ITVDN пропонує безкоштовний онлайн курс англійської для IT. Англійська дуже важлива, вона відкриває вам величезний ринок.

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

🤫Змінні оточення та секретні секрети на прикладі React за 10 хвилин🤫

🕺Підготував для вас невеличке, до 10и хвилин, відео про те, навіщо потрібні змінні оточення, як їх використовувати та як НЕ зберігати секретні дані в коді.

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

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

В голосуванні можна обирати кілька опцій!