🎉 Київ, Itera Open Day for FE 12.06 🎉

💪 12.06.23 ми відкриваємо Київський офіс для вас. Якщо у вас є пет-проект, на який потрібно поглянути стороннім оком, якщо у вас є питання які ви хочете обговорити (тільки не Redux 😂), або якщо ви просто скучили за живим професійним спілкуванням - приходьте до нас на Поділ.

🕰 Офіс буде відкритий з 10:00 по 16:00, але є одна умова - у випадку тривоги ми всі, в обов'язковому порядку, негайно, спускаємося до сховища. Я буду доступний цілий день, а ще в гості загляне Ігор та DevOps-и яких можна буде помучати на предмет Azure (а може й AWS)

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

Бережіть себе і побачимось вже офлайн!

П.М. Ви перші хто побачили цю подію, дякую що ви з нами 😊

Матеріали курсу React для початківців від Віталія Рубана та Ітера

Зібрав майже всі відео з обох курсів про React по категоріях. Сподіваюсь буде вам корисно.

1. Вступ
👉Що таке Реакт
👉Перший застосунок на React

2. Компоненти в React
👉Компонентний підхід в React
👉Що таке Props
👉Як поділити застосунок на компоненти

3. Хуки
👉Хуки - огляд
👉React, useContext та кастомні хуки

4. Навігація
👉SPA та React
👉React router DOM - 1
👉React router DOM - 2
👉React Router - код рев'ю

5. Інструменти керування станом
👉Інструменти керування станом
👉React Redux - 1
👉React Redux - 2

6. Форми
👉React та форми
👉React Hook Form

7. Стилізація
👉React та CSS
👉Від звичайного CSS до CSSinJS

8. Тестування
👉Тестування та Jest

Інше
👉Обробка помилок в React
👉Три популярні помилки початківців
👉Ні похідним даним у state
👉React, Аутентифікація, Firebase
👉Деплоїмо React на GitHub pages
👉Пишемо гру на React

@reactbeginners

Окрема подяка Ігорю Ц. за відео про Redux та підготовку програми!

SSR vs SSG vs CSR і де тут Next.JS

❓Як з'ясувалося, є деяке нерозуміння що таке і чим відрізняються Client Side Rendering від Server Side Rendering та Static Site Generators.

Відмінність проста, але принципова.

👉 CSR - контент який ви бачите створюється на клієнті (прямо у вашому браузері)
👉 SSR - контент створюється на сервері, прямо під час вашого запиту
👉 SSG - контент створюється лише під час білду і не змінюється до наступного білду.

Відповідно:

1️⃣ CSR - довго, не дружить з SEO, актуальні дані, зручна навігація
2️⃣ SSR - швидше, дружить з SEO, актуальні дані, складніше
3️⃣ SSG - дуже швидко, дружить з SEO, потрібен новий деплой щоб оновити дані.

👉А #NextJS тут до того, що він може працювати в будь-якій моделі, хоча за замовчуванням він працює саме в моделі Server Side Rendering і орієнтований на неї.

👾Цікавий факт, що ми починали з SSG, потім перейшли на SSR, потім на CSR і зараз знову повертаємось до SSR, але з можливостями CSR. Історія, як завжди, йде по спіралі.

@reactbeginners

Всім привіт, наш статус

😔 Нажаль, мені потрібно взяти певну паузу. Ніхто з нас не залізний (крім ПВО), втома приходить до всіх, + останні тижні були, м'яко кажучи, не найкращими (і це я ще в умовній безпеці, а не десь там на півдні), тому я змушений взяти таку собі відпустку.

✍️ Це означає що всі плани відкладаються (і відео про серверні компоненти, і курс про Next, нажаль). Постів також буде обмаль, окрім одного маленького голосування завтра щодо залишку ваших зібраних коштів.

✉️ Писати і питати мене можна, але відповім коли відповім. Кукуха птаха вільна, відпустиш - відлетить.

❤️Дякую за те що залишаєтесь зі мною і за підтримку. Я скоро повернусь з новими відео та навчанням 💪

Бережіть себе, свою голову, своїх близьких. Все буде Україна.

Як бачите, тема з ППО дуже актуальна.

6600 пішло Сергію Бабічу на придбання мобільних будиночків для ППО

Бережіть себе!

Наступні відео протягом літа

👉Next.JS - нові серверні компоненти.
Навіщо потрібні та особливості використання.

👉 З’єднуємо Front-End та Back-End правильно.
Транспорт, валідація, трансформація

👉Структура React проекту яка скейлиться

П.С. Ми живі, здорові, трохи відпочиваємо, трохи плануємо. Все дуже потихеньку, але рухається.

Поки я сиджу і намагаюся відпочивати* до нас на канал прийшли 🇦🇺австралійці!

😎 І кажуть такі - ми тут для розробників робимо розширення щоб допомагати їм писати усілякі гарні тести, швидко і зручно. Ну і можемо вам подарувати кілька ліцензій для ваших підписників (при чому без обмежень щодо комерційного використання). Хочете?

😅 І я такий - та звісно хочу, але ж це ще відео про тести ще робити треба...

❓І от питається в задачі - Хочете відео про тестування?

* Якщо не Щекавиця, то у ВТ буде відео перше відео про Next.

Нове відео Next.JS та нові серверні компоненти вже опубліковано

❗️ Що таке серверні компоненти, навіщо вони потрібні, як їх використовувати - про все це ви дізнаєтесь з нового відео: Next.JS та серверні компоненти!

🧐 Відео вийшло:

1. Коротеньким - усього 11 хвилин,
2. Насиченим - теорія, враження і коротеньке демо
3. Не однозначним - детальніше у відео

❓А що ви думаєте з приводу серверних компонентів?

@reactbeginners

😢 Львів, мої співчуття

Бачу вже 4ий проект який структурує проект за типом компонентів.

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

src/
/components
/layouts
/hooks
/context
/...

❗️Будь-ласка, не робіть так. Цей підхід не працює, якщо у вас більше ніж одна сторінка (або функціональний модуль). Ці теки розростаються, компоненти всередині починають хаотично залежати один від одного, ламається ліниве завантаження, складно розуміти що і як перевикористовувати. Я точно знаю про що говорю, бо я це проходив 6 років тому і прохожу зараз повторно, (бо якась веб студія вирішила що так воно краще)

✍️ Замість цього - групуйте за функціональістю. Найпростіший варіант - по сторінкам. Рахуйте що одна сторінка - один незалежний модуль. І ховайте все що можливо в середині цього модуля (окрім очевидно загальних компонентів типу button/link)

👉 Це дасть вам незалежні модулі, які легко змінювати не боючись все зламати, і очевидний пул загальних компонентів.

😈 А як ні - прийду до кожного у вісні і буду нити поки не переробите!

П.С. Буде про це відео десь через місяць.

@reactbeginners

Next.JS та серверні компоненти тепер текстом на DOU

🔥 Для кого зручніше читати текст - виклав статтю про серверні компоненти на DOU.

👉 Запрошую до перегляду і коментарів.

Не знаю чи є хтось тут з Одеси, але тримайтеся і бережіть себе!

💪Потихеньку повертаюся назад до роботи 💪

👓 Перше відео над яким будемо працювати - структура проекту в React, бо це дійсно важливо, хоча і дискусійно, м'яко кажучи.

👩‍🏫 Спробую описати як я бачу зручну структуру проекту, яка більш-менш безболісно скейлиться.

Скоро побачимось і бережіть себе.

🏋️‍♀️Не ускладнюйте життя з useEffect🏋️‍♀️

😢 Ще раз переконався, що багато хто любить ускладнювати собі життя і код за допомогою useEffect, тому давайте знову повернемось до цієї теми

👀 Наприклад, маємо якийсь кастомний хук, в якому є ім'я та прізвище користувача, а нам потрібне ще й його повне ім'я.

Типове і не правильне рішення - використати useEffect та проміжний стейт:

useEffect(() => {
  setFullUserName(`${fName} ${sName}`);
}, [fName, sName]);

🤨 Такий код складніше читається, має більшу вірогідність помилки та на додачу ще й не ефективний оскільки викликає додатковий рендер.

Насправді, все що нам треба - це вирахувати повне ім'я прямо в самому хуці (або компоненті)

const fullName =

${fName} ${sName}

👩‍🏫 Якщо дані користувача лежать в стейті, то як тільки вони зміняться - наш код буде викликаний знову і ми отримаємо нове повне ім'я. Все дуже просто і очевидно, але багато хто все одно додає зайвий effect 😊

👉 Для того, щоб не повторювати цю помилку достатньо запам'ятати, що похідні дані (ті які ми вираховуємо) потрібно не тримати в стейті, а вираховувати прямо в самій функції. А якщо ви побачите, що це займає забагато часу (і поміряєте!) - тоді вам може стати в нагоді хук useMemo

Чистого вам коду, бережіть себе і скоро побачимось!

@reactbeginners

🏎 Вчора побіжно зачепили тему вимірювань, але без подробиць, тому виправляюся 🏎

🧑‍💻Всі оптимізації швидкодії потребують вимірювань - вам потрібно контролювати що ви робите і бачити свої результати.

Як це зробити:

1️⃣ Перший варіант - поставити розширення React Developer Tools і використати вкладу Profile. В результаті ви отримаєте такий графік, як на зображенні, який покаже вам скільки часу займає рендер кожного елементу.

👉 Це зручно для пошуку "дорогих" рендерів і причин перерендеру.

2️⃣ Другий варіант - використати компонент React.Profiler який приймає id та колбек в який будуть передані всі вимірювання:

 <Profiler
      id={pId}
      onRender={(_, phase, actualDuration) =>
        console.log(phase, ' ', actualDuration)
      }
  >

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

Також можна використати Performance API, але про нього буде в наступному дописі.

@reactbeginners

Колись я цей пост вже писав, але з того часу нас стало втричі більше, тож давайте познайомимось

😎 Мене звати Віталій, працюю я самі знаєте де 😁. В IT вже більше 8оми років. Можу спроектувати поганеньку базу даних, зробити посередній бекенд і нормальний фронтенд. Писав на knockout, angular.js, angular, react.

🧐 Три роки був спів викладачем для НАУ (хто був у нас в Itera, можливо бачив мене в живу). Був членом програмного комітету JsFest (там і познайомився з Бабічем) та виступав на FwDays, VinnitsyaJs, American Digital Weeks.

❤️ Люблю програмування, комп'ютерні ігри, читати, сноуборд та віндсерф. Під час війни здобув ще декілька корисних, але менш friendly навичок, чого і вам раджу. Про всяк випадок ;)

🧑‍💻 Щодо цього каналу - він не комерційний, з'явився на початку повномасштабного нападу росії на Україну щоб допомогти людям доотримати знання та знайти собі роботу. Каналу вже рік і він ще й досі живе, з чого я трохи дивуюсь та радію. Також ми тут іноді проводимо не великі збори на потреби ЗСУ, долучайтеся за можливості.

🔗 Ще в мене є лінкедин, де я іноді пишу щось корисне, а іноді свої думки стосовно того що відбувається навкруги, але без політики. Наприклад ось.

❓А хто ви? Звідки, як сюди потрапили, що вас цікавить? Пишіть, в п'ятницю складне постити гріх :)

🌳Про структуру проекту - питання для роздумів🌳

🔨 Продовжуємо працювати над відео про структуру React проекту і в зв'язку з цим - пропоную подумати над наступним питанням:

❓Маємо проект, який складається з двох сторінок - main.page.tsx та buy-product.page.tsx. В Main сторінці є:

a) компонент H1 - який відмальовується як заголовок
б) компонент SuccessText - текст зелено-ядучого кольору який показується у випадку успішного сабміту форми зворотнього звя'зку.

Сторінка buy-product імпортує обидва ці компоненти і використовує їх для того щоб:

а) відмалювати заголовок першого рівня
б) відмалювати спеціальну ціну за товар. (приклад на скріншоті)

❓В задачі питається: які помилки я допустив з точки зору структури проекту і як їх виправити?

Відповідь опублікую вже завтра

П.М. Хтось помітив пасхалку? 😀?

@reactbeginners

🌲Відповіді та пояснення. Частина перша.🌲

😎 Сподіваюся що ви добряче поламали вчора голову. Тепер давайте розбиратися. Тексту багато, тому буде дві частини.

Першу помилку ви знайшли досить просто і це дуже добре. Але давайте її все ж таки розберемо для всіх:

Помилка: Прямий імпорт в buy-product.page.tsx. з main.page.tsx., або, якби б я відповідав на співбесіді, порушення принципу low coupling (низької зв'язності)

Проблема: Суть проблеми полягає в тому, що сторінка buy-product починає щось знати про код, до якого він не має жодного стосунку - сторінку main. На практиці, це призводить до того, що коли сторінка main буде перейменована, переміщена, відрефакторена - вам доведеться вносити зміни і у сторінку buy-product. Якщо ви випустите це з уваги - отримаєте баг. Ще одна проблема в тому, що, оскільки H1 належить до main, то розробники будуть думати що вони можуть вільно змінювати H1 відповідно до потреб main. Це означає, що рано чи пізно, заголовок на сторінці buy-product не очікувано зміниться і ми отримаємо ще один баг.

Вирішення: Вирішити цю проблему просто - достатньо винести H1 в окрему теку, яка призначена виключно для коду, який можна використовувати всім, наприклад shared. Цей підхід вирішить одразу дві проблеми. По-перше, ми відв'яжемо buy-product від main, а, по-друге, факт знаходження компоненту в shared буде сигналізувати всім що змінювати цей компонент потрібно з обережністю - він загальнодоступний.

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

Очевидно що зміні на main не мають впливати на інші сторінки, а от зміни в shared - мають.

Друга помилка в наступному пості...

П.М. Так мою пасхалку і не знайшли) Наступного разу зроблю приз за її знаходження)

@reactbeginners