Паралельні роути в Next.JS, частина перша - що та навіщо.
💡Ідея паралельних роутів дуже проста:
Це, всього на-всього, можливість відобразити декілька компонентів на одній сторінці, але так, наче це повноцінні сторінки.
👉А вже з цього випливає, що до цих компонентів застосовуються звичні нам правила сторінок в Next.JS:
=> Вони серверні за замовчунням - відповідно ми можемо зробити асинхронний запит прямо в середині компоненту та не створювати в ньому стейт
=> Підтримують loading.tsx - вам достатньо додати цей файл з дефолтним експортом, і цей компонент буде відображений під час виконання асинхронного запиту. (не треба оброблювати стан
=> Підтримують
=> Прив'язані до URL, відповідно керувати їх появою та зникненням можна просто змінюючи URL (наприклад по кліку на Link). При цьому інші під сторінки залишаються на місті, не стрибають та не рендеряться наново.
=> А ще це чудо техніки підтримує паралельне та навіть умовне завантаження!
😍І все це у формі звичних нам React компонентів. Такий підхід може зменшити обсяг вашої роботи та ще й спростити код, оскільки нам не доведеться писати всю цю магію самостійно. Скажіть просто і круто?
😅Нажаль лише в теорії. На практиці не все так просто і чудово як пише документація. Є баги, є проблеми, є взагалі чортіщо (рестарт серверу може допомогти). З цим і будемо розбиратися в наступному пості, тож не перемикайтесь!
@reactbeginners
💡Ідея паралельних роутів дуже проста:
Це, всього на-всього, можливість відобразити декілька компонентів на одній сторінці, але так, наче це повноцінні сторінки.
👉А вже з цього випливає, що до цих компонентів застосовуються звичні нам правила сторінок в Next.JS:
=> Вони серверні за замовчунням - відповідно ми можемо зробити асинхронний запит прямо в середині компоненту та не створювати в ньому стейт
=> Підтримують loading.tsx - вам достатньо додати цей файл з дефолтним експортом, і цей компонент буде відображений під час виконання асинхронного запиту. (не треба оброблювати стан
loading)=> Підтримують
error.tsx - додаємо файл з дефолтним експортом і не мучаємося з обробкою помилок=> Прив'язані до URL, відповідно керувати їх появою та зникненням можна просто змінюючи URL (наприклад по кліку на Link). При цьому інші під сторінки залишаються на місті, не стрибають та не рендеряться наново.
=> А ще це чудо техніки підтримує паралельне та навіть умовне завантаження!
😍І все це у формі звичних нам React компонентів. Такий підхід може зменшити обсяг вашої роботи та ще й спростити код, оскільки нам не доведеться писати всю цю магію самостійно. Скажіть просто і круто?
😅Нажаль лише в теорії. На практиці не все так просто і чудово як пише документація. Є баги, є проблеми, є взагалі чортіщо (рестарт серверу може допомогти). З цим і будемо розбиратися в наступному пості, тож не перемикайтесь!
@reactbeginners
❤23👍7
Паралельні роути в Next.JS, Частина друга - максимально простий приклад з багами 😂
😎З тим що таке паралельний роутинг ми умовно розібралися. Тепер давайте подивимось це на простому прикладі - створимо два незалежних віджети які будуть вантажитися паралельно з власною обробкою помилок та стану завантаження:
=> Створіть новий Next.JS проект за допомогою
=> В теці app створіть теки
Знак
=> В кожній з тек створіть файл
=> Тепер відкрийте
Зверніть увагу, що тепер наші віджети передані через пропси і мають таку саму назву як і назва теки, що починається з
=> Тепер створіть новій файл в руті і покладіть туди наступний код:
Це примітивна функція затримки, яка дає нам можливість почекати і отримати дані або кинути якусь помилку. З її допомогою ми протестуємо можливості наших роутів.
=> В перший компонент додайте виклик функції без аргументів, а в другій, передайте якийсь текст у властивість
Тепер у вас на екрані має з'явитися дуже не гарна помилка, яка руйнує весь застосунок:
=> Але це дуже просто виправити. В теці другого віджету створіть файл
Залишився останній крок - індикація завантаження:
=> В кожному з віджетів встановіть
=> В теку з кожним віджетом додайте файл
❤️ Тепер, після завантаження сторінки, ви побачите, що наші віджети вантажаться індивідуально і виводяться на екран по мірі надходження даних, скажіть краса?
❗️Пам'ятайте, що назви loading.tsx, page.tsx та error.tsx є зарезервованими і змінювати їх не можна.
Код для погратися лежить тут
@reactbeginners
😎З тим що таке паралельний роутинг ми умовно розібралися. Тепер давайте подивимось це на простому прикладі - створимо два незалежних віджети які будуть вантажитися паралельно з власною обробкою помилок та стану завантаження:
=> Створіть новий Next.JS проект за допомогою
create-next-app@latest parallel-demo=> В теці app створіть теки
@widget1 та @widget2. Назви можуть бути довільними, але обов'язково починатися з @. Знак
@ пояснює Next-у що там будуть паралельні роути. Важливо, що назва такої теки не приймає участі в роутингу. Так шлях app/@widget/login/page.tsx буде розрахований як app/login=> В кожній з тек створіть файл
page.tsx з дефолтним експортом. В компоненті напишіть щось гарне, щоб ви бачили що компоненти відображаються.=> Тепер відкрийте
layout.tsx що лежить теці app та додайте до нього наступний код: export default function RootLayout({
widget1,
widget2,
}) {
return (
<html lang="en">
<body>
{widget1}
{widget2}
</body>
</html>
);
}Зверніть увагу, що тепер наші віджети передані через пропси і мають таку саму назву як і назва теки, що починається з
@=> Тепер створіть новій файл в руті і покладіть туди наступний код:
export function delay({ data = 'hello world', error = '', delay = 1000 } = {}) {
return new Promise((res, rej) =>
setTimeout(() => (error ? rej(error) : res(data)), delay)
);
}Це примітивна функція затримки, яка дає нам можливість почекати і отримати дані або кинути якусь помилку. З її допомогою ми протестуємо можливості наших роутів.
=> В перший компонент додайте виклик функції без аргументів, а в другій, передайте якийсь текст у властивість
error і не забудьте зробити await: import { delay } from '../delay';
export default async function W2() {
const sadString = await delay({ error: 'Sorry bro' });
return <>W2: {sadString}</>;
}Тепер у вас на екрані має з'явитися дуже не гарна помилка, яка руйнує весь застосунок:
> Unhandled Runtime Error: Error: Error: Sorry bro=> Але це дуже просто виправити. В теці другого віджету створіть файл
error.tsx з дефолтним експортом і якимось змістом. Збережіть файл і тепер, замість компоненту що не зміг завантажитися, ви побачите красиву, або не дуже помилку. Але весь інший контент залишається цілим і ваш користувач все ще може працювати з застосунком!Залишився останній крок - індикація завантаження:
=> В кожному з віджетів встановіть
delay в 7000 та 4000 відповідно. Тепер ваша сторінка буде вантажитися 7 секунд, що геть не зручно для користувача. Давайте зробимо завантаження паралельним! => В теку з кожним віджетом додайте файл
loading.tsx з дефолтним експортом. Якщо у вас з'явилася помилка default export is not a react component - перезапустіть сервер, або дайте компонентам різні імена.❤️ Тепер, після завантаження сторінки, ви побачите, що наші віджети вантажаться індивідуально і виводяться на екран по мірі надходження даних, скажіть краса?
❗️Пам'ятайте, що назви loading.tsx, page.tsx та error.tsx є зарезервованими і змінювати їх не можна.
Код для погратися лежить тут
@reactbeginners
GitHub
GitHub - Drag13/nextjs-parallel
Contribute to Drag13/nextjs-parallel development by creating an account on GitHub.
❤16❤🔥3
"За і проти" у фронтенді починається вже за 30 хвилин
В програмі:
> TypeScript проти програміста
> Хто має тестувати: розробник чи manual QA
> No-code, low-code проти програміста
> Live coding на інтервью: потрібен чи ні
І я таки туди доїхав :)
Дякую Skelar за гостинність, а з вами вже побачимось в ефірі, сподіваюся не бекати))
В програмі:
> TypeScript проти програміста
> Хто має тестувати: розробник чи manual QA
> No-code, low-code проти програміста
> Live coding на інтервью: потрібен чи ні
І я таки туди доїхав :)
Дякую Skelar за гостинність, а з вами вже побачимось в ефірі, сподіваюся не бекати))
👍16❤1
Поки я тут трохи не при справах (доведеться ще мінімум тиждень вдома сидіти), хочу порадити вам інший канал по React від Максима Рудного.
🤝 Це не реклама, радше партнерство, адже у нього, до прикладу, є міні курс по GraphQL якого немає у мене, є матеріалу по React-у та навіть поради щодо оформлення резюме (ой бачили б ви моє резюме 😢 )
❤️Канал українською (при чому він його зробив до того як це стало мейністрімом), тож прошу.
А якщо ви його вже бачили - цікаво було б почути відгуки!
🤝 Це не реклама, радше партнерство, адже у нього, до прикладу, є міні курс по GraphQL якого немає у мене, є матеріалу по React-у та навіть поради щодо оформлення резюме (ой бачили б ви моє резюме 😢 )
❤️Канал українською (при чому він його зробив до того як це стало мейністрімом), тож прошу.
А якщо ви його вже бачили - цікаво було б почути відгуки!
YouTube
Практичний курс по React + GraphQL. Частина 1 - план безкоштовного курсу по React
Вітаю на практичному курсі по React. Основну теорію ми проходили в попередніх курсах, а зараз настав час попрактикуватись і створити щось складне та наближене до реального життя.
Складність вивчення бібліотеки React полягає в складності вивчення її екосистеми.…
Складність вивчення бібліотеки React полягає в складності вивчення її екосистеми.…
👍35🔥10❤🔥2❤1
[Пояснення] Браузер та завантаження JavaScript від @reactbeginners
😎Тема корисна, а ще її буває питають на співбесідах, то ж давайте розбиратися.
✍️ Коли браузер завантажує нашу сторінку - спершу він бачить її просто як звичайний текст. Оскільки працювати з текстом не зручно, відбувається токенізація - розбиття тексту на токени, які паралельно перетворюються на Document Object Module або DOM який вже буде відмальовуватися на сторінці. Цікавим моментом є те, що браузеру не потрібно чекати завантаження всієї сторінки - він буде відмальовувати контент паралельно із завантаженням. Це значно прискорює момент коли наш користувач зможе побачити контент і це дійсно круто.
Але що відбудиться, коли браузер зустріне тег
Насправді, це залежить від того, який саме скрипт він побачить.
Якщо браузер зустріне звичайний скрипт (який ще називається синхронним):
Він зупинить парсинг HTML і почне завантажувати цей скрипт. Коли завантаження закінчиться, він виконає цей скрипт. І лише після його виконання браузер продовжить парсинг та відображення сторінки. Така поведінка призводить до того, що, поки ваш скрипт вантажиться та виконується, новий контент на сторінці не з'являється (хоча дещо на фоні все ж таки буде відбуватися, але це вже оптимізації самих браузерів). Така поведінка не дуже сприяє гарному користувацькому досвіду.
Тому з'явилися спеціальні атрибути, які змінюють цю поведінку.
1️⃣ Перший атрибут це
Він каже браузеру буквально наступне:
- Коли ти побачиш цей скрипт, не потрібно зупинятися. Просто почни його завантажувати у фоновому режимі, а коли завантажиш, от тоді вже виконуй.
Це дає змогу продовжувати показувати контент, паралельно із завантаженням скрипту, що вже виглядає краще.
Але! Коли скрипт завантажиться, він почне виконуватися, а це зупинить парсинг та відображення сторінки, якщо вона не встигла повністю завантажитися. Ще один мінус в тому, що є ймовірність, що деякі елементи сторінки не встигнуть завантажитися і скрипт не зможе з ними працювати. Плюс до цього - порядок виконання асинхронних скриптів не гарантований, вони виконуються по мірі завантаження.
2️⃣ Другий атрибут це
Його завантаження теж відбувається у фоновому режимі і не блокує відображення контенту. Але виконання скрипту буде відкладено до повного завантаження сторінки. Таким чином відображення змісту сторінки не буде заблоковане виконанням скрипту, а контент, в свою чергу, завжди буде готовий до взаємодії з кодом. Якщо у вас декілька defer скриптів, вони будуть виконані в тому самому порядку як на сторінці.
З цікавого, якщо застосувати
Більш детальніше англійською тут
Ілюстрацію цього всього веселого - дивись постом вище
@reactbeginners
😎Тема корисна, а ще її буває питають на співбесідах, то ж давайте розбиратися.
✍️ Коли браузер завантажує нашу сторінку - спершу він бачить її просто як звичайний текст. Оскільки працювати з текстом не зручно, відбувається токенізація - розбиття тексту на токени, які паралельно перетворюються на Document Object Module або DOM який вже буде відмальовуватися на сторінці. Цікавим моментом є те, що браузеру не потрібно чекати завантаження всієї сторінки - він буде відмальовувати контент паралельно із завантаженням. Це значно прискорює момент коли наш користувач зможе побачити контент і це дійсно круто.
Але що відбудиться, коли браузер зустріне тег
script? Якщо браузер зустріне звичайний скрипт (який ще називається синхронним):
<script src="/index.js"></script>
Він зупинить парсинг HTML і почне завантажувати цей скрипт. Коли завантаження закінчиться, він виконає цей скрипт. І лише після його виконання браузер продовжить парсинг та відображення сторінки. Така поведінка призводить до того, що, поки ваш скрипт вантажиться та виконується, новий контент на сторінці не з'являється (хоча дещо на фоні все ж таки буде відбуватися, але це вже оптимізації самих браузерів). Така поведінка не дуже сприяє гарному користувацькому досвіду.
Тому з'явилися спеціальні атрибути, які змінюють цю поведінку.
1️⃣ Перший атрибут це
async: <script async src="/index.js"></script>
Він каже браузеру буквально наступне:
- Коли ти побачиш цей скрипт, не потрібно зупинятися. Просто почни його завантажувати у фоновому режимі, а коли завантажиш, от тоді вже виконуй.
Це дає змогу продовжувати показувати контент, паралельно із завантаженням скрипту, що вже виглядає краще.
Але! Коли скрипт завантажиться, він почне виконуватися, а це зупинить парсинг та відображення сторінки, якщо вона не встигла повністю завантажитися. Ще один мінус в тому, що є ймовірність, що деякі елементи сторінки не встигнуть завантажитися і скрипт не зможе з ними працювати. Плюс до цього - порядок виконання асинхронних скриптів не гарантований, вони виконуються по мірі завантаження.
2️⃣ Другий атрибут це
defer<script defer src="/index.js"></script>
Його завантаження теж відбувається у фоновому режимі і не блокує відображення контенту. Але виконання скрипту буде відкладено до повного завантаження сторінки. Таким чином відображення змісту сторінки не буде заблоковане виконанням скрипту, а контент, в свою чергу, завжди буде готовий до взаємодії з кодом. Якщо у вас декілька defer скриптів, вони будуть виконані в тому самому порядку як на сторінці.
З цікавого, якщо застосувати
async та defer разом, буде вибрана стратегія deferБільш детальніше англійською тут
Ілюстрацію цього всього веселого - дивись постом вище
@reactbeginners
🔥37❤6👍5👏1
❤️Створимо казку разом!❤️
Завтра день Святого Миколая і це чудова нагода покодити щось цікаве.
Давайте зберемося сьогодні, у Вівторок, о 19:00 і спробуємо написати інтерактивну казку на Next.JS
В програмі:
=> Дитяча казка про дівчинку Юсю та Снігокрай
=> Доросла казка про Next.JS та експорт в статику
=> 18+ казка про деплоймент Next.JS на GhPages
Ефір буде тривати до переможного кінця, але сподіваюся не більше ніж 3 години.
Приходьте, буде цікаво 😍
П.М. Так, мені привезли мікрофон 😅
П.П.М. репозиторій
@reactbeginners
Завтра день Святого Миколая і це чудова нагода покодити щось цікаве.
Давайте зберемося сьогодні, у Вівторок, о 19:00 і спробуємо написати інтерактивну казку на Next.JS
В програмі:
=> Дитяча казка про дівчинку Юсю та Снігокрай
=> Доросла казка про Next.JS та експорт в статику
=> 18+ казка про деплоймент Next.JS на GhPages
Ефір буде тривати до переможного кінця, але сподіваюся не більше ніж 3 години.
Приходьте, буде цікаво 😍
П.М. Так, мені привезли мікрофон 😅
П.П.М. репозиторій
@reactbeginners
YouTube
Next.JS та казка на Святого Миколая
❤️ Давайте разом створимо казку до дня Святого Миколая і викладемо її для всіх
В програмі:
- Дитяча казка про дівчинку Юсю та Снігокрай
- Доросла казка про Next.JS та експорт в статику
- 18+ казка про деплоймент Next.JS на GhPages
🔨 Код https://gith…
В програмі:
- Дитяча казка про дівчинку Юсю та Снігокрай
- Доросла казка про Next.JS та експорт в статику
- 18+ казка про деплоймент Next.JS на GhPages
🔨 Код https://gith…
❤36🔥11❤🔥2👍1
Free React For Beginners
❤️Створимо казку разом!❤️ Завтра день Святого Миколая і це чудова нагода покодити щось цікаве. Давайте зберемося сьогодні, у Вівторок, о 19:00 і спробуємо написати інтерактивну казку на Next.JS В програмі: => Дитяча казка про дівчинку Юсю та Снігокрай…
❤️А це маленький подарунок, який буде розіграний серед тих, хто поширить цей ефір в соціальних мережах.
Для того щоб взяти участь у розіграші потрібно поширити лінк на ефір на Ютуб та надіслати мені скріншот, щоб я додав вас у список 😎
Приймаються дописи в LinkedIn, Instagram, Facebook)
Дякую тій людини хто його мені віддав на ефір 😍
@reactbeginners
Для того щоб взяти участь у розіграші потрібно поширити лінк на ефір на Ютуб та надіслати мені скріншот, щоб я додав вас у список 😎
Приймаються дописи в LinkedIn, Instagram, Facebook)
Дякую тій людини хто його мені віддав на ефір 😍
@reactbeginners
👍27❤8❤🔥1
🔨Чотири з половиною години йшов Ефір🔨
😢 І в кінці кінців Next.JS мене таки підвів. Те що працювало локально - не працювало на сервері. Виявилося (хто б міг подумати) що Next не гарантує однакову поведінку для локальної розробки та під час експорту в статику.
😎Але ні мене, ні слухачів це не зупинило і ми просто переписали апку з Next.JS на чистий React. І, ви не повірите, але воно працює 😊 Хоча, звісно, дизайнер з мене дуже посередній.
😅 Вже зараз я розумію що, насправді, можна було обійтися без переписування, але вночі все виглядало трохи складніше.
Ефір можна подивитися тут
Репозиторій тут
❤️Дякую всім хто був зі мною на цьому майже марафоні - Ви круті!
😍Вітаю всіх із днем Святого Миколая
💪Вітаю всіх із днем Збройних Сил України.
А це вам маленький подарунок
😢 І в кінці кінців Next.JS мене таки підвів. Те що працювало локально - не працювало на сервері. Виявилося (хто б міг подумати) що Next не гарантує однакову поведінку для локальної розробки та під час експорту в статику.
😎Але ні мене, ні слухачів це не зупинило і ми просто переписали апку з Next.JS на чистий React. І, ви не повірите, але воно працює 😊 Хоча, звісно, дизайнер з мене дуже посередній.
😅 Вже зараз я розумію що, насправді, можна було обійтися без переписування, але вночі все виглядало трохи складніше.
Ефір можна подивитися тут
Репозиторій тут
❤️Дякую всім хто був зі мною на цьому майже марафоні - Ви круті!
😍Вітаю всіх із днем Святого Миколая
💪Вітаю всіх із днем Збройних Сил України.
А це вам маленький подарунок
❤54👍14
Знову постало питання що є проблеми з TS. А ну допоможіть мені з цим розібратися:
Я + TS = ? Якщо ви обрали варіант "потрібна допомога" - обов'язково напишіть в чому і можливо вона прийде :)
Я + TS = ? Якщо ви обрали варіант "потрібна допомога" - обов'язково напишіть в чому і можливо вона прийде :)
Anonymous Poll
14%
Жодних проблем
69%
Зідка Бувають складнощі
18%
Потрібна допомога (напишу в коментарях)
👍7
Forwarded from Той самий Бабіч (Сергій Бабіч)
Хто любить котиків? Усі люблять котиків! І я люблю котиків. Я можу не любити React, але котики — святе. Тому просто приходьте до мене в гості цієї неділі, об 11:00 ранку, аби затишно посидіти в чатику на ютубі і подивитися, як я буду показувати чудеса верстки і робити виключно на HTML та CSS те, для чого зазвичай тягнуть JavaScript. Що буду верстати? Сайт про котиків, звичайно ж!
А заодно й зберемо трошки гривень для наших котиків-богунівців. То як, ждать вас в гості?
🔥 ЛАЙВКОТИНГ №1 🔥
📅 10 грудня, 11:00
Переходьте й обовʼязково ставте дзвіночок-нагадування.
А заодно й зберемо трошки гривень для наших котиків-богунівців. То як, ждать вас в гості?
Переходьте й обовʼязково ставте дзвіночок-нагадування.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤44❤🔥8👍5
😈За що я "люблю" Next.JS👿
Не буду довго розводитися, просто покажу.
🖥 Подивіться на ці два зображення.
Маємо один і той самий компонент, який відрізняється одним єдиним рядком -
Побачили? Тепер подивіться на помилку в самому низу зображень:
👉 Якщо
👉 Якщо
🤯Любий Next-е, може ти вже визначишся? Бо я з тобою посивію, грець би тебе вхопив....
Насправді, ця помилка виникає коли назва парамсу, який повертає функція не співпадає з назвою теки. В даному прикладі, моя тека називається [id], а парамс - v, тому Next і кидає цю помилку. Але можна ж було це по-людськи написати .
Тепер ви знаєте.
@reactbeginners
Не буду довго розводитися, просто покажу.
🖥 Подивіться на ці два зображення.
Маємо один і той самий компонент, який відрізняється одним єдиним рядком -
use-client на початку файлу і який я невдало намагаюся збілдати в режимі export. Побачили? Тепер подивіться на помилку в самому низу зображень:
👉 Якщо
use-client відсутній, помилка говорить про те що білд не можливий, бо функція generateStaticParams не знайдена👉 Якщо
use-client присутній, помилка каже що неможливо використовувати директиву use-client разом з функцією generateStaticParams (тобто тут він її таки знайшов!)🤯Любий Next-е, може ти вже визначишся? Бо я з тобою посивію, грець би тебе вхопив....
Тепер ви знаєте.
@reactbeginners
👍34❤4😁4🤯2
Поки літає довбаний міг, можна подивитися як наживо верстає Бабіч 💪
👍3
Forwarded from Той самий Бабіч (Сергій Бабіч)
Ви прокинулися? Тоді гайда на лайвкотинг! Покажу кілька хитрощів, як за допомогою CSS можна зробити те, для чого зазвичай тягнуть JS.
А ще збиратимемо кошти на потреби 1-ї ОБрСпП ім. Івана Богуна, з крутезними подарунками за донати.
Чекаю на вас!
Початок об 11:00!
P.S. Я вас ще за дві хвилинки до початку пінгану
https://youtube.com/live/53M2Y1QwSlY
А ще збиратимемо кошти на потреби 1-ї ОБрСпП ім. Івана Богуна, з крутезними подарунками за донати.
Чекаю на вас!
Початок об 11:00!
P.S. Я вас ще за дві хвилинки до початку пінгану
https://youtube.com/live/53M2Y1QwSlY
YouTube
Лайвкодинг: Меню-трансформер, карусель картинок та тултипи БЕЗ JavaScript!
Під час етеру було зібрано 12 417 гривень на потреби ЗСУ.
Посилання на репозиторій з кодом: https://github.com/serhii-babich/spacecats
Чисті HTML та CSS там, де ніхто кроку без JavaScript ступити не може? А це взагалі можливо? Якщо хочеш дізнатись, то подивись…
Посилання на репозиторій з кодом: https://github.com/serhii-babich/spacecats
Чисті HTML та CSS там, де ніхто кроку без JavaScript ступити не може? А це взагалі можливо? Якщо хочеш дізнатись, то подивись…
❤14👍8
Free React For Beginners
Знову постало питання що є проблеми з TS. А ну допоможіть мені з цим розібратися:
Я + TS = ? Якщо ви обрали варіант "потрібна допомога" - обов'язково напишіть в чому і можливо вона прийде :)
Я + TS = ? Якщо ви обрали варіант "потрібна допомога" - обов'язково напишіть в чому і можливо вона прийде :)
💪 Результати вийшли цікаві, і я радий що в більшості (69%) труднощі з TypeScript виникають лише зрідка.
😎А щоб підтримувати ваш рівень на належному рівні - зробив маленьке відео про ключове слово
💡Кому цікаво чим
🤝 Дякую всім хто писав детальні коментарі про свої складнощами з TS. Це було не марно, будемо думати що з ними робити.
😎А щоб підтримувати ваш рівень на належному рівні - зробив маленьке відео про ключове слово
satisfies, яке з'явилося в TS. 4.9💡Кому цікаво чим
satisfies відрізняється від as або прямого вказання типу - прошу до відео🤝 Дякую всім хто писав детальні коментарі про свої складнощами з TS. Це було не марно, будемо думати що з ними робити.
YouTube
TypeScript, приведення типів і satisfies
👉 Розбираємо помилку "argument of type is not assignable to ..." та з'ясовуємо що може нове ключове слово в TypeScript: satisfies
✉️ Telegram: https://t.me/reactbeginners
❤️ Підтримати канал: https://opencollective.com/farstar
✉️ Telegram: https://t.me/reactbeginners
❤️ Підтримати канал: https://opencollective.com/farstar
👍25❤7
Free React For Beginners
💪 Результати вийшли цікаві, і я радий що в більшості (69%) труднощі з TypeScript виникають лише зрідка. 😎А щоб підтримувати ваш рівень на належному рівні - зробив маленьке відео про ключове слово satisfies, яке з'явилося в TS. 4.9 💡Кому цікаво чим satisfies…
Судячи з усього, дві третини моїх глядачів на YouTube сидять на інтернеті від Київстар 😁
😁56👍7
Давайте трохи допоможемо Сергію. Там відносно не багато, але потрібно.
Я теж зараз трохи підкину.
Я теж зараз трохи підкину.
❤6