Free React For Beginners

\n\nВін зупинить парсинг HTML і почне завантажувати цей скрипт. Коли завантаження закінчиться, він виконає цей скрипт. І лише після його виконання браузер продовжить парсинг та відображення сторінки. Така поведінка призводить до того, що, поки ваш скрипт вантажиться та виконується, новий контент на сторінці не з'являється (хоча дещо на фоні все ж таки буде відбуватися, але це вже оптимізації самих браузерів). Така поведінка не дуже сприяє гарному користувацькому досвіду. \n\nТому з'явилися спеціальні атрибути, які змінюють цю поведінку. \n\n1️⃣ Перший атрибут це async: \n\n\n\nВін каже браузеру буквально наступне: \n\n- Коли ти побачиш цей скрипт, не потрібно зупинятися. Просто почни його завантажувати у фоновому режимі, а коли завантажиш, от тоді вже виконуй.\n\nЦе дає змогу продовжувати показувати контент, паралельно із завантаженням скрипту. Але! Коли скрипт завантажиться, він почне виконуватися, а це може зупинити парсинг та відображення сторінки, якщо вона ще не довантажилася, що може бути теж не зручно. Ще один мінус в тому, що є ймовірність, що деякі елементи сторінки не встигнуть завантажитися і скрипт не зможе з ними працювати. Плюс до цього - порядок виконання асинхронних скриптів не гарантований, вони виконуються по мірі завантаження.\n\n2️⃣ Другий атрибут це defer\n\nЙого завантаження теж відбувається у фоновому режимі і не блокує відображення контенту. Але виконання скрипту буде відкладено до повного завантаження сторінки. Таким чином відображення змісту сторінки не буде заблоковане виконанням скрипту, а контент, в свою чергу, завжди буде готовий до взаємодії з кодом. Якщо у вас декілька defer скриптів, вони будуть виконані в тому самому порядку як на сторінці.\n\nЗ цікавого, якщо застосувати async та defer разом, буде вибрана стратегія defer\n\nБільш детальніше англійською тут\n\n@reactbeginners","datePublished":"2023-12-04T09:50:15Z","dateModified":"2023-12-04T09:50:15Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":6,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1685},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":48},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":28},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":6}]}},{"@type":"ListItem","position":2,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/441","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/441","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/441","headline":"[Ілюстрація] Браузер та завантаження JavaScript від Адді Османі","articleBody":"[Ілюстрація] Браузер та завантаження JavaScript від Адді Османі","datePublished":"2023-12-04T09:49:41Z","dateModified":"2023-12-04T09:49:41Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1641},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/440","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/440","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/440","headline":"Поки я тут трохи не при справах (доведеться ще мінімум тиждень вдома сидіти), хочу порадити вам інший канал п…","articleBody":"Поки я тут трохи не при справах (доведеться ще мінімум тиждень вдома сидіти), хочу порадити вам інший канал по React від Максима Рудного. \n\n🤝 Це не реклама, радше партнерство, адже у нього, до прикладу, є міні курс по GraphQL якого немає у мене, є матеріалу по React-у та навіть поради щодо оформлення резюме (ой бачили б ви моє резюме 😢 )\n\n❤️Канал українською (при чому він його зробив до того як це стало мейністрімом), тож прошу.\n\nА якщо ви його вже бачили - цікаво було б почути відгуки!","datePublished":"2023-12-01T14:29:07Z","dateModified":"2023-12-01T14:29:07Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":41,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1500},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":45},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":41}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/439","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/439","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/439","headline":"\"За і проти\" у фронтенді починається вже за 30 хвилин В програмі: > TypeScript проти програміста > Хто має те…","articleBody":"\"За і проти\" у фронтенді починається вже за 30 хвилин \n\nВ програмі: \n\n> TypeScript проти програміста\n> Хто має тестувати: розробник чи manual QA\n> No-code, low-code проти програміста\n> Live coding на інтервью: потрібен чи ні\n\nІ я таки туди доїхав :) \n\nДякую Skelar за гостинність, а з вами вже побачимось в ефірі, сподіваюся не бекати))","datePublished":"2023-11-30T16:31:34Z","dateModified":"2023-11-30T16:31:34Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":10,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1514},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":10}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/438","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/438","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/438","headline":"Паралельні роути в Next.JS, Частина друга - максимально простий приклад з багами 😂 😎З тим що таке паралельний…","articleBody":"Паралельні роути в Next.JS, Частина друга - максимально простий приклад з багами 😂\n\n😎З тим що таке паралельний роутинг ми умовно розібралися. Тепер давайте подивимось це на простому прикладі - створимо два незалежних віджети які будуть вантажитися паралельно з власною обробкою помилок та стану завантаження:\n\n=> Створіть новий Next.JS проект за допомогою create-next-app@latest parallel-demo\n\n=> В теці app створіть теки @widget1 та @widget2. Назви можуть бути довільними, але обов'язково починатися з @. \n\nЗнак @ пояснює Next-у що там будуть паралельні роути. Важливо, що назва такої теки не приймає участі в роутингу. Так шлях app/@widget/login/page.tsx буде розрахований як app/login\n\n=> В кожній з тек створіть файл page.tsx з дефолтним експортом. В компоненті напишіть щось гарне, щоб ви бачили що компоненти відображаються.\n\n=> Тепер відкрийте layout.tsx що лежить теці app та додайте до нього наступний код: \n\nexport default function RootLayout({\n widget1,\n widget2,\n}) {\n return (\n \n \n {widget1}\n {widget2}\n \n \n );\n}\n\nЗверніть увагу, що тепер наші віджети передані через пропси і мають таку саму назву як і назва теки, що починається з @\n\n=> Тепер створіть новій файл в руті і покладіть туди наступний код:\n\nexport function delay({ data = 'hello world', error = '', delay = 1000 } = {}) {\n return new Promise((res, rej) =>\n setTimeout(() => (error ? rej(error) : res(data)), delay)\n );\n}\n\nЦе примітивна функція затримки, яка дає нам можливість почекати і отримати дані або кинути якусь помилку. З її допомогою ми протестуємо можливості наших роутів.\n\n=> В перший компонент додайте виклик функції без аргументів, а в другій, передайте якийсь текст у властивість error і не забудьте зробити await: \n\nimport { delay } from '../delay';\n\nexport default async function W2() {\n const sadString = await delay({ error: 'Sorry bro' });\n return <>W2: {sadString};\n}\n\nТепер у вас на екрані має з'явитися дуже не гарна помилка, яка руйнує весь застосунок: \n\n> Unhandled Runtime Error: Error: Error: Sorry bro\n\n=> Але це дуже просто виправити. В теці другого віджету створіть файл error.tsx з дефолтним експортом і якимось змістом. Збережіть файл і тепер, замість компоненту що не зміг завантажитися, ви побачите красиву, або не дуже помилку. Але весь інший контент залишається цілим і ваш користувач все ще може працювати з застосунком!\n\nЗалишився останній крок - індикація завантаження:\n\n=> В кожному з віджетів встановіть delay в 7000 та 4000 відповідно. Тепер ваша сторінка буде вантажитися 7 секунд, що геть не зручно для користувача. Давайте зробимо завантаження паралельним! \n\n=> В теку з кожним віджетом додайте файл loading.tsx`з дефолтним експортом. Якщо у вас з'явилася помилка default export is not a react component - перезапустіть сервер, або дайте компонентам різні імена.\n\n❤️ Тепер, після завантаження сторінки, ви побачите, що наші віджети вантажаться індивідуально і виводяться на екран по мірі надходження даних, скажіть краса? \n\n❗️Пам'ятайте, що назви` loading.tsx`, `page.tsx` та `error.tsx` є зарезервованими і змінювати їх не можна.\n\nКод для погратися лежить тут\n\n@reactbeginners","datePublished":"2023-11-30T14:20:20Z","dateModified":"2023-11-30T14:20:20Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4556},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/437","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/437","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/437","headline":"Паралельні роути в Next.JS, частина перша - що та навіщо. 💡Ідея паралельних роутів дуже проста: Це, всього на…","articleBody":"Паралельні роути в Next.JS, частина перша - що та навіщо.\n\n💡Ідея паралельних роутів дуже проста: \n\nЦе, всього на-всього, можливість відобразити декілька компонентів на одній сторінці, але так, наче це повноцінні сторінки. \n\n👉А вже з цього випливає, що до цих компонентів застосовуються звичні нам правила сторінок в Next.JS:\n\n=> Вони серверні за замовчунням - відповідно ми можемо зробити асинхронний запит прямо в середині компоненту та не створювати в ньому стейт\n\n=> Підтримують loading.tsx - вам достатньо додати цей файл з дефолтним експортом, і цей компонент буде відображений під час виконання асинхронного запиту. (не треба оброблювати стан loading)\n\n=> Підтримують error.tsx - додаємо файл з дефолтним експортом і не мучаємося з обробкою помилок\n\n=> Прив'язані до URL, відповідно керувати їх появою та зникненням можна просто змінюючи URL (наприклад по кліку на Link). При цьому інші під сторінки залишаються на місті, не стрибають та не рендеряться наново.\n\n=> А ще це чудо техніки підтримує паралельне та навіть умовне завантаження! \n\n😍І все це у формі звичних нам React компонентів. Такий підхід може зменшити обсяг вашої роботи та ще й спростити код, оскільки нам не доведеться писати всю цю магію самостійно. Скажіть просто і круто? \n\n😅Нажаль лише в теорії. На практиці не все так просто і чудово як пише документація. Є баги, є проблеми, є взагалі чортіщо (рестарт серверу може допомогти). З цим і будемо розбиратися в наступному пості, тож не перемикайтесь!\n\n@reactbeginners","datePublished":"2023-11-29T15:29:59Z","dateModified":"2023-11-29T15:29:59Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":4780},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":29},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/436","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/436","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/436","headline":"Оце ви налайкали. Що робити, домовилися, треба виконувати. 🗓Отже буде: 1️⃣ Пост про те що таке паралельні роу…","articleBody":"Оце ви налайкали. Що робити, домовилися, треба виконувати. \n\n🗓Отже буде: \n\n1️⃣ Пост про те що таке паралельні роути та навіщо вони треба\n2️⃣ Пост-опис про те як їх варити\n3️⃣ Демо репозиторій, щоб код можна було потикати паличкою\n\nВсе на свіжому Next@14 та app router (на іншому і не заведеться) \n\n✍️Завтра і почнемо.","datePublished":"2023-11-28T17:09:15Z","dateModified":"2023-11-28T17:09:15Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":7,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1345},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":49},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/435","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/435","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/435","headline":"Нарешті вчора була змога більш-менш грунтовно поковиряти паралельний роутинг в Next.JS 😅 Скажу чесно - вийшло…","articleBody":"Нарешті вчора була змога більш-менш грунтовно поковиряти паралельний роутинг в Next.JS\n\n😅 Скажу чесно - вийшло далеко не з першого разу, Next крові з мене попив нормально, але задуману ідею таки вийшло зробити і виглядає вона досить не погано (принаймні поки що). \n\n❓Якщо ми назбираємо тут хоча б 31 ❤️, напишу про це більш детальний пост. \n\nВсім гарного робочого дня, бережіть себе!\n\n@reactbeginners","datePublished":"2023-11-28T09:51:12Z","dateModified":"2023-11-28T09:51:12Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":9,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1341},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":135},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":9}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/434","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/434","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/434","headline":"❓Чим #React кращий за чистий #JS? Або взагалі навіщо потрібні фреймворки? Якщо коротко - швидкість розробки т…","articleBody":"❓Чим #React кращий за чистий #JS? Або взагалі навіщо потрібні фреймворки?\n\nЯкщо коротко - швидкість розробки та боротьба зі складністю.\n\nЯкщо довго, то\n\n1️⃣Розробка проекту за допомогою будь-якого фреймворку має відбуватися швидше (тому що вам не потрібно створювати власні інструменти)\n2️⃣ Фреймворк має* допомагати вам писати код, який простіше масштабувати та підтримувати в майбутньому.\n3️⃣ Фреймворк це уніфікація. Розібратися з кодом написаним на популярному фреймворку куди простіше ніж вивчати фреймворк самописний, на який перетворюється більшість проектів на чистому JS.\n\nЗвичайно є купа \"але\":\n\nПо-перше, в будь-який фреймворк треба інвестувати час. І поки ви витрачаєте час на навчання, код не пишеться, або пишеться суттєво повільніше. І тут раніше був дуже цікавий нюанс, коли фреймворки змінювалися так швидко, що набуті знання ставали не актуальними за рік два. На щастя, з цим трохи краще.\n\nПо-друге, фреймворк має* вам допомагати писати більш підтримуваний код. Але \"має\" не значить зобов'язаний. Що на React, що на куди більш суворому #Angular можна таке налапшати що потім навіть археологи не розберуть.\n\nІ, по-третє, будь-який фреймворк вас обмежує. Чистий JS дає більше можливостей як \"накосячити\" так і зробити щось справді чудове.\n\nТому React кращий за чистий JS для більш-менш типових проектів. Після інвестиції часу в навчання - ви отримаєте змогу писати швидше, а код, скоріше за все, буде легше підтримувати та розширювати (але це не факт 😉 )\n\n@reactdev","datePublished":"2023-11-27T09:19:41Z","dateModified":"2023-11-27T09:19:41Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":7,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1780},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":41},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/433","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/433","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/433","headline":"Відео вже доступне до вашого перегляду. Буду вдячний ща коментарі та поширення. П.М. Це останнє повідомлення…","articleBody":"Відео вже доступне до вашого перегляду. Буду вдячний ща коментарі та поширення.\n\nП.М. Це останнє повідомлення на цьому тижні. Якщо раптом це буде не так, не ставтеся до нього серйозно.","datePublished":"2023-11-21T17:22:05Z","dateModified":"2023-11-21T17:22:05Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1573},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/432","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/432","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/432","headline":"Ще один офлайн в Києві - Skelar FrontEnd Meetup 😎 Мене запросили в гості на ще одну офлайн подію - Skelar Fro…","articleBody":"Ще один офлайн в Києві - Skelar FrontEnd Meetup\n\n😎 Мене запросили в гості на ще одну офлайн подію - Skelar FrontEnd Meetup, яка пройде 30.11 (четвер) о 19:00 в Києві на Подолі. В планах поговорити розвести срач про TypeScript, тестування, Low Code, та практичні завдання на інтерв'ю. \n\n🧐 Формат 3Х3 (три за, три проти) мінімум аргументів, максимум емоцій. Що з того вийде - не маю жодного уявлення, якщо чесно. Але має бути цікаво. \n\n😍 Участь безкоштовна, також є можливість прийти online. Тож хто бажає прийти - ось реєстрація","datePublished":"2023-11-21T10:40:44Z","dateModified":"2023-11-21T10:40:44Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1542},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":25},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/431","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/431","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/431","headline":"Структура React застосунку - 21/11, 19:00 👉 Обіцяне відео про структуру React застосунку виходить вже завтра,…","articleBody":"Структура React застосунку - 21/11, 19:00\n\n👉 Обіцяне відео про структуру React застосунку виходить вже завтра, у вівторок о 19:00. Вийшло 15 хвилин у досить швидкому темпі, але встиг розповісти трохи про:\n\n=> Навіщо нам потрібна структура\n=> Якими принципами керуюся\n=> Як її робити на практиці\n\n➕Ще й підсумки якісь влізли\n\nЯк завжди - коментарі лише вітаються, тим паче що тема досить неоднозначна і я впевнений що вам є що сказати з цього приводу. \n\nКому цікаво, підпишіться щоб не пропустити (бо його ютуб вже один раз відмовлявся додавати) \n\nП.М. А ще з середи мене не буде кінця тижня, так що не дивуйтеся мовчанню - просто треба деякі особисті справи закрити.","datePublished":"2023-11-20T14:37:07Z","dateModified":"2023-11-20T14:37:07Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":6,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1404},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":34},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":6}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/430","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/430","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/430","headline":"Не забувайте оброблювати помилки під час запитів на бекенд 😁 І не вірте що він буде миттєвим, показуйте людям…","articleBody":"Не забувайте оброблювати помилки під час запитів на бекенд 😁\n\nІ не вірте що він буде миттєвим, показуйте людям лоадер (так, у нас це не заборонено) \n\nВсім тихих вихідних!\n\n@reactbeginners","datePublished":"2023-11-17T08:46:17Z","dateModified":"2023-11-17T08:46:17Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":26,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1508},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":54},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":26}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/429","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/429","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/429","headline":"💪Трохи гарних новин про відео з Next.JS💪 Матеріали (презентація та тексти) для перших трьох відео про Next.JS…","articleBody":"💪Трохи гарних новин про відео з Next.JS💪\n\nМатеріали (презентація та тексти) для перших трьох відео про Next.JS готові:\n\n1️⃣ Вступ до Next.JS та його можливості\n2️⃣ Види компонентів в Next.JS\n3️⃣ Стилізація в Next.JS\n\nЗалишається відзняти та змонтувати 😎\n\nКожне відео буде складатися з короткої теорії та короткої практики - будемо робити мікро проект про попередній відео курс - React для початківців. \n\nОсь такі плани на найближче майбутнє. А ще я хочу запросити Сергія на посиденьки на тему \"Чи не завищені вимоги до It?\" Але то вже трохи пізніше)\n\nБережіть себе, допомагайте ЗСУ, скоро побачимося!","datePublished":"2023-11-16T09:26:54Z","dateModified":"2023-11-16T09:26:54Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1475},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":69},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/428","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/428","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/428","headline":"Дякую всім хто чесно ставив 🤯 📹 Тепер чекайте на відео - має вийти в понеділок або вівторок, на наступному ти…","articleBody":"Дякую всім хто чесно ставив 🤯\n\n📹 Тепер чекайте на відео - має вийти в понеділок або вівторок, на наступному тижні. Побачите наскільки все може бути просто на живому прикладі. Спробую вкластися в 10 хвилин)\n\n❓А поки ось вам питання на подумати:\n\nНавіщо нам взагалі потрібна структура проекту? Чому не можна (або можна) все писати в одному, двох, трьох файлах?","datePublished":"2023-11-16T08:21:30Z","dateModified":"2023-11-16T08:21:30Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":23,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1317},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":23}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/427","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/427","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/427","headline":"Принципи побудови структури проекту => Кожна сторінка знаходиться в окремій теці і рахується окремим незалежн…","articleBody":"Принципи побудови структури проекту\n\n=> Кожна сторінка знаходиться в окремій теці і рахується окремим незалежним модулем\n=> => Якщо компонент використовується виключно на одній сторінці, він лежить в теці цієї сторінки\n=> => Інакше компонент лежить в теці яка призначена для загальних компонентів\n=> Модулі можуть залежати лише від загальних модулів. Залежність від специфічних модулів не допускається\n=> За замовчуванням, компоненти групуються за приналежністю, а не за типом\n=> => Якщо компонент потрібен лише для navbar, він знаходиться в теці navbar\n=> => Інакше він знаходиться в теці яка призначена для загальних компонентів (проекту або модулю)\n=> Групування за типом допускається виключно в загальних модулях\n=> Якщо в модулі один компонент використовується в декількох місцях, модуль може мати власний модуль загальних компонентів\n=> Загальні компоненти мають якомого менше залежностей і ніколи не залежать від специфічних модулів\n=> Для складних проектів, допускається два модулі загальних компонентів - одна для компонентів що не містять бізнес-логіку, інша для тих що містять, але використовуються по всьому проекту\n=> Дані правила рекурсивні\n\n➕Під компонентами розуміються будь-які елементи системи - React компоненти, сервіси, класи, тощо.\n\n➕Правила можуть бути спрощені, наприклад, специфічні під модулі можуть імпортувати компоненти з інших підмодулів якщо:\n\nа) Вони обидва належать одному й тому самому модулю ТА\nб) Такі імпорти не створюють циклічну залежність, коли А залежить від Б, а Б, свою чергу від А. \n\n👉 Якщо максимально все скоротити то ось принципи якими я керуюсь: - очевидність розміщення, гуртування за функцією, мінімазація залежностей та їх очевидність, послідовність структури та одноманітність виконання правил.\n\n@reactbeginners","datePublished":"2023-11-15T09:33:01Z","dateModified":"2023-11-15T09:33:01Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":56,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1268},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":68},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":32},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":56}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/426","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/426","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/426","headline":"Принципи побудови структури проекту 👉 Спробував коротко викласти, свій алгоритм побудови структури (не архіте…","articleBody":"Принципи побудови структури проекту\n\n👉 Спробував коротко викласти, свій алгоритм побудови структури (не архітектури) проекту (наступний пост) \n\n🤔Можливо вийшло занадто складно і потрібно зробити якесь відео з наочним прикладом. \n\nТому, якщо вам все зрозуміло - ставте 👍, якщо потрібне додаткове відео - 🤯, а якщо не згодні або є запитання - прошу до коментарів.\n\nПОСТ НИЖЧЕ\n⬇️⬇️⬇️⬇️⬇️","datePublished":"2023-11-15T09:32:41Z","dateModified":"2023-11-15T09:32:41Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1268},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/425","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/425","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/425","headline":"Таки так - подався з нашим каналом #React для Початківців на Першу Премію DOU. Навряд чи зможу виграти, бо ко…","articleBody":"Таки так - подався з нашим каналом #React для Початківців на Першу Премію DOU. \n\nНавряд чи зможу виграти, бо конкуренція ну дуууууже важка але точно буде цікаво 🙂\n\nДякую всім хто приймав та приймає участь!","datePublished":"2023-11-13T11:06:17Z","dateModified":"2023-11-13T11:06:17Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":16,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1274},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":74},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":16}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/424","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/424","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/424","headline":"Уже розпочалася премʼєра 😉 Єслі шо, то це покращена та перемонтована версія стриму, що відбувався цієї середи…","articleBody":"Уже розпочалася премʼєра 😉 Єслі шо, то це покращена та перемонтована версія стриму, що відбувався цієї середи. А просто зараз триває премʼєра відео, бавлюся з функціями ютуба 😉\n\nПриємного перегляду!\n\nhttps://youtu.be/02PwesoqG-A","datePublished":"2023-11-12T16:15:10Z","dateModified":"2023-11-12T16:15:10Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":5,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1344},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":29},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":5}],"sharedContent":{"@type":"SocialMediaPosting","datePublished":"2023-11-12T16:07:36Z"}}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/423","url":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/423","mainEntityOfPage":"https://telemetr.io/es/channels/1704429261-reactbeginners/posts/423","headline":"Free React For Beginners","datePublished":"2023-11-10T12:08:37Z","dateModified":"2023-11-10T12:08:37Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/es/channels/1704429261-reactbeginners","image":"https://img.telemetr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":138,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1540},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":138}]}}]}