Free React For Beginners
3.46K subscribers
231 photos
5 videos
1 file
385 links
💻 Про #React та #frontend та #веб розробку
🧑‍🎓 Для початківців і не тільки

👉 https://www.youtube.com/@reactdev
Download Telegram
❤️ Більше подарунків! ❤️

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

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

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

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

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

Бережіть себе і до скоро зустрічі.
👍16❤‍🔥2
👉 Коротенький апдейтик 👈

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

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

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

Такі у нас справи, бережіть себе і продовжуємо працювати.
👍32❤‍🔥4
🔥Отже, це сталося! 🔥

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

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

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

А ви бережіть себе і скоро побачимось!
42🔥18👍11🤩2
А от і наше відео про типові помилки в React

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

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

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

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

@reactbeginners
👍203🔥2
А ось приклад паралельної активності

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

Якщо з його допомогою буде знищено хоча б одна одиниця будь-якої техніки русні, він окупиться багатократно
🔥445👍1
Поки я сиджу в коридорі - напишу корисний пост key

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

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

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

Бережіть себе, і завтра побачимось на одному з найскладніших для мене ефірів.
👍45🔥2
Повітряна тривого продовжується, тож давайте подивимось що у нас з розіграшем та зборами

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

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

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

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

Бережіть себе!
👍152
ДЯКУЮ ВСІМ ХТО ВІДКУГНУВСЯ, ВИ НЕЙМОВІРНІ!!!!!!
15
Вітаю з відбоєм!

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

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

💰 А ще в нас тепер є банка, де все-все видно
👍17
Субота, ранок, а я готуюсь до виступу і нервую як на першому!

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

👉 Тож приходьте сьогодні на ефір (він о 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

Все, побіг готуватись щоб не осоромитись!
👍2081🔥1
Ефір готовий для перегляду, але давайте з головного

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

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

👉 А от щодо самого ефіру - мені потрібна ваша думка, тож, будь-ласка дайте відповідь на наступне коротеньке опитування
12❤‍🔥1
Поки я чекаю на накладну - давайте про навчальні активності на цей тиждень

👉 Ще одне коротке відео про querySelector, useCallback, і відписки від fetch з useCallback. Поговоримо про їх не правильне використання і помилки до яких це призводить. Прикладу коду в процесі, відео буде в середу - четвер.

👉 Зробити текстову вижимку до пункту 1 для тих кому текстовий формат зручніший (як мені)

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

👉 Ще хочу показати цікаву штуку з TypeScript (використання проекцій типів), але не знаю як це краще зробити, бо це просто відірвана, але прикольна фіча. Можливо зроблю 10 хвилинне відео. Якщо є ідеї - пишіть в коментарі.

Після цього піду трохи на паузу бо треба здати екзамен для допуску до польотів на FPV (а це капець як складно для мене) та відпочити перед стартом проекту.

А які плани у вас?
👍21❤‍🔥1
Обіцяний звіт про придбане

Загалом ми придбали 0.36м2 кровоспинного матеріалу і витратили трохи більше 14_000 гривень. Відправка в госпіталь буде на цьому тижні, чекаємо на фото звідти.

Ще раз дякую всім хто долучився.
👍17👏42
Пост для роздумів про зброю

👉 Зброї в Україні не просто багато, а дуже багато

Весною 2022 року, в Україні відбулась так звана "хатсанізація" країни (хатсан - турецька торгова марка зброї). Тільки в Києві і тільки до початку літа було видано більше 10_000 тимчасових дозволів на зброю для цивільних. Загальна кількість зброї набагато більша і продовжує зростати.

👉 Отримати зброю звичайній цивільній особі - не щось незвичайне

Для отримання повноцінного дозволу на зброю потрібно пройти курси поводження зі зброєю, просте медичне обстеження, встановити сейф і подати пакет документів в дозвільну систему. Спрощений порядок отримання дозволу ще простіший. Тому дозвільна система не є перепоною для цього (особливо зараз)

👉 Цивільна зброя, при вмілому використанні, може бути ефективною проти загарбника

Ходить байка, яку я чув вже не від однієї людини, що під час наступу на Києв, колона військової техніки була зупинена двома цивільними, які обстрілювали її з великої дистанції імітуючи роботу снайперів ЗСУ. Правда це чи ні, але те, що цивільні успішно* партизанили по лісах зі звичайною цивільною зброєю - факт.

👉 Звичайно, не все так рожево-райдужно.

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

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

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

На цьому тему зброї на каналі будемо вважати закритою, переходимо знову до React. У кого є питання - прошу в приват.
👍18
Перший випуск React Code Smells - чому не потрібно зберігати похідні дані в State та що робити щоб їх не зберігати

🎉 Зробив перший випуск React-Code-Smells - рубрики коротких відео про помилки або так звані bad practice в React.

Ось вижимка (але зайдіть подивіться, відео аж 5 хвилин)

✍️ Похідні дані це такі дані які повністю залежать від інших (даних) і мають змінюватися разом з ними. Наприклад валідаційні дані, ціна зі знижкою, тощо.
✍️ Похідні дані не треба зберігати в стейті. Це роздуває і ускладнює стейт, створює простір для помилок.
✍️ Замість збереження таких даних - обраховуйте їх під час рендеру. Якщо правила обрахування складні - виносьте ці правила в окрему, чисту, функцію і тестуйте її. Це підвищить надійність коду і навіть читабельність.

Окремо лежить репозиторій з прикладами, які планую потроху доповнювати.

А які ознаки "поганого коду" ви знаєте? Напишіть в коментарях і, можливо, вони з'являться в наступних відео з посиланням на вас 😎

@reactbeginners
👍15❤‍🔥1
React та зомбі процеси, або чому потрібно відписуватися від усяких інтервалів та fetch-ів

🤩 Ще одне відео з серії #ReactCodeSmells. На цей раз 7 хвилин про те, чому і як потрібно відписуватись від усіляких setInterval, setTimeout, та fetch і що буде якщо ні.

Ну і коротенька вижимка для текстофілів

✍️ React не вміє автоматично відміняти триваючи в часі завдання. Відповідно, може статися ситуація, коли вони будуть вже не потрібні, але продовжать виконуватися.

✍️ Для відміни таких "процесів", з хуку useEffect поверніть метод, який буде викликаний перед видаленням компоненту.

✍️ Для відміни fetch, використовуйте AbortController або axios (але там теж AbortController вже)

Гарних всім вихідних!
@reactbeginners
👍14
А давайте завтра зробимо ефір з ChatGPT та Реакт.

Подивимось що зможемо накодити.

Ідеї щодо того, що будемо створювати - в коментарі!
🔥82👍11
Ефір так ефір - 19/02, 13:00!

Ну що, давайте подивимось що в нас вийде якщо схрестити React та ChatGPT.

Нічого серйозного не пропоную - будемо експерементувати разом. Тому всі в чат!

А спонсором цього шедеврального каверу є нейронна мережа DELL E 2 яка видала його на такий запит: "Cover image for YouTube stream about the ChatGPT and ReactJs framework "

Коротше буде весело)
👍26🤔2