TGViewer
Channel Public Channel
Free React For Beginners

Free React For Beginners

@reactbeginners

💻 Про #React та #frontend та #веб розробку
🧑‍🎓 Для початківців і не тільки

👉 https://www.youtube.com/@reactdev
Open in Telegram
Subscribers
3.04K
Photos
231
Videos
5
Links
387

Showing posts older than #629 · Back to latest

Older Posts 19 shown
Post #628 2.59K
Next.JS проектували

=> Ногами
=> Не люди
=> Не для людей

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

В Next.JS ви не можете налаштувати глобальну обробку серверних помилок (наприклад логування).
Все потрібно робити для кожного API вузла окремо. А оскільки обробники ендпоінтів це звичайні функції - на них навіть декоратор так просто не повісиш.

Обговорення цієї теми висить всього на всього сім років, без жодного руху.

Такими темпами я скоро стану Next-о фобом.
  • 🤯 13
  • 😁 3
  • 👍 2
  • ❤ 1
Post #627 2.41K
Ну це просто не можу не пошарити - It Juniors роблять стрім з АНТАРКТИКИ!

Ефір вже завтра, подробиці тут. А ще можна спробувати поставити своє питання.

Як пропатчити KDE під FreeBSD вже було - тому можемо запитати чи не мерзнуть Fiber дерева в Антарктиці. Спитайте га?

💪💪💪 Оце я розумію рівень стріму)
Telegram Don't Panic Junior IT Jobs Ми до вас з ну ду-у-же крутяцьким анонсом🔥 🧊Антарктида містить близько 70% прісних водних ресурсів світу у вигляді льодовиків. 🧊Антарктида займає близько 10% земного суходолу. 🧊Антарктида — найбільш сухий континент на Землі в тому сенсі, що там вкрай рідко…
  • 🔥 3
  • ✍ 1
Post #625 2.36K
Докинув 1000 гривень на нашу банку з попереднього збору і відправив Сергію на його збір на машину + реб

Якщо щось виграємо - розіграю серед учасників каналу.

Сума збору досить велика то ж у кого є змога - долучайтеся. І десять і двадцять гривень будуть корисні

Від себе дякую!
  • ❤ 14
  • 👍 6
Post #624 2.2K
🎉Хм, схоже свабодніе вібарі на росії почалися трохи раніше запланованого🎉

В добрий путь, як то кажуть.

П.М, Ніколи не перестану дивуватися скільки ж всього корисного можна було зробити за всі витрачені рашкою ресурси.
  • ❤ 37
  • 💯 10
  • 🤯 2
Post #623 2.42K
Free React For Beginners Друзі, запускаю в пілотному режимі (два тижні) календлі Якщо вам потрібна порада з #React, або #FrontEnd, або розробкою в цілому - букайте таймслот (понеділок, четвер з 9 по 10 годину) Також приймаю побажання щодо часу, але не обіцяю що виконаю)). Ну і оскільки…
Коротенький підсумок по 1-2-1 зустрічам:

1. Заплановано сім зустрічей, з них п'ять відбулося, на дві люди чомусь не прийшли (сподіваюся що з вами усе гаразд, але якщо ви просто проспали то не треба так)
2. Теми дуже різні, від очікуваних про кар'єру/навчання до таких які сам мусив передивлятися (архітектура React з середини)
3. В цілому, мені здається такий формат ОК - але будь-ласка, хто був - дайте чесний відгук чи було це вам корисно (можна тут, можна в Link, можна в ПП)

На наступному тижні я відкрию один слот на тиждень (в понеділок або четвер) на наступний місяць і відпишусь про доступність

І на одну з тем, на яку людина не прийшла, відпишусь тут - як раз про кар'єрний шлях та розвиток, можливо комусь буде корисно.

П.М. У кого є - відкладіть трохи грошей, треба Сергію допомогти зі збором на машину (700 грн з минулого збору я як раз туди сьогодні кину)

Всім продуктивного та тихого дня.
  • 🔥 15
  • ❤ 5
Post #622 1.81K

Forwarded from Don't Panic Junior IT Jobs

Що ж, вже за 10 хвилин ми розпочинаємо наш четвертий епізод "Резюме гриль", і він буде присвячений розбору резюме спеціалістів рівня Junior. 

⏰19.00
📍Де: Ютуб канал Juniverse

Чекаємо вас з нетерпінням😎
YouTube Резюме гриль: розбір резюме спеціалістів рівня Junior #4 Сьогодні ми продовжуємо серію етерів "Резюме гриль", і наш 4 епізод буде присвячений розбору резюме спеціалістів рівня Junior. Чотири нових CV, які ми просмажимо за нашою системою оцінювання. Підкреслимо ключові моменти, які допоможуть справити враження…
  • 👍 9
  • 🤯 2
Post #621 2.23K
Не беріть #NextJS в адмінку, це погана ідея:

1. Next, в першу чергу, це server side rendering (SSR)
2. SSR це додана складність і часом суттєва (спитайте Влада)
3. SSR адмінці до одного місця не потрібен

Висновок: ви додаєте складність в обмін на ніщо.

Для адмінки беріть щось більше до цього пристосоване - можна чистий React, можна PHP, .NET + Razor. Але не Next, не наступайте на мої граблі, не робіть каку на пустому місці

П.М. На перший погляд ці двері однакові

@reactbeginners
  • 👍 43
Post #620 2.64K
Нещодавно побачив пост про змагання 100 days of code - коли ви пишете код кожен день, без перерви, протягом ста днів.

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

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

Я, коли занурююсь у якісь пет проекти паралельно з роботою, потім ще місяць можу ходити просто ніякий без бажань щось робити (навіть дійсно цікаве)

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

Тихих вихідних, бережіть себе та допомагайте ЗСУ.

@reactbeginners
  • 👍 66
  • ❤ 9
  • 😁 1
Post #619 2.44K
Дякую всім хто прийшов вчора і обіцяне:

1. Трохи відредаговане відео
2. Репозиторій оновлений учорашнім кодом

Буду вдячний за відгуки, коментарі та лайки під відео - це допомагає його поширенню на YouTube.

Мені залишається провести сьогодні останній 1-2-1 і я візьму невеличку перерву для відпочинку.

Всіх був вчора радий бачити - якщо що пишіть)

@reactbeginners
  • 🔥 31
  • 👍 10
  • ❤ 3
Post #618 2.47K
Free React For Beginners Прохання підтримати пост і обов'язково приходьте сьогодні, о 19:00. Буде і цікаво і корисно. ПМ (міг - впади!) @reactbeginners
👉 Починаємо за 5хв - беріть чай, дружину і давайте дивитися
Ставки скільки разів мене підставить Next пишіть під цим постом
  • ❤‍🔥 18
  • 👍 2
Post #617 2.54K
Прохання підтримати пост і обов'язково приходьте сьогодні, о 19:00.

Буде і цікаво і корисно.

ПМ (міг - впади!)

@reactbeginners
LinkedIn 5. NextJS - клієнтська частина від А до Я | Vitalii Ruban #NextJs та #react - запрошую всіх сьогодні, 06.03 о 19:00 на прямий ефір присвячений всьому пройденому матеріалу з експерс курсу "NextJS для початківців" Мета - зібрати все пройдене до купи і написати клієнтську частину невеличкого NextJS застосунку. В…
  • 👍 43
  • ❤ 12
  • 🏆 1
Post #616 8.08K
🎙LIVE Ця середа, 06.03, 19:00 - NextJS - клієнтська частина від А до Я

Заплановано:

1. Створення застосунку з нуля
2. Базова стилізація: reset, variables
3. Роутинг: статична сторінка, динамічна, not-found
4. Проста робота зі стейтом
5. Робота з localStorage
6. Проста пагінація

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

🤝Приходьте та поширюйте. Завтра ще продублюю на LinkedIn та попрошу вашої допомоги в поширенні.

@reactbeginners
YouTube 5. NextJS - клієнтська частина від А до Я Створюємо клієнтську частину блогу від початку і до кінця (майже 🙂) за допомогою пройденого матеріалу. А ще ви дізнаєтесь чому suppressHydrationWarning може бути досить небезпечним для вашого застосунку. 💻 Програма та матеріали - https://github.com/Drag13/NextJS…
  • 👍 30
  • ❤ 3
Post #614 2.29K
Free React For Beginners Всім привіт, завтра, в середу, о 19:00 та 19:10 виходять одразу два відео про Next.JS: 3.1 Next.JS та стилізація, в якому ми коротенько розберемо як ми можемо стилізувати наш Next.JS застосунок та які проблеми існують з CSSinJS 3.2 Практика зі стилізацією…
Відео про Next.JS та роутинг вже готове для перегляду

Зараз програма виглядає ось так:

0.0 - Вступ до курсу Next.JS
1.1 - Що таке Next.JS
1.2 - [Практика] Мій перший застосунок
2.1 - NextJs, компоненти та їх види
2.2 - Справжні клієнтські компоненти в Next.JS
2.3 - [Практика] NextJs, компоненти та їх види
3.1 - Next.JS та стилізація
3.2 - [Практика] Next.JS та стилізація
4.1 - Next.JS та клієнтський роутинг

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

І не забудьте залишити на завтра десь півтори години з 19:00 для прямого ефіру

@reactbeginners
YouTube 4-1 Next.JS та Клієнтський роутинг Як додати нову сторінку в NextJS? А куди покласти навігацію та футер? Що таке loading.tsx і навіщо він потрібен? Про все це у новому випуску Next.JS експресс курс. 💻 Програма та матеріали - https://github.com/Drag13/NextJS-express-course-app 🧑‍💻Код http…
  • ❤ 23
  • 🔥 6
  • 👍 3
Post #613 2.15K
Як знайти невикористані експорти в TypeScript проекті

npx ts-prune -p


Вітаю 🎉, ви знайшли знайшли експорти, що або зовсім не використовуються, або використовуються в середині модуля і їм можна прибрати export.

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

З #NextJS буде трохи проблем, використовуйте прапорець -i для того щоб вимкнути перевірку не потрібних файлів (page.tsx, layout.tsx, etc)

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

@reactbeginners
  • ❤ 22
  • 👍 7
  • 🥰 3
Post #612 2.3K
Всім привіт.

Сьогодні, в понеділок, о 19:00 виходить наступне відео про #NextJS присвячене роутингу. Поговоримо про те як додавати різноманітні види нових сторінок.

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

Цей ефір - кінець першої частини курсу. Лінка буде вже завтра.

Бережіть себе, допомагайте ЗСУ і гарного всім тижня!
YouTube 4-1 Next.JS та Клієнтський роутинг Як додати нову сторінку в NextJS? А куди покласти навігацію та футер? Що таке loading.tsx і навіщо він потрібен? Про все це у новому випуску Next.JS експресс курс. 💻 Програма та матеріали - https://github.com/Drag13/NextJS-express-course-app 🧑‍💻Код http…
  • 🔥 25
  • ❤ 5
  • 👍 1
Post #611 2.17K

Forwarded from Той самий Бабіч (Сергій Бабіч)

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

Гепі енду, на жаль, у цієї історії немає. Герой нашої історії загинув, а нам із вами дісталась одна з тих самих банок меду. І саме ця банка й стане головним лотом у нашому коштозборі, час на який спливає усе швидше й швидше.

Збираємо 153 000 гривень на DJI Mavic 3T, який назвемо "Бджолою помсти" для зведеної механізованої роти при 184 навчальному центрі на бахмутський напрямок. Часу — вважайте, що до пʼятниці.
Наразі зібрано:
80 267 гривень

Серед усіх учасників збору розіграю ось цю банку меду, та ще декілька дрібничок особисто від мене. Дякую усім, хто долучається бодай гривнею!

https://send.monobank.ua/jar/5cRWaZqKoK
5375411213510832
  • 👍 14
  • ❤ 8
Post #610 2.15K
Я не так часто роблю збори, але давайте у кого 20 гривень ще лишилося - допоможемо добрати на Mavic Сергію.

П.М. Не плануйте нічого на вечір середи, десь з 19:00 по 20:30
Post #609 2.59K
Як відповідально обробити відповідь від серверу - покрокова інструкція

fetch(API.user);

1. Перевірте statusCode, звичайний fetch не кидає помилок на не 2ХХ статус коди

fetch(API.user).then((response) => {
  if (!response.ok) {
    throw new Error(`Fetch failed`, { cause: response });
  }
  return response.json();
});


2. Провалідуйте тіло відповіді, особливо якщо працюєте з "чужим" бекендом

.then((maybeUser) => {
  // 2
  if (typeof maybeUser?.id !== "string") {
    throw new Error(`UserDTO is invalid`, { cause: maybeUser });
  }
});


3. Перетворіть отриманий об'єкт на модель, якою буде користуватися frontend 

.then((maybeUser) => {
  // ...2
  return { userId: maybeUser.id };
});


Паралельно, не забуваємо обробити стани коли:

1. Запит триває => показуємо індикацію завантаження
2. Запит завершився помилкою => показуємо повідомлення
3. Запит повернув "нічого" => показуємо повідомлення

І не забуваємо про AbortController (C)

Валідацію та перетворення (маппінг) моделей не обов'язково робити руками:
Yup (5.8KK завантажень, 22к ⭐️), Joi (10KK завантажень, 21к⭐️), Zod (7.6M завантажень, ⭐️29.1К )

❓Чи завжди все це потрібно? Залежить від рівня серйозності проекту. Якщо він має жити більше року і приносити гроші - варто зважити.
@reactbeginners
  • 👍 36
Post #607 2.42K
Вчора вийшли два відео про #NextJs

Хто ще не дивився - подивіться і поставте лайк, бо схоже навіть ютуб Next не любить 😀

CSS - теорія
СSS - практика

Наступне відео буде про роутинг, має бути цікавішим. А практику я думаю зробити по всьому пройденому матеріалу в прямому ефірі.
YouTube 3-1. NextJs та стилізація - CSS, CSS Modules, SCSS, CSS in JS У цьому відео ми поговоримо про стилізацію в Next.JS. Що працює одразу, що можна встановити, та які є проблеми на сьогодні з CSS in JS 💻 Програма та матеріали - https://github.com/Drag13/NextJS-express-course-app 🧑‍💻Код https://github.com/Drag13/NextJS-express…
  • 👍 37
  • ❤ 2
  • 😁 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →