Free React For Beginners
описание
💻 Про #React та #frontend та #веб розробку 🧑🎓 Для початківців і не тільки 👉 https://www.youtube.com/@reactdev
3 108
подписчиков
Охват к подписчикам
124,5%
ERR
Реакции к просмотрам
1,34%
1 033 на 20 постов
Пересылки к просмотрам
0,22%
169
Постов в день
0,0
всего 20
Где отзываются чаще
доля реакций к просмотрам- 24 маяЗ новим Роком. Нехай це буде останній рік війни. А росія нехай отримує те на що заслужила. І якщо ми перетеопимо один одного, все буде добре. Усіх зі святами!4,21%
- 31 дек.З новим Роком. Нехай це буде останній рік війни. А росія нехай отримує те на що заслужила. І якщо ми перетеопимо один одного, все буде добре. Усіх зі святами!3,32%
- 17 мая 2025 г.Всім привіт! Кажуть що збори загинаються, люди перестали підтримувати #ЗСУ. А у мене завтра #деньнародження, мені потрібна ваша допомога щоб повернути в стрій наше авто. От і давайте перевіремо. В 22 році з цим не було ніяких проблем, кожен допомагав чим…2,12%
- 1 июн. 2025 г.От бачите, не подбали трохи за безпеку і вже в сибіру палає. Хай там навіть 20 літаків пошкоджено, але це просто найсильніша операція ССО у світі за якою можна знімати фільми будь-якого рівня. Вітаю всіх причетних, та й нас звісно) А ви будьте уважні, наступні тривоги не ігноруйте. Побачимося, почуємося :) Ваш зампомиш.1,83%
- 17 июн. 2025 г.Паршива нічка. Як раз приїхав проходити ВЛК і тут таке. В такі моменти шкодуєш що не служиш в ппо або не розробляєш далекобійну зброю. Співчуваю...1,78%
- 17 нояб.Повернувся на два дні в Київ) помитися поголитися відпочити) В цілому все гаразд, роботи трохи є, але всі живі здорові, вже добре. З цікавого активно розширюють штат для перехоплювачів шахедів. Має бути норм. А так, продовжуємо служити. А ви як тут?1,74%
- 24 июн. 2025 г.Часта помилка початківців з мережевими запитами - ігнорування процесу завантаження та відсутність обробки помилок. В чому суть. Поки ви розробляєте веб сторінку, у вас все добре. Сервер у вас десь поруч, не навантажений, всі запити проходять майже миттєво і завжди успішно. На проді ситуація геть інша. Ваш клієнт може бути в іншій країні, а сервер буде завантажений, або просто недоступний з різних причин. В результаті - користувач тицяє кнопку, а нічого не відбувається. За кулісами запит то пішов, але користувач про це не знає. І тицяє ще раз. А потім іще... Це погано, і на щастя зараз майже всі відображають індикацію завантаження. Але є але - часто забувають про обробку помилок. В результаті - користувач бачить вічний лоадер та заблокований UI. А перезавантажити сторінку - втратити форму яку користувач заповнював декільки хвилин. Або, якщо все зовсім погано, корзину яку він набирав... Щастя це не додає. Другий момент - загальний loader який блокує геть весь екран, хоча заблокувати потрібно, наприклад, лише кнопку submit, або якийсь конкретний віджет. Звісно, нам так простіше - але, заблоковано має бути лише мінімально необхідна частина UI. Це дозволить продовжити роботу зі сторінкою поки користувач чекає на результат. Тому, коли ви проектуєте щось з мережевими запитами - починайте з помилок. Замість fetch зробіть throw і подивіться як реагує ваш UI. І чи ок вам така реакція. Сповільніть інтернет через Google Developer Tools і вам одразу стане зрозуміло що не так.1,52%
- 7 июн. 2025 г.Харків, співчуваю. росії байдуже кого вбивати. Власне їй навіть на своїх глибоко байдуже. А з КАБами зараз можна боротися лише вибиваючи їх літаки. Робота ведеться але це займе час. Харків, тримайся(1,51%
- 4 мая 2025 г.Продовжуємо серію про налаштування #frontend проекту і тепер потурбуємося про #websecurity. 1. Перевірте, що файл .env.local або його аналог не доданй під git. Так ваші паролі або токени не потраплять в мережу, а ви не отримаєте додаткові рахунки. Всі ключі/токени/паролі які ви використовуються мають зберігатися окремо або в key vault, або хоча б на білд машині яка готує реліз. 2. Налаштуйте перевірку ваших залежностей за допомогою команди npm audit. Ця команда покаже вам пакети, що містять вразливості та допоможе оновити їх щоб це виправити. Для того щоб було менше false positive спрацювань: - - Перенесіть в dev секцію вашого package.json файлу всі залежності що стосуються розробки - prettier, eslint, jest, і т.д. - - Використовуйте npm audit з прапорцем --production або --omit=dev. - - Передайте привіт create-react-app :) Гарною ідеєю буде інтегрувати цю перевірку в merge фазу пулл реквесту. Або раніше якщо не хочеться все перероблювати :) 3. Безпека runtime. Через особливість налаштування, частіше цим займається команда інфраструктури або бекенду, але частково це можемо налаштувати і ми. Особливо якщо у нас щось накшталт #nextjs Мова йде про основні безпекові заголовки - Content-Security-Policy (CSP), X-Content-Type-Options, Feature-Policy. А якщо ви ще й піклуєтеся про приватність ваших користувачів то й Referrer-Policy. В разі правильного застосування, за заголовки можуть запобігти або суттєво зменшити шкоду користувачам вашої веб сторінки. Детальніше про ці заголовки та як їх налаштовувати я розповім в наступному пості, бо лонгріди ж ніхто не читає) Ваш ЗамПоМиш. П.М. Ви тут як? Бо останнім часом такий цирк на дроті що голова обертом.1,34%
- 14 апр. 2025 г.Початкові налаштування нового #react проекту Видаліть все зайве - зайвий код, зображення, іконки, тощо. Передивіться вже встановлені залежності коду і перенесіть в секцію dev ті залежності, що призначені для розробки (eslint, prettier, jest). Це буде корисно коли/якщо ви будете налаштовувати npm audit --omit=dev` Налаштуйте форматування за допомогою prettier та одразу застосуйте його з прапором --write. Досить сперечатися про крапки з комами. Встановіть і налаштуйте лінтер - eslint під себе, або за правилами команди. Наприклад для не використаних змінних я ставлю warning замість error, не так сіпається око. Встановіть та налаштуйте систему хуків для git - husky. Так ви зможете виконувати будь-які додаткові дії перед/після коміту/пушу. Наприклад ви зможете налаштувати husky автоматично запускати форматування staged коду. Тепер код у всіх і завжди буде виглядати одноманітно і без зусиль. Напишіть readme - Два речення про що проект, як встановити залежності (навіть якщо це тривіальний npm install бо може бути і yarn install), як запустити dev збірку, та які правила ви налаштували (а в ідеалі ще й чому) Все, можна плисти далі. Але якщо хочеться більшого то... це буде в наступному пості :) П.М. Амеліансе, я пам'ятаю що ти не фанат прітієра, та поки краще не зустрічав)1,16%
- 29 мар. 2025 г.Так панство, тут Genesis Front-End School відкриває безкоштовні курси з побудови фронт-енд застосунків. З плюсів - в теорії можуть після навчання можуть взяти на роботу З мінусів - відбір, який треба буде пройти: HTML, CSS, JavaScript/TypeScript, React. Але думається мені ви впораєтеся (або дехто взагалі ментором туди піти може 😅). Дедлайн 13 квітня, старт 19 травня. Як на мене звучить як варіант (правда умов контракту я не знаю, якщо там треба буде продати душу, то будь-те обережні, душі річ цінна навіть в поточному перебаханому сьогоденні) Тут деталі, якщо хтось влаштується буде супер. П.М. Вибачайте що контенту мало, тексту мало, всього мало. Телеграму під рукою немаю, бачу його вряди годи (лінкедин і то частіше). Та й трохи втомлююся якщо чесно. Останнім часом все дуже нервово і не просто. Напевне війна... Тримайтеся. Дотянемо, переживемо і ще посидимо на березі річки.... Всіх обняв, ваш ЗамПоМиш1,15%
- 26 июн. 2025 г.Окрім обробки завантаження та обробки помилок, не забувайте також відписуватися від асинхронних подій - таймаутів, таймерів, requestAnimationFrame та запитів на сервер. Зробити все це дуже просто - головне не забути про це :) Для відміни мережевого запиту потрібно: 1. В useEffect створити екземпляр класу AbortController 2. Передати властивість signal в поле signal методу fetch (Axios це також підтримує) 3. Повернути з useEffect метод, який викличе abort на екземплярі AbortController Все... Тепер, коли зміняться залежності ефекту, або коли компонент буде демонтовано, асинхронний запит буде відмінено. З setTimeout, setInterval, requestAnimationFrame ще простіше. Вони повертають спеціальний id і все що вам треба зробити - викликати clearInterval, clearTimeout, cancelAnimationFrame у функції, яку повертає useEffect. П.М. Планую зробити ефір в якому потоптатися по типових помилках в React. + Можливо зробити розіграш під благодійний збір на майстерню. Але поки це лише в планах. Бережіть себе.1,14%