👩‍🏫Про ІТ курси без прикрас - спроба № 2👩‍🏫

🙃 Минулого ефіру про IT курси ми трохи налажали - не дуже конструктивно, не дуже по суті, коротше вийшло може й цікаво, але не про те.

😎Тому ми вирішили виправити ситуацію і провести максимально корисний, максимально (як для нас чотирьох) сфокусований ефір про те, що таке гарні IT курси.

🕺 В ефірі буде @job_it_junior, @babich_ss, Роман Савицький та я.

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

Навіщо розділяти компоненти❓

🔶 Стався тут у нас цікавий діалог з приводу того, де краще робити анімацію компонента - в самому компоненті, або в тому компоненті який його імпортує.

🐁 Я порадив піти третім шляхом і створити окремий компонент, який буде займатися лише одним - анімацією компонента. А далі вже по необхідності можна буде використовувати або анімований, або базовий компонент.

Але тут постало питання:

- Просто якось дивно заради одного тега створювати цілий компонент

І, на перший погляд, це дійсно трохи дивно, можна ж одразу зробити компонент анімований та й усе. Але, тут є цілих два підводних камені:

1️⃣ Всі компоненти мають тенденцією рости та ускладнюватися. Власне, анімація, це чудовий приклад саме такого "розростання" компонентів. Відповідно, чим далі, тим більше буде у вашого компонента задач. А чим більше у нього задач - тим більше підстав для змін, що призводить до крихкості ваших компонентів і, відповідно, багів.

2️⃣ Рано чи пізно, станеться ситуація, коли вам буде потрібен компонент без цих додаткових функціональностей, або з суттєво іншими. І тут вам би знову у нагоді став би базовий компонент, але його немає. Замість нього на вас дивиться кнопка на 600 рядків і питає - ну, що ризикнеш ще один if втулити чи як?

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

@reactbeginners

Всім привіт - коротенький апдейт.

💪Ми живі-здорові (і я сподіваюся ви теж), працюємо над курсом по Next.JS.

😎Що з того вийде, поки сказати не готовий, коли буде щось помацати - напишу детальніше.

👨‍💻Ще є плани записати відео про документацію проекту, але це пізніше.

Бережіть себе, залишайтесь з нами, допомагайте ЗСУ.

Так, не по темі, але

😓 Бережіть себе. Не підходьте до вікон. Переходьте в коридор, якщо немає/не встигаєте до укриття. Киньте в коридор матрас щоб хоч якось спати. Давайте собі відпочити від новин. Бережіть кукуху.

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

Тримайтеся, русні нас не здолати.

🎉 Київ, 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.

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

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