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

👉 https://www.youtube.com/@reactdev
Download Telegram
Free React For Beginners
Якщо ми вже зачепили такі теми як зброю, давайте зробимо опитування, цікаво що воно покаже.

Отже опитування: Я ввжаю, що вогнепальна зброя ...
Голосування завершено, давайте підіб'ємо підсумки (а ще я розкрию страшну-престрашну правду)

Усього проголосувала 341 людина (що досить непогано, хоча і не може вважатися репрезентативним зрізом суспільства у цілому, з огляду на специфіку аудиторії).

За зброю без будь-яких обмежень маємо 41% голосів. За зброю без права носіння, а лише для тренування 43%. За повне обмеження - 16%.

Якщо узагальнити, маємо 84% людей, які підтримують доступ громадян України до зброї і це чудово. Більше того, 41% за вільне носіння зброї, це теж дуже показовий результат (який мене особисто тішить), тому що раніше, вважалося, що за вільне володіння зброєю лише 11% українців.

Тепер щодо пересторог і страшної таємниці (вибачте за цю пародію на клікбейт).

На сьогоднішній день, громадяни України які досягли 25 років, не мають судимостей, наркотичної залежності, та психічних проблем , можуть вільно купляти:

* Дробовики, в тому числі багатозарядні (з 21 року),
* Штурмові гвинтівки,
* Снайперські гвинтівки
та інші цікаві речі.

Якщо вам є 25, ви можете прямо зараз піти в магазин і забронювати собі цивільну версію штурмової гвинтівки M4, або снайперську гвинтівку для стрільби на 1.5км. Потім трохи бюрократії і все - ви власник зброї.

І незважаючи на все - масшутінгу у нас немає, а інциденти зі зброєю досить велика рідкість (хоча повірте, зброї у людей дуже багато. Лише за три місяці повномасштабної війни, лише однією мережею було продано більше 10_000 "дробовиків" (правильно казати гладкоствольної зброї) Оцінили масштаб?

А все тому, що стрільба з власної, легальної зброї це нонсенс. Знайдуть дуже швидко, зброю заберуть, а стрільця скоріше за все посадять навіть за самооборону. Поліція ставиться дуже прискіпливо до власників, дуже. І будь-який власник це чудово розуміє. Плюс, хто б що не казав, а збройова культура у нас існує. Спробуйте приїхати на тир/полігон і помахати стволом в різні боки 😃

Ось така от інформація для роздумів)

Дякую усім за голосування, за змістовні коментарі та позицію💪
@reactbeginners
👍2154🤔2
А ну кажіть правду, хто мене зурочив?

На роботі прилетіла таска - інтегрувати React Query в Next.JS застосунок. Якщо кому цікаво - гайд тут

А ще є гарна новина - я нарешті більш-менш одужав, запустив великий екран то ж думаю скоро буде якийсь ефір. Може будемо дописувати апку, а може таки нарешті дозніму NextJS + CSS і викладу хоча б щось.

Зараз тільки з роботою розібратися треба.

Всім гарного тижня!
👍26❤‍🔥113😁2🍾1
Знову бачу непорозуміння з використання контексту, тому давайте ще раз.

Маємо проблему - props drilling, коли ми змушені передавати пропси через декілька компонентів лише для якогось компоненту який лежить в самому низу.

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

І тут з'являється нюанс - контекст буде завжди викликати перерендер УСІХ компонентів які його використовують. Навіть якщо дані які їм потрібні не змінилися.  А, це, в свою чергу, буде викликати перерендер дочірніх компонентів, що викликає ефект доміно.

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

Підсумки - використовуйте контекст, він корисний, але для даних що рідко або взагалі не змінюються. Використовувати контекст для даних які змінюються багато протягом короткого проміжку часу (координати миші, позиція колонки при drag&drop) не варто.

@reactbeginners
👍3741
Forwarded from Той самий Бабіч (Сергій Бабіч)
#анонс
Доброго вечора, я до вас з мішечком гайпу. Шо там по авторським курсам? Чи можна в принципі чогось навчитися на курсах? Чим обумовлена їхня вартість? Чим відрізняється хороша школа від інфоциган, і чи існують хороші школи в принципі? Від чого залежить якість навчання та результат, а також як справи з гарантованим працевлаштуванням — про це все та багато іншого будемо спілкуватися під час запису подкасту "Є одна тема" з Анастасією Шеремет, продюсеркою освітніх курсів на факультеті Dev&DS в Projector Institute, де спеціалізується на кафедрах Front-end, Quality Assurance та Engineering Management.

Розмова буде максимально відвертою, я вже підготував багато дуже незручних запитань, тож не проґавте нагоду особисто в прямому етері стати свідками нашої розмови. І, як і завжди, під час запису етеру збиратимемо кошти на користь ЗСУ в обмін на крутезні подарунки!

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

1. Це незабутня душна/дружня (потрібне підкресліть) атмосфера в чаті!
2. Усі технічні несправності, бекання й мекання — просто перед вашими очима!
3. Донати й розіграш крутезних подарунків від мене особисто та моєї гості!
Бо потім я то гарнюнько змонтую, а оригінал стриму сховаю в плейлист для спонсорів каналу.

⚡️ ІТ-курси: освіта чи омана?
25 січня, 19:00
📺 Сергій Бабіч та Дивовижний світ веброзробки
👍111
Не зміг пройти повз, можливо тому що з 7 ранку слухаю як працює ППО)

А як ви, вірите в IT курси і "гарантоване працевлаштування"?
👍5🤯2🤔1
Харків, мої співчуття. Тримайтеся, бережіть себе та близьких.
25💔8
Весь день я відповідаю на одне єдине питання - чи потрібен цей **** useEffect?

І ви не повірите наскільки складно може бути дати на нього відповідь, якщо компонент "важить" 500 рядків, має декілька взаємозалежних ефектів, а ще, на додачу, працюючий setInterval та не очевидно написану математику.

То ж, аби не страждати як я:

1. Використовуйте ефекти виключно тоді коли без цього ніяк, наприклад для мережевих запитів. (І то це варто виносити в окремі хуки).

2. Робіть ефекти маленькими - одна задача, один ефект. Чим простіший ефект, тим легше буде потім з ним працювати.

3. Не робіть багато ефектів в одному компонентів. Якщо їх більше двох, скоріше за все ваш компонент забагато вміє і прийшов час делегувати роботу комусь іншому.

4. І не допускайте залежностей ефектів один від одного, потім розпутати цей клубок буде дуже складно.

І бережіть себе, самі бачите що відбувається. А нам би ще бажано дожити до перемоги.

@reactbeginners
22👍1311
Там у Juniverse сьогодні буде ефір о 19:00 про штучний інтелект

Піднімають цікаві питання:

- Чи замінить ШІ програміста;
- які реальні практичні задачі можна робити вже зараз із допомогою ШІ, та як їх робити;
- що саме треба розробнику-початківцю, щоб використовувати ШІ;
- чи правда, що зараз потрібно вже вміти мінімально користуватись ШІ, щоб отримати роботу;
- етичні питання стосовно ШІ.

То ж запрошую, має бути цікаво
5👍3❤‍🔥1
Free React For Beginners
Весь день я відповідаю на одне єдине питання - чи потрібен цей **** useEffect? І ви не повірите наскільки складно може бути дати на нього відповідь, якщо компонент "важить" 500 рядків, має декілька взаємозалежних ефектів, а ще, на додачу, працюючий setInterval…
Мені тут Ігорь (ви його чули на нашому YouTube) підказує:

Якшо в юзефекті є setInterval/setTimeout то треба не забувати завжди(!) в такому ефекті робити

return () => {clearInterval()/clearTimeout()}

Також не забувайте, що setTimeout якшо його не очистить виконається навіть після unmount 😉

А я ще додам, що відписуватися варто також від мережевих запитів, на щастя AbortController це дозволяє.

Ігоре, я завдання виконав, з тебе кава 😎
👍246👏32🍾1
Там на горизонті React.Conf яку проведуть на мій ДР в Неваді.

Я б поїхав, але для цього треба підписувати контракт з ТРО Монако, а я щось не хочу 😃

До-речі, ви знаєте що React постійно оновлюється? Останній реліз був випущений шістнадцять годин тому: 18.3.0-canary-3d9b20132-20240124. А от стабільній версії вже близько двох років.

П.С. Спробуйте вгадати в коментарях, де ви можете зустріти не стабільні версії React)
👍83
Free React For Beginners
Там на горизонті React.Conf яку проведуть на мій ДР в Неваді. Я б поїхав, але для цього треба підписувати контракт з ТРО Монако, а я щось не хочу 😃 До-речі, ви знаєте що React постійно оновлюється? Останній реліз був випущений шістнадцять годин тому: 18.3.0…
Якщо ми вже заговорили про React та не стабільні версії

👉 Ось ChatGPT переклав статтю про те як React випускає не стабільні версії, що таке Canary і чи дійсно Next.JS використовує щось "не те".

Погоджуватися з висновками автора чи ні - це справа інша, але читати досить цікаво.

Оригінал

@reactbeginners
👍53
😍Дивіться що нам надіслали😍

І так, це саме НАМ, бо ви туди вклали не менше, а то й більше за мене 💪

А ще я нарешті відкрив Моно 😎, так що все стане тепер трохи простіше. Завтра як раз протестуємо - то ж у кого є 30 гривень притримайте будь-ласочка. Буде збір на хімічні грілки для тих самих капеланів, бо стояти в чергуванні зараз дуже холодно. А обмороження всякі то повна лажа.

Всім дякую)
🔥40👍143
UPD: ЗБІР ЗАКРИТО ДОСТРОКОВО
🎉 Обіцяна банка на хімічні грілки.

👉Отже, збираємо на хімічні грілки для підрозділу, якими опікуються наші капелани. Вчорашня подяка саме від них.

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

💰Одна пара грілок - 29.90, працюють грілки до 10 годин. 3_000 гривень я вже поклав, так що 100 штук у нас вже є. Долучайтеся!

❗️Забув сказати - банка відкрита на 1 добу, тобто до завтра. Скільки назбираємо стільки і буде

П.М. Одну грілку зараз кладу в куртку, подивимось скільки протримається.

https://send.monobank.ua/jar/98GYsUQxyb (так, нарешті!)
ПБ: 4731185629296887 ( для таких як я)
👍162
Поки літає довбаний міг, напишу вам маленький камінгаут))

Я й досі люблю старі класові компоненти в React ❤️

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

Хуки звичайно принесли користь, особливо можливість писати власні кастомні хуки щоб шерити функціонал зав'язаний на життєвому циклі, тут не відняти. Але складні компоненти я й досі пишу на класових компонентах. І щасливий)

П.М. Рано чи пізно той міг упаде)
П.П.М. Не забудьте кинути 30 гривень на грілочки, збір закрию завтра зранку.
20👍6🔥6🤯2
❗️😍Збір закрито достроково. Зібрали більше 9000 гривень з урахуванням ПБ. 😍❗️

Цього вистачить щоб закрити потреби, а ваші ресурси не нескінченні.

Всім дякую - ви круті 💪❤️
32
Я тут трохи на вихідних загубився - спочатку треба було з грілками розібратися, потім штани останні дорвав і треба було нові, а потім просто лежав і грав в Arcanum (так він ще живий).

Але зараз буду виправлятися, чекайте :)
👍6😁21
Не популярні, але корисні хуки в React (1/3)

const inputId = useId();

Використовується в динамічних формах для зв'язки input та label, а також в компоненті врапері для label+input якщо ви не хочете прокидувати id як пропс. Безпечний для SSR.

const inputId = useId();
return <>
<label htmlFor={inputId}>Hello</label>
<input id={inputId}/>
</>


Деталі: ключ не випадковий, має вигляд :rX: де X просто глобальний counter в React. Якщо (випадково) у вас 2+ реакт застосунків на сторінці - використовуйте identifierPrefix, який передається при ініціалізації React застосунку

Сторонній ефект: Автоматизатори, які покаладються на id елементів вас не люблять. А все тому що треба користуватися data-test-id, а не лізти куди не просять.

Документація


@reactbeginners
👍489🔥3
Не популярні корисні хуки в React (2/3)

const deferedValue = useDeferredValue(value);

Використовується, коли ви хочете мати можливість відкласти оновлення якогось компоненту на "трошечки потім", наприклад під час роботи з мишкою або мережевими запитами

const [point, setPoint] = useState({ x: 0, y: 0 });
const deferedPoint = useDeferredValue(point);
return (
<>
<div
style={{ height: `50vh` }}
onMouseMove={(e) => setPoint({ x: e.screenX, y: e.screenY })}
></div>
<SomeComponent point={deferedPoint} />
</>
);


Деталі: Значення deferedValue змінюється із невеликою затримкою, проміжні значення з'їдаються, а компонент отримує останнє значення. Відповідно ви зможете зеконимити на рендері дочірніх компонентів. Для цього потрібно реалізувати PureComponent або огорнути дочірній компонент в React.memo. Окрім цього, компонент який працює з deferedValue "не підвисає", оскільки React вміє відміняти рендери, викликані оновленням deferedValue

Cторонній ефект: це оптимізація швидкодії яка трохи ускладнює код, використовувати разом із вимірюванням.

@reactbeginners
👍609❤‍🔥2
Не популярні корисні хуки в React (3/3)

Не дам, поки перші два не полайкаєте! Для кого я їх писав?

Насправді, оскільки довелося перевіряти деяки речі, то й сам дізнався цікаві моменти. Наприклад я вважав що useId видає унікальний айдішник (а це не так)

Оновлено: ніт, я не жлоб)
😁31👍2
Третій хук може й не популярний, але смачний як вафельний торт зі згущеним молоком. Але й складний, нажаль. Можливо тому й не популярний.

Все, зараз буде, налайкали)
🔥23