cookie

نحن نستخدم ملفات تعريف الارتباط لتحسين تجربة التصفح الخاصة بك. بالنقر على "قبول الكل"، أنت توافق على استخدام ملفات تعريف الارتباط.

avatar

Free React For Beginners

💻 Про #React та #frontend та #веб розробку 🧑‍🎓 Для початківців і не тільки 👉 https://www.youtube.com/@reactdev

إظهار المزيد
مشاركات الإعلانات
3 757
المشتركون
+124 ساعات
+107 أيام
+3930 أيام

جاري تحميل البيانات...

معدل نمو المشترك

جاري تحميل البيانات...

Обкатка БТРом, стрільби з різних положень, чистка зброї, медицина, пересування і все таке інше - десь так проходить зараз моє навчання. Звичайно не все так гладко - наряди задовбують, тривоги заважають спати, броніки сцуко важкі. Але ми потроху рухаємося вперед. Що радує - інструктори розуміють що у нас тут не рембо зібралися і до фізухи та вправ ставляться адекватно, бо вік тут дуже різний, самі розумієте. А от з менеджереми є нюанси. Я б дорого (дуже дорого) дав би за толкового зубатого менеджера на певну посаду. На react часу не вистачає але jsweekly поглядаю. А ще пробую писати нотатки на телефоні, може потім опублікую. Так і живемо. А що ви тут без мене робили?
إظهار الكل...
81👍 22🤝 1
💛 Що ми знаємо про масиви? Мисиви - структура даних, з якою ми стикаємося, без перебільшення, кожен день. То пропоную повторити теорію. Масив є лінійною структурою даних, тобто всі його елементи йдуть послідовно один за одним. Особливістю масивів є те, що його елементи доступні по їх індексах. У більшості мов програмування, індексація масивів починається з 0. Доступ до елементів масиву є довільним, тобто виконується за постійний час та не залежить від розмірів масиву. Використовуючи терміни нотації big O, складність за часом становить O(1). В JavaScript масиви динамічними (умовно не мають фіксованого розміру) та можуть містити суміш різних типів даних (наприклад стрінги та числа). Є два синтаксиса створення масивів: 💛 [] (literal notation)
const arr = [1, 2, 3]
💛 конструкто Array()
const arr = new Array(1, 2, 3)
В js масив є reference type, тобто у змінній, якій ми присваюємо масив, зберігається посилання(reference) на нього в memory heap. Тому, навіть якщо ми оголосимо масив як const, js все одно дає нам його мутувати, головне щоб не змінювалося посилання (тобто не переоголошувати в цю змінну новий масив, наприклад). Але цьому можна запобігти використовуючи Object.freeze (т.я. Масиви в js також є об’єктами, цей метод можна використовувати з масивами).
const arr = [2];

Object.freeze(arr);

arr.push(5);
إظهار الكل...
26👍 8 3
⚛ “Хук” use в React А ви вже чули про use? Коли він тільки з’явився в canary, блогери користувалися гучними заголовками типу “новий хук use ламає всі правила хуків в реакті”. Навіть під моїм дописом про хуки на доу, де я розповідала, що хуки не можна використовувати умовно (в if стейтментах, наприклад), були коментарі типу “ти що, забила забула про use”. Так от, react тіма мабуть теж отримувала подобні коментарі, і тому вони перестали називать use хуком, а стали іменувать його use api. Що може use API: ⚛ Використовувати значення промісів.
const users = use(usersPromise);
⚛ Використовувати значення контексту (як заміна useContext):
const theme = use(themeContext);
На відміну від хуків, use можна використовувати в умовах та лупах. Але він має і лімітації, що присутні хукам, адже його можна використовувати тільки всередині компонентів або інших хуків. https://react.dev/reference/react/use
إظهار الكل...
use – React

The library for web and native user interfaces

👍 40 2
Photo unavailableShow in Telegram
Як вирішити проблему швидкого девайса? 💻 Зазвичай, розробники пишуть на приладах, що є набагато більш потужними за прилади середньостатистичного юзера. І мають кращий інтеренет. Тому ми можемо не помічати різноманітні проблеми перформансу, з якими потім зіткнеться кінцевий користувач. Тому рекомендую активно користуватися вкладкою Performance в DevTools. А саме: 1. Опція CPU Throttling дозволяє нам уповільнити CPU в 4 або 6 раз. 6 я зазвичай не витримую, але 4-ма користуюсь доволі часто. 2. Опція Network throttling дозволяє нам проімітувати більш повільний інтернет (швидкий 3G або повільний 3G), або вимкнути у вкладці конекшон взагалі. Рекомендую привчити себе користуватися цими опціями. Але не забувайте їх відключати, наприклад, при перезавантаженні сайту. Бо потім можна довго чекати 😅
إظهار الكل...
👍 55 2
React Compiler Компілятор в React - перспективна нова фіча яка на слуху з початку 2024 року. В інтернеті багато гучних заголовків типу "нові React розробники більше не будуть знати про ручну мемоізацію (useMemo, useCallback, memo), оскільки вона буде виконуватися під капотом". Перша згадка про React Compiler була в 2021 році з POC від команди React. Тоді він називався React Forget. Однак з POC і до 2024 року про нього не було офіційних згадок. І от ми в 2024 році, де React Compiler опенсорсний. Ви можете прямо зараз його поклацать (для цього вам знадобиться React 19). Які проблеми вирішує компілятор: 1. Вибір між DX та UX. Без компілятора розробники повинні були вирішувати, чи вони будуть жертвувати девелопер експіріенсом та якістю коду, щоб забезпечити добре оптимізований UX з мемоізацією, чи жертвувати UX і не турбуватися про мемоізацію зовсім. Тепер всі мемоізації будуть виконуватися під капотом. 2. Брудний код 3. Складне управління залежностями даних. Не кожен розробник достатньо кваліфікований, щоб застосувати ручну мемоізацію і зробити цим краще, а не гірше. 4. Ризики зламати мемоізацію 5. Довгий час дебагу. Ви вже пробували компілятор? Що думаєте?
إظهار الكل...
React without memo

Xuan Huang (黄玄)

👍 26
Коротко про декомпозицію коду в #React (19:00) Завтра відбуваю на навчання тож на останок тримайте відео про React та декомпозицію, яке виходить сьогодні о 19:00. Знімав трохи поспіхом, але наче вийшло. Поставте під відео декілька лайків - буду радий побачити що не просто так робив) А ви бережіть себе, допомагайте ЗСУ і скоро побачимося!
إظهار الكل...
Декомпозиція коду в React - коротко

👉 Коротко про декомпозицію в React застосунках на прикладі коду Повна версія тут -

https://youtu.be/LBz1aQtYot8

✉️ Telegram:

https://t.me/reactbeginners

❤️ Підтримати канал:

https://opencollective.com/farstar

79👍 16🔥 3🤝 2
Зібрав усі запропоновані книги в один список Найпопулярнішою книгою вийшла трилогія "Пам'ять про минуле Землі" від Лю Цисіня та Дюна. Цікаво що ніхто не згадав "Чи мріють андроїди про електричних овець" та Нейроманта Всім подякував!
إظهار الكل...
Фантастика на почитати

Аркуш1 Книга,Автор,Згадувань,Бонус Рейтинг,Рейтинг Проблема трьох тіл,Лю Цисінь,4,0,5,4,5 Дюна,Герберт,3,0,5,3,5 1984,Ороуел,1,0,5,1,5 Квіти для елджернона,Деніел Кіз,1,0,5,1,5 ГІперіон,Сіммонс,1,0,5,1,5 Фундація,Азімов,1,0,5,1,5 Хроніки Амберу,Желязни,1,1,0 Я бачу вас цікавить пітьма,Ілларіон П...

24👍 11🔥 2
Треба ваша маленька допомога 😜 Накидайте ваш топ книг які варто почитати. Жанр - фантастика, але можна все що дійсно вважаєте вартим уваги.
إظهار الكل...
👍 9❤‍🔥 1 1
Photo unavailableShow in Telegram
🔵 Підтипи і супертипи в TypeScript У TypeScript може бути визначений зв'язок між типами. Підтип - це тип, який повністю охоплюється іншим типом. Підтип є більш специфічним, і якщо тип Orange є підтипом Fruit, це означає, що ви можете використовувати Orange будь-де, де очікується Fruit. Наприклад: 🔹 Array - підтип Object, і ви можете використовувати його там, де очікується Object. 🔹 Кожен тип є підтипом any 🔹 never є підтипом будь-якого іншого типу, і ви можете використовувати його будь-де. З іншого боку, є супертип - він є більш загальним або ширшим, ніж інший тип. Тобто, Fruit є супертипом Orange. 🔹 Object є супертипом Array. 🔹 Any є супертипом будь-якого іншого типу.
إظهار الكل...
27👍 7🤯 6
Як я розділяю застосунок на компоненти (про декомпозицію) Якщо коротко - то за їх функціоналом, так щоб при погляді на код ви могли назвати одну і лише одну задачу яку виконує цей код. Якщо компонент або клас або функція робить декілька речей одразу - вони кандидати для декомпозиції. Наприклад нам потрібно відобразити список втрат русні за всі роки. Для цього нам потрібно - завантажити дані, обробити потенційну помилку, зберегти дані в стейт, відмалювати дані, відмалювати помилку, відмалювати індикатор завантаження. Все це можна покласти в один компонент, але краще розділити код на окремі частини: 1. Код що вантажить дані. Зазвичай це код навколо fetch, він не залежить від React - його зручно тримати окремо 2. Код який зберігає дані в стейт. Це можна тримати в компоненті, а можна викинути в окремий кастомний хук 3. Компонент що відображає результат. Відображення даних краще відділяти від їх завантаження, так код компонента вьюшки буде простішим 4. Компоненти що відображають помилку та завантаження - вони мінімально залежать від батьківського компоненту і можливо ви їх навіть використаєте повторно. В результаті ми отримаємо один батьківський компонент, який займається композицією, і декілька дрібних підкомпонентів кожен з який займається однією єдиною задачею:
export function DemoApp() {
  const { casualties } = useCasualtiesData();
  const { status } = casualties;
  return (
    <main>
      <H1>Втрати русні</H1>
      <p>
        {status === "loading" && <LoadingIndicator />}
        {status === "failed" && <LoadingError />}
        {status === "ok" && <CasualtiesView casualties={casualties.data.items} />}
      </p>
    </main>
  );
}
Підхід рекурсивний, допоки не дійдете до бажаного результату. Раджу спробувати! @reactbeginners
إظهار الكل...
45👍 17🔥 8 3