Free React For Beginners

#анонс #співбесіда Моя наймолодша кандидатка вважала світ веброзробки магічним, ніби Гоґвортс, допоки не наважилася стати його частиною. Розпочавши свій шлях до мети уже під час повномасштабного вторгнення та без власного ноутбука, вона знайшла свою наставницю, свою особисту Мінерву Макґонеґел в особі подруги сестри, розробниці на VueJS, що познайомила її з чарами програмування та переконала мою кандидатку в тому, що вона зовсім не маґл. Однак, як і будь-який герой чарівної історії, вона стикнулася зі справжнім випробуванням власної рішучости та впевнености, потрапивши у жорстокі та безжальні реалії сучасного ринку найму. Саме тому вона виявила бажання перевірити себе та свої можливості, хоч і вважає себе найсправжнісінькою джуніоркою, що й мріяти не може мірятися з іншими моїми кандидатами. У вільний від навчання магії веброзробки вона займається спортом, цікавиться різноманітною музикою, полюбляє подорожувати разом з друзями та сімʼєю, і трошечки, ну зовсім трошечки захоплюється світом Гарі Поттера. Чи вхопить вона свій снитч? Ким стану після цієї співбесіди я — доброзичливим професором Люпином чи суворим та холодносердим професором Снейпом? Чи вдасться їй продовжити свій шлях та врешті-решт потрапити до Гоґвортсу і стати супер крутою чарівницею, себто розробницею? Усе це ми разом із вами зможемо дізнатися лише під час етеру наступної співбесіди рівня React Junior з Богданою Кузьміною уже цієї п'ятниці, 6 жовтня, о 19:00 на моєму ютуб каналі "Сергій Бабіч та Дивовижний світ веброзробки"! А таємний експерт цього разу прийде до нас на етер прямісінько з компанії Infopulse, однієї з найбільших в Україні! Понад 2000 фахівців це вам не жарти, так само, як і понад 30 років досвіду роботи в ІТ-галузі з більш ніж 280 клієнтами з понад 40 країн світу! 📅 06 жовтня, 19:00 📺 СПІВБЕСІДА React Junior | Богдана Кузьміна P.S. Підписка, вподобайка, дзвіночок!

Сергій проводить співбесіду з React - чи згадає він про Recoil - ось у чому питання? 😀 Гарної співбесіди всім)

Поширте, кому не складно, цей пост в LinkedIn. Дякую 💪

Тестування та 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% покриття тестами яке не відбирає час розробника. І що робити?