Вибираємо бібліотеку для проекту

1. Бібліотека має виконувати задачу. Беремо функціонал який ви вважаєте найскладнішим і шукаєте його в документації. Якщо з документації не все очевидно, або задача складна - зробіть proof of concept щоб позбавитися сумнівів

2. Бібліотека має бути відносно популярна. Чим популярніша бібліотека, тим більше по ній додаткових матеріалів та людей, що прийдуть вам на допомогу у випадку проблем. Плюс більше шансів що популярна бібліотека буде мати зручний дизайн та буде протестована (але це не точно). Перевірити це можна по "зіркам" в GitHub та кількістю завантажень в npm.

3. Бібліотека має підтримуватися. Відкрийте репозиторій та npm, перевірте останню активність. Якщо активності немає протягом тривалого часу (більше пів року), а issue багато - це поганий знак. Ми так влізли в халепу з UI бібліотекою, яка "застрягла" на react 17. Snyk показує рівень "здоровості" пакету, але бажано розуміти самому що там так або не так.

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

5. Бібліотека має бути відносно маленька. Відносно, тому що якщо складні речі можуть потребувати багато коду. Але бібліотека яка лише перевіряє чи є щось об'єктом, не може важити 100Kb. В кінці кінців сам react-dom важить 130Kb. Пам'ятайте, що для проектів де швидкодія критична - у вас є приблизно 350kb для JavaScript в gzip Якщо ви пишите адмінку - цей пункт можна пропустити.

То ж коли обираєте собі бібліотеку - можете зробити собі табличку з цих пунктів для порівняння. Заодно задокументуєте чому було обране те чи інше рішення.

Бережіть себе, допомагайте ЗСУ

@reactbeginners

До речі - не потрібно шукати бібліотеку на все підряд

Для прикладу ось бібілотека - is-object яка має 3.4M завантажень на тиждень і зводиться до одного єдиного рядка:

const isObject = (obj) => typeof obj ==='object' && obj !== null;

Такі, або подібні до цього речі, варто робити самому, тому що кожна додаткова бібліотека вимагає:

1. Догляду. В бібліотеках бувають баги, бувають вразливості - відповідно вам треба оновлюватися і за цим слідувати. Звісно, у власному коді теж бувають і баги і вразливості, але коли весь код у вас - виправити простіше. Та й бекдор під час наступного оновлення ви не зловите.

2. Місця. Код який написали ви - використовується на 100%. А якщо ви берете з lodash один єдиний метод - то все інше просто сповільнює ваш застосунок (так, навіть якщо прямо не використовується). Це не запас на випадок кризи - "про всяк випадок" тут не працює.

3. Часу в пайплані. Кожна додаткова бібліотека це + до install часу. І, якщо на початку це не критично, то потім це дуже дратує, коли білд на сервері йде 18 хвилин, а без нього PR з виправленням однієї літери не проходить.

Тому підходьте до питання з розумом: складний функціонал беремо з бібліотек, щось просте - робимо самостійно. Ну не вірю я що ви б не змогли написати код з прикладу вище самостійно💪

Я не хейчу подібні бібліотеки, у самого є така is-number-strict :)

@reactbeginners

Явно погані практики в #React, або що НЕ варто робити без особливих причин

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

2. Використання useEffect для даних, які можна вирахувати. Вам не потрібен useEffect для того щоб порахувати дані - це можна зробити прямо в рендері.

3. Відсутність відписок в useEffect від асинхроних запитів, timeout-ів, подій через .addEventListener. Просто гарна практика яка може врятувати вас від memory leaks, особливо з interval та подіями.

4. Використання useCallback та useMemo без попередніх вимірювань. Використання useCallback та useMemo ускладнює читання вашого коду  - ви зобов'язані пересвідчитись що воно того варте.

5. Збереження локальних даних в глобальному стейті. Всі локальні дані, що потрібні одному компоненту повинні лежати лише локально - не захаращуйте глобальний стейт зайвим, вам з ним ще далі жити.

6. Використання випадкових ключів в списках, або не використання ключів взагалі. Зміна ключа призводить до видалення компоненту з DOM дерева і створення його заново. Це дорого, користуйтеся ключами правильно.

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

8. Використання context-у для швидкозмінних даних (mousemove, scroll, etc). Зміна контексту змушує перерендерюватися усі компоненти що його використовують, а ці події спрацьовують сотнями. Воно вам треба?

Якщо якийсь пункт треба розкрити детальніше - пишіть під постом.

Плейліст присвячений цій темі

Бережіть себе, допомагайте ЗСУ

@reactbeginners

Щира думка про IT курси

Хайп трохи спав, тому можу висловитися спокійно. IT курси можуть бути корисними, але є кілька але.

1. Термін - курси з Front-End мають тривати щонайменше пів року. Можуть бути виключення у зв'язку з форматом, але десь так. Тільки на сам React ми виділяли два місяці і то я не можу сказати що цього було достатньо. А тут треба ще базу вивчити. Про курси full-stack я вже мовчу.

2. Практика. Курси цінні тим, що ваш код дивляться досвідчені розробники і корегують його. Відповідно мають бути домашні завдання та командні проекти з перевіркою коду та відгуками. Якщо цього немає - відосики ви можете і самі знайти в YouTube

3. Люди. Курс мають викладати практикуючі розробники (Front-End постійно змінюються), які мають хоча б якийсь хист до викладання. Вивчати розробку під бу-бу-бу це int він займає 4 байти, а це bool він займає 1 біт (не завжди) така собі ідея - чесно кажу. Тому, якщо є можливість - сходіть на ознайомче заняття з тим хто буде вести вам лекції

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

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

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

Я сам проходив платні курси 9 чи 10 років тому і в одному випадку мені пощастило, в іншому ні, хоча організація була одна й та сама)

Бережіть себе, допомагайте ЗСУ

@reactbeginners

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

Тому, я вирішив, що було б непогано перед цим принести трохи користі вам та ЗСУ:

На наступному тижні, з ПН по ПТ, я відкриваю календлі на 17:30-18:00, 18:05-18:35 для консультацій з Front-End/React. Вхід - будь-який донат на збір Сергія Бабіча на авто для кулеметного взводу 26-го окремого стрілецького батальйону 47-ї окремої механізованої бригади. Сума - на ваш розсуд. А з Сергія ми потім щось струсимо)

Бронюйте і приходьте, допоможу чим зможу. Завтра пошерю в LinkedIn, а поки у вас пріорітет.

З ким вже провів 1-2-1 - напишіть будь-ласка відгук під цим постом.

П.М. Якщо це таки дійсно станеться (це не 100%), я відпишу з певними деталями. Але поки так, в стилі інструктор ua (але не Тиса😃)

Бережіть себе, допомагайте ЗСУ,
@reactbeginners

Наступне відео про Next.JS та API майже готове і виходить на цьому тижні, але дочитайте до кінця.

Це що б ви не думали що я нічого не роблю 😆

Але зараз не про це, а про збори.

По-перше, дуже дякую 🤗 всім хто долучився до збору Сергія (він теж дякує) - ми закрили всі слоти на one to one лише спільнотою, я навіть не викладав це в LinkedIn. Вже сьогодні починаю консультації.

А, по-друге, буквально через годину після того як я запостив про збір Сергія, до мене по допомогу звернулися мої дуже добрі знайомі які через два тижні відправляються на 0 і їм потрібен генератор та сонячна панель задля автономності, тому вибору немає - я оголошую збір на передчасний день народження

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

ЗБІР ЗАКРИТО!

Передчасне день народження, або збори ніколи не бувають вчасно

Одному з підрозділів 112 батальйону ТРО (який доречі приймав активну участь в захисті київського неба) терміново потрібне живлення - хлопці вже найближчим часом відправляються працювати на 0. Хлопців я знаю особисто, просто так вони не просять.

Їм потрібні гарна сонячна панель та комбінований дизель генератор, загальна ціна питання на сьогодні - 64_000 гривень.

В якості подяки, через монобанк, я розіграю:

1. Дві розписані гільзи 30 калібру які були випущені нещодавно під час відбиття атаки шахедів на Київ. Доречі, шахед таки поцілили то ж ці гільзи з цілою історією.

2. За найбільший донат - книгу "Грокаємо алгоритми" українською.

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

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

Монобанка
Номер картки - 5375411215740007

Якщо з грошима все складно (розумію) - будь-ласка, напишіть коментар підтримки збором в LinkedIn та пошерте, аби його побачило якомога більше людей.

Звіт і фото будуть обов'язково, всім дякую!

@reactbeginners

Навіщо потрібен React.Context і як не відстрелити собі ногу

Контекст в #React це засіб передачі даних та сутностей всередині застосунку.

Найкраще він підходить для двох речей:

Зберігання даних що потрібні всьому застосунку і які майже ніколи не змінюються, а їх зміна має призводити до перемалювання більшої частини застосунку, наприклад:

1. Дані користувача та стан аутентифікації
2. Локаль та часовий пояс
3. Налаштування теми, якщо ви використовуєте CSSinJS

Передачі сервісів, які потрібні всьому застосунку:

1. Ваша обгортка над fetch або налаштований екземпляр axios
2. Обгортка над LocalStorage, SessionStorage, IndexedDb
3. Обгортка над Navigator

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

Чому не використовувати контекст у якості стейт менеджера? Відповідь дуже проста - швидкодія. Коли змінюється значення контексту, всі хто використовує useContext з цим контекстом будуть перемальовані автоматично. Оскільки контексти зазвичай знаходяться "згори", а більшість наших компонентів функціональні, це призводить до перемалювання майже всього застосунку що може дуже не очікувано вилізти боком під час подальшого розвитку застосунку.

А якщо у вас є дані які потрібні по всьому застосунку і які часто змінюються - використовуйте стейт менеджер, наприклад RTK або MobX. Вони спроектовані саме для цього.

Хто дочитав - тримайте маленький лайфак:

Якщо ваші дані ніколи не змінюються - використання Context.Provider взагалі не обов'язкове. React буде використовувати ті дані що ви передали під час створення контексту 😎. А разом з кастомною обгорткою над useContext створення та використання сервісів стає дуже простим.

Корисно? Тоді закиньте 20 гривень на збір на "електрохарчування" для підрозділу 112 бригади ТРО - це дуже важливо, хлопці вирушають на 0. Ще й шанс виграти гарну і корисну книжку або гільзу від ППО.

Дякую пану Дмитру за ідею для допису,

Бережіть себе, допомагайте ЗСУ,
@reactbeginners

Цей тиждень буде дуже насиченим.

1. Вже сьогодні, о 19:00 виходить нове відео: Next.JS та побудова API. Десять хвилин але дуже насичені та корисні.
2. В цей четвер, о 19:00, разом з @FwDays буде войс чат про ідеальний фреймворк і чи є #NextJS таким. Без спойлерів)
3. В суботу (а що робити) буде прямий ефір про API в Next.JS під кодовою назвою - як розпарсити монобанку. (лінка пізніше)

Сподіваюся буде корисно, бережіть себе та допомагайте ЗСУ,
@reactbeginners

Ось так мене поздоровив @FwDays на день народження)

Дякую вам! Єдине про що шкодую - навряд чи зможу потрапити до вас на конфу в цьому році. А ті хто зможе - сходіть не пожалкуєте!

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

Загалом ми вже зібрали 38_288 з 63_491 гривні, тобто 60% збору! Найбільші донати - 10_000 грн. (відмовились приймати участь в розіграші книги). та 5_000 грн.

Продовжуємо, більша частина вже пройдена!

Відео про Next.JS та API вже доступне для перегляду

План:

- Навіщо нам API
- Як будується раутинг для API
- Як отримати параметри запиту
- Як відповісти на запит
- Та про деякі нюанси використання API в #NextJS

Єдиний мінус - схоже я знову зі звуком облажався, хоч плач(

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

Бережіть себе, допомагайте ЗСУ,

@reactbeginners

Як #React контекст допомагає в тестуванні

Найкращий спосіб пояснити - показати на прикладі. Відкрийте цей гіст і давайте його розберемо

1. Створюємо об'єкт API який буде відповідати за комунікацію із зовнішнім світом і кладемо цей об'єкт в контекст за допомогою createContext
2. В довільному компоненті витягуємо об'єкт API з контексту і використовуємо його.

Поки все зрозуміло, правда? Та "магія" починається далі.

3. В нашому тесті, ми створюємо новий об'єкт API який буде більш підходящий для тестування - він не ходить в мережу, а просто повертає проміс з гарантованим результатом. Далі, ми огортаємо компонент який бажаємо протестувати в ApiContext.Provider, а в value - підсовуємо йому нашу фейкову реалізацію.

Коли React рендерить наш тестовий компонент, він знаходить наш провайдер і замість справжньої реалізації бере нашу нову, фейкову яку і використовує. Так ми можемо протестувати будь-які дані та симулювати будь-які помилки. Спробуйте, наприклад, замість Promise.resolve передати Promise.reject і побачите що станеться з цим компонентом якщо, наприклад не буде інтернету)

Питаннячка?)

П.М. Доречі, код робочий можете спробувати, треба тільки vitest доналаштувати для тестів

Бережіть себе, допомагайте ЗСУ,
@reactbeginners

Сьогодні Voice Chat про ідеальний фреймворк

🚀Час: 11.04 (Чт) о 19:00
🗣Спікери: Віталій Рубан, Дмитро Брагінець, Володимир Сень

Войс чат буде проходити на каналі FwDays, приєднуйтесь!

ЗБІР ЗАКРИТО! ЗВІТ ТА РОЗІГРАШ НА НАСТУПНОМУ ТИЖНІ!

Збір завмер майже на самому фініші - залишилося зібрати 7_910 гривень і я знову буду мучати вас матеріалами про #React

А щоб все було чесно - мої 3000 гривень теж пішли на збір. Долучайтеся, поширюйте, залишилося ще трохи!


1. І трохи статистики - найбільша пожертва 10_000 гривень
2. Кількість людей що вже прийняли участь - більше 110 осіб
3. Кількість організацій що прийняли участь - 1, дякую Fwdays
4. Найкращий коментар - "Не багато, але від щирого серця!"

Кожні 50грн - шанс виграти розфарбовану гільзу від ППО, якими Київ відбивав шахедів

Всім дякую, давайте сьогодні дотиснемо аби на цьому тижні все передати

💪 Збір закрили, а ефір ніхто не відміняв!

🗓 Отже, плануйте cуботній вечір на 19:00 - буде в нас учбово-помилковий ефір про Next.JS, API та Монобанк.

Поговоримо про API та CORS, напишемо невеличкий застосунок який буде ходити в монобанку і тягти звідти зміни, так щоб у нас був лог останніх поповнень.

🎁 А ще розіграємо подаруночки)) Правда гільзи від художниці приїдуть тільки у вівторок, але це найкращий момент все одно.

Лінк на ефір буде вже завтра, як раз ще раз і нагадаю 😈.

Бережіть себе, ви допомогли ЗСУ

@reactbeginners

Нє ну ви ж не думали що я від вас так просто відстану?)

Обіцяне посилання на сьогоднішній ефір про #NextJS, API та монобанк який відбудеться вже сьогодні о 19:00.

Ставте нагадування, беріть чоловіків, жінок, котів, собак, єнотів і приходьте (павуків не беріть 😂). Має бути цікаво і сподіваюся монобанк мене не забанить після цього ефіру)

Почуємось о 19:00!

Пост був змінений в зв'язку з помилкою в обкладинці. Все в силі.

Як писати чистіший код на #React

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

2. Розділяйте компоненти на ті що отримують дані та ті що їх відображають. Такий підхід спрощує підтримку та тестування.

3. Пишіть мінімум коду в JSX - виносьте його в блок до return. Так у вас буде блок логіки (до return, та блок відображення - те що в return)

4. Виносьте логіку в окремі функції або кастомні хуки. Компоненти потрібні для відображення, бізнес логіка має лежати окремо і бути протестована.

5. Взагалі виносьте з функцій будь-який код, що не залежить від компоненту. Оці всі магічні числа, масиви для дропдаунів - все це геть, чим менше в компоненті коду що його не стосується тим легше його читати та підтримувати.

6. Мінімізуйте useEffect. Використовуйте useEffect лише якщо немає іншого виходу - наприклад для асинхронних запитів. Намагайтеся його уникати.

7. Зберігайте локальний стейт локально. Якщо дані компоненту потрібні лише цьому компоненту - не варто додавати їх в глобальний стор.

8. Гарно спіть та повільно думайте. Вам платять за вирішення бізнес задачі, а не за кількість символів. Ясний розум - одна з основ чистого коду.

Якщо у вас є бажання та готовність пройти CodeReview в прямому ефірі - пишіть в ПМ.

Бережіть себе, допомагайте ЗСУ,
@reactbeginners

Звіт-подяка за минулий збір

😍 Ми це зробили, збір зібрано повністю, все закуплено та передано навіть раніше терміну:

Зібрано: 65_111 грн.💪💪💪

Придбано:
- Сонячна панель ECOFLOW 220W: 18_051грн. (офіціали, зробили знижку для ЗСУ)
- Генератор ECOFLOW GASEBDUAL: 43_999 + 190 грн комісія = 44_189
- Ще закупили масла для генератора, але то пішло повз банку, тому 0.

Залишок: 2_871, який я пропоную передати Сергію на збір на машину, може він нарешті його закриє вже)). Якщо ніхто не проти - завтра відправлю.

Найбільша сума: 11_941 від пана Дениса, книжка відправляється йому. Дякую за такий значний внесок, чекай на свій подарунок, думаю тобі сподобається ;)

😉Дві гільзи також вже мають своїх власників і будуть відправлені завтра, чекайте. Я б їх собі залишив, такі вони гарні)

🤗Також дякую усім хто допомагав та поширював цей збір:

BeerJS Житомир
@FwDays
ItJunior
YouDon'tKnowJS
Художниця пані Катерина (анонміно, хоча все зробила безкоштовно та швидко)

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

Фотозвіт наступним постом)