Free React For Beginners

Знаєте звідки цей код? Це "ідеальний" код до якого має прагнути кожен хто бажав працювати в яндексі на болотах А прикол цього коду не в тому, що він виглядає як поріддя мініфікатора, а в тому, що він містить помилку, яку ніхто не помічав, тому що код написаний не руками, а одним місцем нижче спини. Як ви самі бачите, такий код складно читати, ще складніше розуміти і важко підтримувати. Якщо говорити простими словами - це максимально гівняний код з тих що я бачив. Але як приклад - це дійсно ідеальний код як робити не треба (за умови, звісно, що ваша посада не мініфікатор-обфускатор програмного коду) Тому що, друге правило гарного коду полягає в тому, що ви маєте писати максимально простий код. Такий простий як двері, щоб його міг прочитати і мід і джун і навіть ПМ. І повірте мені - написати такий код набагато складніше ніж те гівно що на цьому прикладі. То ж завжди обирайте простоту. Це має бути вашим прагненням. Якщо ви бачите складний код - скоріше за все щось пішло не так. @reactbeginners

Хвилинка слабкості минула, пихтимо далі. Сьогодні о 19:00 виходить третє відео про Next.JS - Мій перший застосунок В сумі: Відео № 1 - Вступ до курсу Next.JS Відео № 2 - Що таке Next.JS Відео № 3 - Мій перший застосунок Четверте відео буде в понеділок. До речі, як вам формат з таких "мікро" відео? @reactbeginners

Вибачайте що контент став трохи сухуватим, просто зараз емоційно все це вивозити досить складно. Я звісно розумію що сиджу не в окопах, є де жити, є що їсти та й ви мене підтримуєте добряче, але 2 роки війни це довбані два роки. Вірю що все буде добре, треба просто дотягнути. Наступні два тижні будуть виходити міні відео про некст, сподіваюся встигну записати хоча б клієнтський роутер. Але не обіцяю( Я не Сергій, цьомік у лобіка то не моє, але обійняти б обійняв. Бережіть себе!

В скарбничку багів та дитячих хвороб Next.JS на page* роутері Маємо дуже простий React код:

const { query } = useRouter();
return <>{query.id ? 'HELLO': 'ERROR'}</>

Звичайними словами - якщо в URL є id з якимось значенням - виведи HELLO, якщо немає - виведи ERROR Тепер питання, що буде виведено на екран протягом наступної секунди, якщо ваш користувач зайде на URL: /?id=test Спочатку дайте відповідь собі і напишіть у коментарях, а потім заглядайте: Спочатку виведеться ERROR Потім екран оновиться і виведеться HELLO Це відбувається тому, що в Next.JS router має ще один прапорець - `isReady`, який потрібно перевіряти перед тим як звертатися до роутера. Поки він не ready - там може не бути тих значень на які ви очікуєте. І це відбувається незважаючи на те, що URL та всі дані в ньому вже існують під час обробки запиту на сервері. * На щастя, в новому app роутері цю проблему вже вирішили. Для цього знадобилося усього 13 мажорних релізів :)

Ранок видався відверто паршивим. Сподіваюся усі цілі (

Якщо вам сумно постійно писати обробку помилок ви завжди можете написати універсальний компонент: Для цього потрібно створити класовий компонент (функціональні такого не вміють) в якому реалізувати три методи: getDerivedStateFromError - оновлює ваш стейт у випадку перехоплення помилки componentDidCatch - перехоплює помилку і може щось із нею зробити (залогувати, наприклад) render - відображає контент в залежності від того чи була помилка, чи ні. В коді це виглядає так:

class SimpleErrorBoundaries extends PureComponent<
  SimpleErrorBoundariesProps,
  SimpleErrorBoundariesState
> {
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  state = { hasError: false };

  render() {
    const { children, errorFallback } = this.props;
    return this.state.hasError ? errorFallback : children;
  }

  componentDidCatch(error: Error): void {
    this.props.onError && this.props.onError(error);
  }
}

Типи виглядають досить просто

type SimpleErrorBoundariesProps = {
  children: ReactNode;
  errorFallback: ReactNode;
  onError?: (error: Error) => void;
};

type SimpleErrorBoundariesState =
  | { hasError: false }
  | { hasError: true; error: Error };

Тепер ви можете писати код накшталт такого:

<SimpleErrorBoundaries errorFallback={<>Sorry mate</>}>
  <ErrorComponent />
</SimpleErrorBoundaries>

❗️Варто пам'ятати 1 . Виключення, які стаються в середині промісів просто так не перехоплюються, для цього потрібно використовувати async/await 2. Виключення, що стаються в середині самого компоненту ErrorBoundaries також не перехоплюються. Для обробки помилок в Next.JS цей підхід також працює. Але, як ще один варіант, ви можете використати файл error.tsx дефолтний експорт якого буде відображений у випадку, якщо в роуті станеться помилка. @reactbeginners

Обіцяв я вам сюрприз сьогодні - ось маєте Відео № 1 - Вступ до курсу Next.JS Відео № 2 - Що таке Next.JS Буду потрохи викладати, тому що статися може що завгодно, хай краще залишиться незакінченим ніж лежатиме у приватних. Всім дякую!

Мене тут піймали на неточному формулюванні, то ж виправляюся. Використання відписки не зовсім "відміняє запит". Так, запит переходить в стан canceled і більше не оброблюється браузером. Але, сам запит вже "пішов" на бекенд і цілком може бути оброблений бекендом. А може бути і не оброблений. Залежить від того що "вміє" серверна частина. А питання - навіщо взагалі відміняти запит не менш цікаве)

❓Як відмінити мережевий запит в React Тут в LinkedIn пролетіло питання - як відмінити мережевий запит в React. На щастя все стало досить просто після появи спеціального класу AbortController. Виглядає це щастя ось так:

useEffect(() => {
  // Створюємо екземпляр AbortController
  const abortController = new AbortController();

  // Робимо запит та передаємо у fetch `signal'
  // Цей сигнал "просигналить" фетчу, 
  // якщо виникне необхідність відміни запиту
  fetch('/user', {signal: abortController.signal});

  // Повертаємо функцію відписки з  ефекту
  // Ця функція буде викликана коли компонент буде видалений
  // Або зміняться його залежності
  // І викличе сигнал, який повідомить фетчу про відміну
  return () => abortController.abort();
}, []);

Як бачите - не складно. Якщо ви працюєте з axios - все те саме, також через AbortController Cподіваюся було корисно. @reactbeginners

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

console.log(0);
setTimeout(() => console.log(1));
new Promise((resolve) => {
  console.log(2);
  resolve(3);
}).then(console.log);

Якщо сподобалося - поставте лайк та пошерте. Я буду вдячним і відео буде більше. Якщо не сподобалося - напишіть що саме.

Зірки твіча з мене не буде хоча було весело. Тож продовжимо лупати скалу фронт-енду)

Анонси на сьогодні 19:00, Сергій Бабіч, Перша співбесіда нового сезону на Junior React JS. (деталі) 20:00, React їде в гості до CS-GO, просто граємо в прямому ефірі (твіч). П.М. В понеділок ввечері буде маленький сюрприз)

Анонси на сьогодні 19:00, Сергій Бабіч, Перша співбесіда нового сезону на Junior React JS. (деталі) 20:00, React їде в гості до CS-GO, просто граємо в прямому ефірі (твіч).

А що я вам приніс? 🤝 Дякую пані Єлізаветі за справжній приклад зі співбесіди https://youtu.be/LBz1aQtYot8

Беріть чай/каву/кота/собаку/тарантула та заходьте

Сьогодні, 19:00, Народний проект, частина 2. Будемо продовжувати. Розраховуємо до двох годин, десь так. В програмі деплоймент і useExternal хук Лінка вже на сам ефір

Підсумки по збору на грілки Зібрано: Банка: 9000 грн ПБ: 300 грн Попередній залишок: 16грн Сума: 9316 Придбано: Грілки для ніг HeatPaxx, 8 годин, 160 шт. по 30 грн Грілки для рук ThermoPaxx, 10 годин, 116 штук по 30 гривень. Доставка 265 гривень, адресна. Сума: 8545 гривень. Залишок: 9316 - 8545 = 771 (тепер є банка де ви можете бачите всі залишки) Takehot на той момент закінчилися, а їх грілка для ніг в моєму кармані пропрацювала 2 години. Розглядався варіант з Декатлоном, але ті що ми взяли були перевірені, а Декатлон ні. Якщо не буде заперечень, залишок відправлю на збір на машину одному підрозділу, про них буде трохи пізніше. Дякую всім хто долучився, ми зробили маленьку, але дуже корисну справу, ви це самі розумієте. На наступний збір знайду вам щось гарне на розіграш. Може книжку? Чи мерч? Бережіть себе і допомагайте ЗСУ та один одному.

Щось я злий і не виспаний... Ще й з тасками налажали. 😤 Зате хоч грілки вже забрали і навіть фото скинули. Сьогодні зроблю вам звіт що купили, почому і скільки грошей лишилося. Бережіть себе і висипайтеся за можливості.

Інструкція, як встановити канаркову версію React

npm init vite react-canary
cd react-canary
npm i
npm i react@18.3.0-canary-247738465-20240130 react-dom@18.3.0-canary-247738465-20240130

Якщо використовуєте TypeScript, потрібно оновити секцію compilerOptions в tsConfig.json та додати типи: "types": [ "react/canary", "react-dom/canary" ] Канарковий реліз відкриває доступ до: 1. import { use } from 'react' 2. import { useOptimistic } from 'react' 3. import { useFormStatus } from 'react-dom' 4. import { useFormState } from 'react-dom' 5. 'use client' 6. 'use server' 7. form🤯 8. cache І так, це не контент для початківців. Але маємо рости і будемо рости. @reactbeginners