Free React For Beginners

🎉Next.JS оновився до версії 13.4! Вчора, 04.05 Next випустив довгоочікуване оновлення в якому, зокрема: 1️⃣ Новий роутер з більш зручною підтримкою layout 2️⃣ Серверні компоненти 3️⃣ Спрощене отримання даних 4️⃣ Тека App замість src Сідаю готувати нове відео, бо зміни там і цікаві і значні. Дякую AmelianceSkyMusic за наводку!

А ось і Next.js 🎉 Нарешті виклав довгообіцяне відео про Next.JS. Хотів вкластися в 15 хвилин, але не вийшло. У відео буде: 👉 Відмінності Next.JS і React. 👉 Можливості (не всі) Next.JS 👉 Чого в Next.JS немає. 🧑‍💻 І 10 хвилин практики під час якої я покажу як створювати сторінки, як створювати API ендпоінти, як це зв'язати до купи і як працює серверний рендерінг. Вдячний за поширення та коментарі! @reactbeginners

🥶 Отже про semver🥶 Насправді нічого складного в ньому немає, а життя він спрощує людям дуже і дуже сильно. ✍️ Зазвичай версія програмного продукту складається з 3 (четверта то не по канону) частин: <Major>.<Minor>.<Patch>-<postfix>, наприклад: 0.23.11 або 3.9.2-alpha. Версії, зазвичай числові, постфікси буквенно-числові. Теоретично можна emoji втулити, але я такого ще не бачив. 👉 Секція patch призначена для виправлень багів. Секція minor для нової функціональності, яка не ламає стару, а секція major призначена або для значних змін або для змін які ламають попередній функціонал, так звані breaking changes. 🧨 Breaking changes - це такі зміни, які змушують користувачів змінювати код для того, щоб він продовжував працювати. Тобто, в буквальному перекладі, ламаючі зміни. 🗒 Наприклад у нас є функція trim(line, maxSize) яка першим аргументом приймає рядок, а другим максимально допустимий розмір рядка. Якщо змінити порядок аргументів, це breaking change і ви зобов'язані змінити major версію. А якщо до другого аргументу додати значення за замовчуванням - це minor оновлення, оскільки це додаткова функціональність яка нічого не ламає. ❗️Є з цього правила одне виключення - мажорна версія 0. Вона вважається не стабільною за замовчуванням і minor оновлення має право на breaking change. Майте це на увазі. ❤️ Такий підхід, теоретично, дуже спрощує життя розробникам. Уявіть собі, що ви встановили собі React версії 18.1.3 а, через декілька тижнів ви побачили, що вже вийшов React 18.2.1. Якщо (if? if is good!(C)) розробники React притримуються політики semver, то ви одразу розумієте, що можете безпечно оновити залежність, все буде працювати як і до того плюс ви отримаєте нову функціональність та багфікси. Дуже зручно. Але є одне але - не всі притримаються такої політики. Тому найкращий спосіб працювати з semver наступним чином: 1️⃣ Коли ми пишемо власний код - ми завжди притримуємось семверу. Це не важко і робить користування нашим кодом зручнішим і безпечнішим для інших. Такий от вклад в ком'юніті. 2️⃣ Коли ми використовуємо чужий код - ми перевіряємо чи дотримуються розробник semver (React -так) Сподіваюся було корисно і будете підтримувати semver, так само як і я. @reactforbeginners П.М. Підготовка до відео з Next нарешті завершена, так що відео вже не за горами!

Складно правда? А тепер відкрийте список залежностей проекту на якомусь CRA. І ми з цим живемо кожен день.

Магія залежностей package.json ❓ Що відбувається коли ви встановлюєте нову залежність 1️⃣ npm шукає спеціальний файл налаштування .npmrc. Якщо його немає або в ньому не змінена адреса реєстру, npm буде використовувати https://registry.npmjs.org в якості реєстру. І так, ви можете вказати власний, приватний реєстр. 2️⃣ Якщо бібліотека ще не встановлена і а) ви не вказали її версію вручну і б) не вказали параметри додавання, npm візьме останню версію з реєстру, додасть її до package.json додавши перед версією символ ^, а також додасть в package.lock.json 3️⃣ Символ ^ означає, що при оновленні залежностей, npm має право взяти останню версію в рамках мажорної. Так ^3.0.0 може перетворитися на 3.2239.9, але не може на 4.0.0. Це правило не розповсюджується на пакети мажорної версії 0. Ви можете використати прапорець --save-exact щоб npm зафіксував конкретну версію бібліотеки. Це називається semver, або семантичне версіонування про яке буде в наступному пості. 4️⃣ Якщо бібліотека вже встановлена, npm оновоить її використовуючи п.3. Ці зміни будуть зафіксовані як в package.json так і package-lock.json. 5️⃣ Те саме, окрім додавання в packge.json відбувається з усіма підзалежностями, відповідно до налаштувань в їх власних package.json. 6️⃣ Існує цікава ситуація, коли під час апдейту, версія залежності першого рівня не змінюється, але через "люфт" версій можуть змінитися підзалежності, . Саме тому, package-lock.json обов'якзово має бути закомічений. Він дозволяє контролювати всі залежності незважаючи на їх рівень та гарантує ідентичність залежностей у вас, вашого колеги та на проді. 7️⃣ Якщо ви встановлюєте залежності на існуючому проекті і файл package-lock.json існує - npm встановить залежності відповідно до того що лежить в package-lock.json файлі ігноруючи все що я написав вище. Якщо packge-lock не існує, всі версії будуть вираховуватися відповідно до описаних правил на основні pacakge.json після чого сформується package-lock.json. І так, є не 0 вірогідність що після цього ваш проект взагалі не запуститься (особистий досвід на одному з хакатонів України) Висновки: 👉Package-lock.json - є обов'язковим файлом у вашому проекті, звісно якщо ви не прихильник глибокого дебагу.

Genesis та НаУКМА відкрили набір на безплатну програму Software Engineering School Курс буде корисним розробникам рівнів Junior та Middle, які прагнуть перейняти експертизу технічних команд глобальних IT-продуктів, систематизувати наявні знання та розвинути архітектурні підходи в розробці.  На курсі вивчатимуть:  - чистий код, який легко підтримувати;  - архітектурні патерни, принципи та підходи до - - проєктування;  - роботу з хмарними сервісами;  - інфраструктуру та безпеку;   - специфіку роботи технічних команд у продуктових компаніях. Навчання складається з: - лекцій; - практичних завдань; - live refactoring сесій; - воркшопів у форматі Containers Immersion Day - від Amazon Web Services. Зареєструватися можно за посиланням. #можливості #навчання Всі наші платформи 👉Територія джунів | Підтримати канал

Відповідь на попередні задачі 👉 Як правильно написали в коментарях - в обох випадках потрібно використовувати вбудований хук useRef, який призначений для збереження в собі будь-яких даних. Це дуже схоже на useState, але є декілька відмінностей. 1️⃣ Зміна useRef не викликає новий рендер. Дуже зручно якщо нам потрібно зберігати якусь супутню інформацію, яка не потребує перемальовувань, або викликає циклічний рендер, як у задачі № 1. 2️⃣ useRef мутується за допомогою властивості current:

const renderCounter = useRef(0);
renderCounter.current = renderCounter.current +1

Також, в useRef є ще одна корисна можливість "з коробки": Якщо передати отриманий з ref об'єкт в ref елементу, можна отримати посилання на цей DOM елемент:

export default function App() {
  const btnRef = useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    btnRef.current?.focus();
  }, []);

  return <button ref={btnRef}>Btn</button>;
}

💪 Плюс такого підходу полягає в тому, що нам не потрібно орієнтуватися на клас, або id елемента. Коли вони зміняться, в коді нічого не зламається, навіть якщо ваш колега не зверне на це увагу. Плюс React сам відповідає за те, щоб тримати там посилання на актуальну версію DOM елемента. Тільки пам'ятайте, що під час першого рендеру елементу там ще не буде, оскільки перший рендер відбувається ДО фази монтування DOM елемента в DOM дерево. П.М. Судячи зі швидкості правильних відповідей потрібно переходити на складніші та цікавіші завдання. Кеш вам завтра принести чи що?)

Всі подарунки вже відправлені, крім однієї людини. Та, одна людина, завтра буде у нас у гостях, забере свої подарунки особисто і переконається, що я не якийсь там набір байтів. Дякую всім хто прийшов на стрім!

Продовжуємо про React ❓Задача № 1 - вивести на екран кількість рендерів даного компоненту. Проблема: Падаємо в нескінченний перерендер ❓Задача № 2 - Доскролити до певного елемента в компоненті. Проблема: Тім лід кричить що $ та querySelector бруднять його ідеальний React. Питання - що робити?

Про IT-курси, без прикрас 👨‍💻 Завтра, разом з Романом Савіцьким, Сергієм Бабічем та спільнотою IT-Juniors будемо робити ефір про IT-курси. 👉 Кому цікаво послухати що відбувається і як обирати курси так, щоб це принесло користь, а не просто забрало ваш час та гроші, приходьте 24 квітня о 19.00 Враховуючи що я проводжу курси, Сергій проводив, а Роман займається навчанням своїх колег (це один з його обов'язків) - має бути досить цікаво.

Ми починаємо!

🎁Наразі шанс виграти Сталкера - 1:3 🎁 Приєднуйтесь!

❤️ Сьогодні свято, а яке свято без подарунків? ❤️ І я скажу в мене їх аж чотири: 👉 Зручний та надійний рюкзак. Туди влізе і ноут і все до ноута) 👉 Фірмовий, компактний, металевий термос, який чудово підійде для кави тим, кому рано вставати. 👉 Сет носочків (5 пар) від Мавки, тієї самої яка зараз зібрала рекордну кількість глядачів з проміж усіх Українських фільмів 👉 І, також, цифрова копія другого Сталкеру. А отримати їх не так щоб було дуже складно: 🐝 Перші три подарунки ми розіграємо під час прямого ефіру на вікторині. Хто перший дасть правильну відповідь - той і отримає подарунок! 🦄 А для того щоб прийняти участь в розіграші Сталкеру - вам просто потрібно написати пост в будь-якій соціальній мережі, дати посилання на наш Ютуб - youtube.com/@reactdev і відправити мені скріншот. Не знаєте що писати? Просто зробіть фото на фоні нашого YouTube) Копія буде розіграна серед усіх хто це зробить. 😊 Наче не складно 👉 Всіх чекаю на стрімі, сьогодні о 18:00, і не забудьте підписатися щоб не пропустити! Зі святом нас!

Подаруночки на сьогодні ❤️

❤️ НАМ. ОДИН. РІК. ❤️ 🎉 І завтра о 18:00 ми будемо це святкувати. З гостями, з подарунками, і головне з ВАМИ. 👉Приходьте ВСІ! П.М. Про подаруночки буде вже завтра, бо їх ще треба вдобить 😁 Але будуть класні)

😎 Завтра (п'ятниця, 18:00) у нас відбудеться СЕКРЕТНИЙ СТРІМ ❓Як думаєте, чому він присвячений? Перший, хто вгадає - отримає фірмову термочашку в подарунок!

🔨 Корисні інструменти своїми руками🔨 💡Покажу вам такий маленький, але досить корисний мікро-хук, який дозволяє наочно бачити, чи працює ваш хук useCallback, чи ні. Він може стати в нагоді, якщо ви вирішили оптимізувати код за допомогою фіксації колбеків (які ми, до речі, вже розбирали на цьому відео)

const useTrackCallback = (
  callback,
  { callbackName = null, logWhenStable = true } = {}
) => {
  const cbRef = useRef(callback);
  const changed = cbRef.current === callback;
  const cbName = callbackName ?? callback.name ?? 'unkown';

  if (changed) {
    cbRef.current = callback;
    console.log(`Callback "${cbName}" changed`);
    return;
  }

  if (logWhenStable) {
    console.log(`Callback "${cbName}" stable`);
  }
};

☺️ Як бачите, хук не складний. Він використовує хук useRef (до-речі, якщо вам цікаво про цей хук почути - напишіть в коментарі) для зберігання поточної версії колбеку і порівнює його з наступною. Якщо посилання різні, хук логує інформацію в консоль. 😺 Звісно його можна ще допрацювати, щоб, він наприклад, ніколи не працював на проді, але це вже не обов'язково. 🔨 Також аналогічний хук можна написати для того, щоб відслідковувати перерендери, яких за вашим розуміння не має бути. Можете несподівано дізнатися багато корисного і про React і про те, як поводить себе ваш застосунок в цілому. @reactbeginners П.М З цим новим лого ледь знайшов свій власний канал. В червоний його перефарбувати, чи що?

А я ніколи не казав що я хороший дизайнер, але треба було "на зараз" 😅 П.М. Оцініть спойлер на YouTube

Всім привіт, 20.04 відбудеться досить цікава Онлайн/Офлайн подія - Front-End Meetup від Levi9 👉 React Query & RTK Query (як раз для нас) 👉 CSS Trends та що нового в CSS (CSS завжди буде корисним, хто піде - розкажіть і мені) 👉 Нові підходи в Angular - це вже не зовсім те, але підходи можуть бути цікавими для розширення кругозору. Онлайн - безкоштовно, оффлайн в Києві за 150 гривень які підуть на благодійність. Реєстрація - тут

Всі ми тут дуже різні Знаєте, тут зібралися дуже різні люди. Хтось школяр, хтось вчитель. Хтось обожнює спорт та качалку, хтось полюбляє дальній радіозв'язок. У когось ще перша робота по-переду, а хтось вже був керівником свого маленького агентства. Хтось вірить, а хтось впевнений атеїст. І це різноманіття - джерело нашої сили і нашої слабкості. Тому що коли ми разом - ніхто нас не зупинить. Згадайте 2014 рік, рік підйому волонтерства, рік, коли ми перевіряли країну походження товарів і не купували нічого з росії. Згадайте 2022 рік, коли десятки мільйонів збиралися за день - для захисників, на помсту. Але, нажаль, на цьому різноманітті дуже просто зіграти. Розділяй і володарюй - цей принцип чудово працював всі 30 років нашої незалежності. І, скоріше за все, буде працювати й далі, послаблюючи нас. Тому в цей день - я хочу побажати всім нам - розуміння і трохи терпіння. Розуміння того, що хоча ми всі дійсно дуже різні, але всі ми Українці. Терпіння - пробачати маленькі огріхи тих хто поруч. І тоді, ніяка руснява наволоч навіть подивитись в нашу сторону не зможе. Бо як казали Швейцарці Вільгельму II - ми просто зробимо по два постріли і розійдемося. Всім сили, розуміння та терпіння.