Обіцяна інструкція про React та ReScript

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

Тому, у кого буде трохи вільного часу на вихідних:

* Інструкція
* Репозиторій
* Документація
* Пісочниця

А якщо хто не в курсі то ReScript це функціональна мова програмування майже зовсім без any яка компілюється в JS, має гарну систему типів і цікаві можливості.

Гарних вихідних, бережіть себе і допомагайте ЗСУ.

П.М. Статтю на основі доповіді сподіваюся віддати вже на наступних вихідних

🥹 Не забувайте перевіряти статус код у відповіді сервера 🥹

Давайте подивимось на цей приклад:

fetch("").then(r=>r.json()).catch(console.log)

Що відбудеться, якщо сервер поверне нам відповідь з кодом, наприклад, 500?

Існує хибне очікування, що, у випадку, якщо сервер поверне не успішний статус код, then виконуватися не буде, а замість цього виконається одразу catch.

❗️Але fetch працює не так, тому що в then передається будь-який response, як успішний так і ні. Все інше, в том числі перевірки на успішність відповіді, покладаються на розробника.

✍️Зробити це можна або використавши властивість response.ok яка буде позитивною, якщо статус код серверу буде в проміжку 200 - 299, або перевірити властивість response.status для більш гранулярної обробки відповіді.

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

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

А щоб fetch працював більш прогнозовано, над ним можна зробити обгортку (або використати axios чи інші інструменти де це вже працює):

fetch("/").then((response) => {
  if (!response.ok) {
    throw new Error(response.status.toString(), { cause: response });
  }
  return response;
});

Тепер, якщо сервер поверне вам щось відмінне від 2ХХ - спрацює catch в якому буде код помилки та весь response якщо він вам таки треба.

❓До-речі, як ви думаєте, чому я повертаю саме response, а не response.json()?

@reactbeginners

Чи завищені вимоги до початківців? Якщо так, то чому, а якщо ні то див. п.1.

😎 Запрошую вас на цю середу на живий ефір о 19:00 зі мною та Сергієм Бабічем де ми будемо говорити про складність сучасного фронтенду, та про вимоги, що зараз ставляться початківцям.

Приходьте, буде цікаво, а ще Сергій приготував подарунки та важливий збір!

😍 Дякую всім хто долучився.
❤️ Дякую всім хто донатив (знаю навіть одного переможця з нашого каналу)

Як вам ефір? Які враження?

🔥 Next.JS 14.0🔥

🎉 26 жовтня вийшов мажорний реліз Next.JS v.14. І я вже навіть зібрався зробити на нього відео огляд, але після ознайомлення і деяких експериментів весь огляд можна звести до 🤷‍♂️

Ні, в теорії нові можливості виглядають цікаво:

=> Прискорення на 54% запуску локального серверу та прискорення HMR на 94% (але все ще за прапорцем --turbo)

=> Серверні дії: код який ви можете позначити як такий, що має виконуватися на сервері і оминути процес створення API.

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

👉 Єдине що радує це нові навчальні матеріали.

😕 Ось такий вийшов новий мажорний реліз next14, відео огляд якого міг би зайняти 30 секунд.

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

@reactbeginners

Уже розпочалася премʼєра 😉 Єслі шо, то це покращена та перемонтована версія стриму, що відбувався цієї середи. А просто зараз триває премʼєра відео, бавлюся з функціями ютуба 😉

Приємного перегляду!

https://youtu.be/02PwesoqG-A

Таки так - подався з нашим каналом #React для Початківців на Першу Премію DOU.

UPD: спочатку треба потрапити в шорт ліст, підтримка вже потім ❤️

Навряд чи зможу виграти, бо конкуренція ну дуууууже важка але точно буде цікаво 🙂

Дякую всім хто приймав та приймає участь!

Принципи побудови структури проекту

👉 Спробував коротко викласти, свій алгоритм побудови структури (не архітектури) проекту (наступний пост)

🤔Можливо вийшло занадто складно і потрібно зробити якесь відео з наочним прикладом.

Тому, якщо вам все зрозуміло - ставте 👍, якщо потрібне додаткове відео - 🤯, а якщо не згодні або є запитання - прошу до коментарів.

ПОСТ НИЖЧЕ
⬇️⬇️⬇️⬇️⬇️

Принципи побудови структури проекту

=> Кожна сторінка знаходиться в окремій теці і рахується окремим незалежним модулем
=> => Якщо компонент використовується виключно на одній сторінці, він лежить в теці цієї сторінки
=> => Інакше компонент лежить в теці яка призначена для загальних компонентів
=> Модулі можуть залежати лише від загальних модулів. Залежність від специфічних модулів не допускається
=> За замовчуванням, компоненти групуються за приналежністю, а не за типом
=> => Якщо компонент потрібен лише для navbar, він знаходиться в теці navbar
=> => Інакше він знаходиться в теці яка призначена для загальних компонентів (проекту або модулю)
=> Групування за типом допускається виключно в загальних модулях
=> Якщо в модулі один компонент використовується в декількох місцях, модуль може мати власний модуль загальних компонентів
=> Загальні компоненти мають якомого менше залежностей і ніколи не залежать від специфічних модулів
=> Для складних проектів, допускається два модулі загальних компонентів - одна для компонентів що не містять бізнес-логіку, інша для тих що містять, але використовуються по всьому проекту
=> Дані правила рекурсивні

➕Під компонентами розуміються будь-які елементи системи - React компоненти, сервіси, класи, тощо.

➕Правила можуть бути спрощені, наприклад, специфічні під модулі можуть імпортувати компоненти з інших підмодулів якщо:

а) Вони обидва належать одному й тому самому модулю ТА
б) Такі імпорти не створюють циклічну залежність, коли А залежить від Б, а Б, свою чергу від А.

👉 Якщо максимально все скоротити то ось принципи якими я керуюсь: - очевидність розміщення, гуртування за функцією, мінімазація залежностей та їх очевидність, послідовність структури та одноманітність виконання правил.

@reactbeginners

Дякую всім хто чесно ставив 🤯

📹 Тепер чекайте на відео - має вийти в понеділок або вівторок, на наступному тижні. Побачите наскільки все може бути просто на живому прикладі. Спробую вкластися в 10 хвилин)

❓А поки ось вам питання на подумати:

Навіщо нам взагалі потрібна структура проекту? Чому не можна (або можна) все писати в одному, двох, трьох файлах?

💪Трохи гарних новин про відео з Next.JS💪

Матеріали (презентація та тексти) для перших трьох відео про Next.JS готові:

1️⃣ Вступ до Next.JS та його можливості
2️⃣ Види компонентів в Next.JS
3️⃣ Стилізація в Next.JS

Залишається відзняти та змонтувати 😎

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

Ось такі плани на найближче майбутнє. А ще я хочу запросити Сергія на посиденьки на тему "Чи не завищені вимоги до It?" Але то вже трохи пізніше)

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

Не забувайте оброблювати помилки під час запитів на бекенд 😁

І не вірте що запит буде миттєвим, показуйте людям лоадер (так, у нас це не заборонено)

Всім тихих вихідних!

@reactbeginners

Структура React застосунку - 21/11, 19:00

👉 Обіцяне відео про структуру React застосунку виходить вже завтра, у вівторок о 19:00. Вийшло 15 хвилин у досить швидкому темпі, але встиг розповісти трохи про:

=> Навіщо нам потрібна структура
=> Якими принципами керуюся
=> Як її робити на практиці

➕Ще й підсумки якісь влізли

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

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

П.М. А ще з середи мене не буде кінця тижня, так що не дивуйтеся мовчанню - просто треба деякі особисті справи закрити.

Ще один офлайн в Києві - Skelar FrontEnd Meetup

😎 Мене запросили в гості на ще одну офлайн подію - Skelar FrontEnd Meetup, яка пройде 30.11 (четвер) о 19:00 в Києві на Подолі. В планах поговорити розвести срач про TypeScript, тестування, Low Code, та практичні завдання на інтерв'ю.

🧐 Формат 3Х3 (три за, три проти) мінімум аргументів, максимум емоцій. Що з того вийде - не маю жодного уявлення, якщо чесно. Але має бути цікаво.

😍 Участь безкоштовна, також є можливість прийти online. Тож хто бажає прийти - ось реєстрація

Відео вже доступне до вашого перегляду. Буду вдячний за коментарі та поширення.

П.М. Це останнє повідомлення на цьому тижні. Якщо раптом це буде не так, не ставтеся до нього серйозно.

❓Чим #React кращий за чистий #JS? Або взагалі навіщо потрібні фреймворки?

Якщо коротко - швидкість розробки та боротьба зі складністю.

Якщо довго, то

1️⃣Розробка проекту за допомогою будь-якого фреймворку має відбуватися швидше (тому що вам не потрібно створювати власні інструменти)
2️⃣ Фреймворк має* допомагати вам писати код, який простіше масштабувати та підтримувати в майбутньому.
3️⃣ Фреймворк це уніфікація. Розібратися з кодом написаним на популярному фреймворку куди простіше ніж вивчати фреймворк самописний, на який перетворюється більшість проектів на чистому JS.

Звичайно є купа "але":

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

По-друге, фреймворк має* вам допомагати писати більш підтримуваний код. Але "має" не значить зобов'язаний. Що на React, що на куди більш суворому #Angular можна таке налапшати що потім навіть археологи не розберуть.

І, по-третє, будь-який фреймворк вас обмежує. Чистий JS дає більше можливостей як "накосячити" так і зробити щось справді чудове.

Тому React кращий за чистий JS для більш-менш типових проектів. Після інвестиції часу в навчання - ви отримаєте змогу писати швидше, а код, скоріше за все, буде легше підтримувати та розширювати (але це не факт 😉 )

@reactbeginners

Нарешті вчора була змога більш-менш грунтовно поковиряти паралельний роутинг в Next.JS

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

❓Якщо ми назбираємо тут хоча б 31 ❤️, напишу про це більш детальний пост.

Всім гарного робочого дня, бережіть себе!

@reactbeginners

Оце ви налайкали. Що робити, домовилися, треба виконувати.

🗓Отже буде:

1️⃣ Пост про те що таке паралельні роути та навіщо вони треба
2️⃣ Пост-опис про те як їх варити
3️⃣ Демо репозиторій, щоб код можна було потикати паличкою

Все на свіжому Next@14 та app router (на іншому і не заведеться)

✍️Завтра і почнемо.