Free React For Beginners

🔥 Next.JS 14.0🔥

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

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

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

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

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

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

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

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

@reactbeginners

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🤓Є цікаві анонси🤓

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

1️⃣ Моя доповідь про формпошльопів має вийти у формі статті, можливо вже на наступному тижні.

2️⃣ Після доповіді Іллі Клімова - зробив тестовий репозиторій з ReScript та статтю про його налаштування з React. Опублікую вже на цьому тижні. Потім ще зроблю мікроогляд.

3️⃣ Хочу ще подивитися на Solid.JS і також зробити на нього огляд. Але це вже пізніше.

😢 Курс по Next.JS поки стоїть, часткове цьому пояснення - граблі по яким доводиться ходити з Next і їх так званий Own Way.

👉 До речі, про цей Own Way вийшла цікава стаття про це (англійською) - раджу почитати (Дякую Ameliance SkyMusic за те що показав), на яку вже навіть є відповідь, яка також досить цікава. Всім кого цікавить Next з точки зору підходів - дуже раджу прочитати обидві.

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

@reactbeginners

Про архітектуру фронт-енду

👉 Сьогодні один з членів нашої спільноти - пан Дмитро буде говорити про архітектуру фронтенд додатків, в тому числі і про React.

Запрошую приєднатися

📝Нотатки про доповіді 📝

Бабіч, Про інтерв'ю.
Інтерв'ю це великий біль для всіх. Що робити - ставится відповідально та людяно.

Про react-native. Не дивився, але те що його ще не перебив flutter вже добре.

Про бойлерплейт. CTO чудак на літеру м, який диктує командам типи експорту. Кодогенерація - варіант якщо у вас декілька команд на одному стеку.

Про формошльопство
Фронт-енд складний, треба вчити. Ок, буду вчити.

Про мілтех.
40 людей на місце до них. Продукт крутий, цікава архітектура багатошарового фронт-енд з React. Я б подивився.

Клімов, Про React.
Дуже цікаво. Подивитися rescript, solid, signals. Обережно з NextJs.

❤️ От і пройшла моя перша, за довгий, час офлайн конференція ❤️

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

А які у вас враження (якщо хтось був?)

П.М. Після конференції вирішив взяти паузу на два тижні трохи перепочити. Тож певний час у нас тут буде тиша. Але не сподівайтеся, я повернуся і продовжу мучити вас Реактом. Хоча, після доповіді Іллі Клімова, вже й не знаю чи саме Реактом :)

FwDays rocks

❗️Якщо ви тільки починаєте, не йдіть у фулстек❗️

Просто - не йдіть. "Фулстек за 3 місяці" це може й не зовсім шахрайство, але так близько до цього як тільки можна.

Проблема тут не в тайтлі, фулстек це чудовий шлях який дасть вам дуже багато свободи для розвитку і багато можливостей. Тут з цим усе добре.

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

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

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

🐈Корисний прийом для EsLint🐈

😤 Якщо вас бісять помилки від EsLint які, не є справжніми помилками JavaSript, але ви все ще хочете ці помилки бачити - можна виставити їм правило warn замість error. Але тут одразу з'являється проблема - тепер ваш білд (локальний, або на сервері) не "впаде" коли побачить ці помилки, що може бути не бажано.

👉 Для того щоб поєднати переваги обох ситуацій можна зробити наступний трюк:

1. Перейменувати .eslintrc.json в .eslintrc.js
2. Змінити JSON на module.exports
3. Переписати бажане правило наступним чином:

'@typescript-eslint/no-unused-vars': [
process.env.NODE_ENV === 'development' ? 'warn' : 'error',
]

🎉 Тепер, коли ви запустите застосунок для локальної розробки, студія це побачить і порушення цього правила будуть все ще виділені, але вже в якості попередження. Це дасть вам можливість візуально відрізнити справжні помилки, на кшталт не оголошеної змінної, від помилок умовних, які не заважають кодові працювати.

А от коли ви, або сервер, запустить білд, NODE_ENV буде змінена, всі порушення стануть помилками і не дадуть поганому коду потрапити в кодову базу. І всі щасливі 😎

Пішов збиратися, побачимося через декілька днів.

@reactbeginners

Людина яка виграла квиток на FwDays так і не з'явилась 😢
Тому квиток їде іншій людині, яка задавала не менш цікаві питання)

П.М. Ну не солити ж мені їх 😉

🤘Ось такого шматочку коду виявилося достатньо для того, щоб "зламати гугол" чотири роки тому.

Маленький шматочок коду, посилання в e-mail і наша маленька Reflected XSS готова робити дива з вашим акаунтом 😎

А ви кажете що фронтенд то просто формошльопство і нічого там складного немає.😉

@reactbeginners

Про залишок на рахунку

🚚 У мене є знайомі які возять авто для ЗСУ - лише за останній місяць вони привезли чотири пікапи. Все офіційно, під лист від в/ч (хто возить той знає, наскільки це важливо). Але пікапи потрохи закінчуються, відповідно ціни на них ростуть. А от грошей, нажаль, більше не стає.

🙄У нас же досі лежить залишок в 4_000+ гривень, які я зберігав на ретранслятор для FPV. Але, нажаль, ретранслятор поки що і досі не готовий, тому, якщо ви не проти, я перекину їм цей залишок. Бо машини зараз потрібні не менше ніж ті самі FPV або мавіки. А на ретранслятор ми ще назбираємо.

❤️Ну, а у в кого є бажання долучитися своїми 20 гривнями - прошу, дівчата точно будуть раді.

Я тут іноді пишу про ідеальний код і дехто може подумати що в мене на проекті він таки "ідеальний"

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

😉Що важливо - намагатися завжди залишати код хоча б трохи кращим ніж був до тебе. Не треба героїчних потуг переписати весь код* (складно, будуть баги, мерджі будуть з жахливими конфліктами), а от потроху - саме те. Десь виправити назву змінної на нормальну. Десь додати типи замість any, десь виділити код що повторюються в окремий компонент і вже буде краще. А якщо це буде робити ще й уся команда - то з часом навіть з какулі у вас буде нормальне рішення яке приємно читати та не складно підтримувати.

* Пише людина з останнім ПР у 80+ файлів, іронія вона така, ага.

@reactbeginners

Відредагована версія ефіру доступна за посиланням і чекає на ваші перегляди, та, дуже важливо - коментарі

👉 Немає зворотнього зв'язку - немає покращення.

❗️Також розшукую автора найкращого запитання - на тебе чекає подарунок - квиток на FwDays React + TypeScript.

🎉 Радію що я потихеньку роздаю всі борги, яких залишилось не так і багато - одна доповідь на FwDays і курси з Next.JS. Що буде потім ще не знаю, побачимо ближче до зими.

На цьому все - всім гарного дня, бережіть себе, допомагайте ЗСУ!

🔥Ефір про тестування вже за 5 хвилин🔥

Беріть чай, каву і приєднуйтесь до ефіру!

Присвячується всім, кому дуже подобається 100% покриття тестами 😎

Ефір буде тут (10.10, 19:00)