Free React For Beginners

Тестування та React - Навіщо? Як? Чим? + розіграш 👉 Ще один обіцяний ефір - на цей раз про тестування, відбудеться 10.10 о 19:00. Поговоримо про те навіщо воно треба (або не треба), які бувають тести взагалі, як обирати що покривати тестами, а що лишати до кращих часів. А ще напишемо три тести за допомогою Jest та Cypress - щоб подивитися як це взагалі виглядає. 🎁 Окрім цього я ще й підготував для вас подарунки (на цей раз навіть без зборів 😀): * Два бандли Quoka.JS + Wallaby.JS річних ліцензій * Одну Quoka.JS річну ліцензію. * Безкоштовний квиток на React+TS fwdays’23 ❗️Для того щоб прийняти участь у розіграші ліцензій потрібно записатися у форму та прийти на ефір. А безкоштовний квиток отримає автор найкращого запитання по темі під час ефіру. Чекаю на вас у вівторок, о 19:00. Буду вдячний за поширення! Бережіть себе і скоро побачимося. @reactbeginners

Складно? Наче так, але це тільки так виглядає, чесно. Якщо погратися з прикладом, все стане на свої місця дуже швидко. А це дійсно потрібно розуміти, тому що життєвий цикл React компонентів тема дійсно важлива, і, я б сказав, фундаментальна для React. П.М. Насправді React досить маленький таких моментів не багато, так що не засмучуйтесь. Angular складніший, а fp-ts ще складніший).

🧐Цікаве питання на співбесіду* ❓ Коли саме виконується функція, яку повертає колбек useEffect 🤔🤔🤔ПАУЗА НА ПОДУМАТИ🤔🤔🤔 Очевидна, але неповна відповідь: Функція, яку повертає колбек useEffect викликається перед тим, як компонент буде видалено з дому. Повна відповідь: Функція, яку повертає колбек useEffect викликається кожен раз після зміни залежностей useEffect І перед тим, як компонент буде видалено з дому. 😉Суттєва різниця, еге ж? Це дає розуміння того, як відміняти вже не актуальні запити на бекенд, коли параметри запиту змінилися до отримання його результату. Приклад коду на погратися * Питання звісно не для інтернів

Мені тут підкинули мапу розвитку фронтенд-розробника. 👉 Початківцям 👉Повна версія Не з усім я згоден (наприклад БЕМ в умовах scoped стилів втрачає актуальність), але схема корисна. Зверніть увагу на легенду до мапи, вона спрощує розуміння і зменшує обсяг необхідного матеріалу. @reactbeginners

Вчора готував апку, щоб показувати на ній тестування, але... 🤪 Але замість апки написав першу в своїй житті гру 😅 у жанрі текстовий квест. Що цікаво - гра вийшла майже повноцінна, з трьома кінцівками, але абсолютно не придатна до тестування через її простоту - там буквально немає що тестувати 😁 Весь код займає приблизно 100 рядків разом з компонентами для відображення. А логіка - 40 рядків) Тому, доведеться все починати все з початку - але я ні про що не жалкую, це було супер цікаво! Є шанс що мені доведеться брати паузу на певний час. Якщо так станеться - я напишу.

😁Не міг не поділитися знахідкою Не пишіть SPA салони, пишіть SPA застосунки 😎

Так а який вихід? 👉 А вихід дуже простий - оновлювати другий стейт одразу. Або, якщо цей стейт можна вирахувати, взагалі відмовитися від нього і рахувати його під час рендеру. Хіба не просто?

Всі ж пам'ятають, що useEffect: 1️⃣ Виконується вже після рендеру компоненту 2️⃣ У випадку маніпуляції зі стейтом - викликає повторний рендер і самого компоненту, і скоріше за все, його нащадків? 👁Тепер подивіться на приклад коду на зображенні. Маємо каунтер і маємо ефект, який спостерігає за ним. Коли каунтер змінюється, ми оновлюємо умовну data - наче все просто. ❓Чому цей код "не дуже"? Тому що відбувається наступне: 1. Викликається setCounter 2. Відбувається перерендер компонента і його нащадків 3. Викликається effect 4. Оновлюється state що ще раз викликає перерендер компонента і його нащадків Якщо внизу лежить щось "дороге" - будемо мати проблеми зі швидкодією. Плюс наш код з лінійного і синхронного перетворюється на казна що. 🤔А тепер уявіть собі декілька ефектів які поєднуються в ланцюг? 🥶Я бачив такі ланцюги з трьох-чотирьох ефектів і, повірте, це не те що ви хочете мати у своєму проекті. P.M. Працюю над відео про тести, думаю будео одразу мучити Next. @reactbeginners

🤯 За вчора, за три години отримали більше двохсот відгуків З однієї сторони це добре - бо маємо можливість вибирати. З іншої сторони це свідчить про просто велетенську кризу на ринку початківців що навіває лише сум і співчуття. 🤞Але, незважаючи на це, я бачу що ринок трішки пожвавлюється і з'являються нові вакансії. Повільно, потроху, але рух є. І якщо не станеться нічого критичного - покращення буде. А, особливо, після нашої перемоги. 💪Тому вірте в себе, продовжуйте навчання та пошуки, і допомагайте ЗСУ. Чим швидше ми переможемо, тим швидше все піде на краще. @reactbeginners

❗️Хлопці, дівчата, майбутні колеги - вчіть англійську❗️ Український ринок, нажаль, обмежений. Конкуренція тут буде завжди вища, проектів завжди менше. Якщо ви хочете знайти дійсно цікаву роботу - вчіть англійську і обов'язково практикуйтесь в розмовній мові - на рівні можливості пройти інтерв'ю. І я вже не кажу про те, що, більшість документації та нові статті - англійською. Це не питання вибору - це необхідність @reactbeginners

З'явилось стажування в Itera ❤️ У нас буквально тільки що відкрилась нова вакансія Intern Front-End Developer: ✍️Позиція на 3 місяці, оплачується. Працювати треба буде з Next.JS застосунком. Англійський потрібен обов'язково. Раптом кому цікаво - пишіть сюди: hr.ukraine@iteraconsulting.com

🤓Ловіть невеличку добірку корисних технічних статей для вашого розвитку #MemoryLeak ▶️ What is a Memory Leak? (And How to Avoid it) У вас коли-небудь був один із тих днів, коли ваш комп’ютер більше схожий на втомленого равлика, ніж на найсучасніший пристрій? У статті ви прочитаєте що ж таке Memory Leak, що його викликає, наведені практичні приклади та надані рекомендації щодо усунення. 👉https://is.gd/v8C1tb #JavaScript ▶️ Використання маркованих циклів у JavaScript Марковані цикли дозволяють вам переривати і продовжувати зовнішній цикл з контексту внутрішнього циклу, явно називаючи оператори циклу. Ця функціональність є в ColdFusion і, виявляється, така ж функціональність доступна в JavaScript. 👉https://is.gd/rPeBz3 #React ▶️ waku — мінімалістичний React фреймворк з серверними компонентами Waku - це фреймворк React, який підтримує React Server Components (RSC), нову функцію, яка буде доступна в наступній версії React. RSC дозволяють розробникам рендерити UI-компоненти на сервері, покращуючи продуктивність та уможливлюючи використання серверних функцій. Для використання RSC необхідний фреймворк для об'єднання, за бажанням сервер, роутер і так далі. 👉Посилання на документацію Продуктивного перегляду! #корисно #стаття #tech #добірка Всі наші платформи 👉Територія джунів | Підтримати канал | Масонська ложа😎

Трохи гарних новин - дрони вже на півдні України і чекають на свій перший обліт. До речі, на фото два моїх колеги які служать разом. ✍️ Тепер звіт: Зібрано: 49_380 Витрачено: 45_300 Залишок: 4_080 Ще зібрав їм кавову торбинку + сухих батончиків + шоколад (+2 до моралі) Залишок трохи почекає (є деякі плани). ❤️ А ще - одна добра душа закинула 20USD через наш OpenCollective - дякую друже Всім дякую, тепер чекаємо на гарні відео)

І що ж його робити? 1. Забити*. Жарти жартами - це дійсно дуже популярний варіант. Але ви маєте розуміти що за все доводиться платити і за "забити" теж. Рано чи пізно на проді з'явиться веселий баг після якого замовник почне вимагати тестування. 2. Тестувати що попало, аби швидко і замовник бачив гарні числа в репортах. Не робіть так, це найгірший з варіантів - тому що і впевненості немає, і час витрачено. Вже краще перший варіант - хоча б собі час зекономите. 3. Працювати з замовником: По-перше: пояснити що 100% покриття коду не потрібне і майже не можливе, якщо ми говоримо про справжні числа.Більше того воно ще й шкідливе, тому що буде сповільнювати розробку. По-друге: вибрати критичні ділянки вашого застосунку. Ті, поламка в яких, буде дуже болючою для бізнесу. Зазвичай це оплата, розрахунки, можливо якісь важливі налаштування, - те що приносить гроші бізнесу. Також буде корисно протестувати складні ділянки коду - наприклад математику або складні регулярки - вони часто ламаються. Це взагалі можна робити прямо зі замовником - і стосунки налагодите і про бізнес дізнаєтеся більше. По-третє: - використовувати правильні інструменти. Наприклад один E2E тест з перевіркою процесу купівлі покриє вам набагато більше ніж десяток юніт тестів і принесе більше користі. І навпаки, математику набагато простіше покрити звичайним unit тестом, і ви точно будете знати що там усе добре. І хоча цей варіант найскладніший, але з гарними тестами і ви по суботах будете спати спокійно і замовник буде задоволений. *До-речі, якщо ваш застосунок на початку розвитку і має нестабільну функціональність, то забити - цілком правильний варіант. П.М. Вважайте це анонсом до відео про тестування @reactbeginners

Нюанс полягає в тому що: 👉 З однієї сторони, замовник хоче мати 100% покриття коду щоб бути абсолютно впевненим що нічого не зламано. 👉З іншої сторони, замовнику потрібна функціональність, а не тести, які прибутку не приносять і він не хоче аби розробники витрачали на це час. ➕До всього цього, тести ще потрібно підтримувати та й не всі (далеко не всі) люблять цим займатися. ✍️В результаті - отримуємо конфлікт бажань з реальністю - нам потрібне 100% покриття тестами яке не відбирає час розробника. І що робити?

Навіщо тестувати код і чому за це платить замовник? Код ми тестуємо щоб дізнатися: 1. Чи коректно працює нова функціональність 2. Чи не зламали ми стару функціональність 3. І дізнатися це швидко, а не через три дні коли це протестує QA або користувачі на проді. Замовник за це платить, тому що: 1. Баги з прода виправляти і довше і ризиковіше, ніж баги які до проду так і не дійшли 2. Користувачі менше страждають і приносять більше грошей замовнику 3. Зменшується time-to-market - нова фіча швидше долітає до проду і починає приносити прибуток. Але є нюанс....

❗️Зміна форматування файлу next.config.js може призвести до зміни в самому білді. ❓В задачі питається - ДЕ Я ТАК НАГРІШИВ?

😊П'ятниця - час для гарних новин 😊 ⭐️Зірки зійшлися (до-речі, не в останню чергу завдяки вам) і я буду виступати оффлайн на React+TS fwdays’23 з дуже цікавою темою: 👉 Складнощі формошльопства в 2023 році, або про не функціональні вимоги до сучасного фронт-енд застосунку. Я спробую показати, що сучасний веб, зовсім трішки складніший ніж <form><input name="email"/></form> і має дуже і дуже багато чого важливого і цікавого. Хто хоче побачити що в мене вийде - приєднуйтесь!