Курс React для початківців від Vitalii Ruban
Курс React для початківців від Vitalii Ruban
  • Видео 99
  • Просмотров 227 633
Декомпозиція коду в React - коротко
👉 Коротко про декомпозицію в React застосунках на прикладі коду
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
Просмотров: 295

Видео

Event Loop в JavaScript - коротко
Просмотров 3537 часов назад
👉 Дуже коротко про Event Loop на приклад коду. Повна версія тут - ruclips.net/video/LBz1aQtYot8/видео.html ✉️ Telegram: t.me/reactbeginners ❤️ Підтримати канал: opencollective.com/farstar
7.1 NextJs та API
Просмотров 808Месяц назад
- Навіщо нам API - Як будується раутинг для API - Як отримати параметри запиту - Як зробити відповідь - Та про деяк нюанси використання API в Next.JS 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course 🧑‍💻Код github.com/Drag13/NextJS-express-course-app 💌 Telegram - t.me/reactbeginners
4-1 Next.JS та Клієнтський роутинг
Просмотров 6992 месяца назад
Як додати нову сторінку в NextJS? А куди покласти навігацію та футер? Що таке loading.tsx навіщо він потрібен? Про все це у новому випуску Next.JS експресс курс. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
3-2. [Практика] Next.JS та стилізація
Просмотров 7502 месяца назад
Розглядаємо стилізацію Next.JS за допомогою глобального CSS та CSS modules на практиці. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
3-1. NextJs та стилізація - CSS, CSS Modules, SCSS, CSS in JS
Просмотров 7692 месяца назад
У цьому відео ми поговоримо про стилізацію в Next.JS. Що працює одразу, що можна встановити, та як є проблеми на сьогодн з CSS in JS 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
2-3. [Практика] NextJs, компоненти та їх види
Просмотров 1,1 тыс.3 месяца назад
У цьому відео ми створимо власн серверн та клієнтськ (універсальні) компоненти в Next.JS, та наочно побачимо різницю між ними 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
2-2. NextJS та справжні клієнтські компоненти
Просмотров 9303 месяца назад
Чи існують в Next.JS справжн клієнтьск компоненти - тобто такі, як рендеряться виключно на клієнт ніколи не рендеряться на сервері? Про це ви дізнаєтесь з цього маленького відео про Клієнтськ компоненти та Next.JS 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
2-1. NextJs, компоненти та їх види
Просмотров 1,2 тыс.3 месяца назад
У цьому відео ми поговоримо про види компонентів в Next.JS, призначення та обмеження серверних компонентів, переваги та недоліки різних видів компонентів 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
1-2. [Практика] NextJs - створюємо свій перший застосунок
Просмотров 1,8 тыс.3 месяца назад
Опис курсу Next.JS - структура курсу, вимоги, програма та вс інш організаційн питання до курсу. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
1-1. Next.JS - що це таке і чим відрізняється від React
Просмотров 2,8 тыс.3 месяца назад
Давайте обговоримо що таке Next.JS, як він має можливост та чим він відрізняється від React. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
0. Вступ до курсу Next.JS
Просмотров 2,5 тыс.3 месяца назад
Опис курсу Next.JS - структура курсу, вимоги, програма та вс інш організаційн питання до курсу. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
Питання зі співбесіди - Event Loop на прикладі коду
Просмотров 1,5 тыс.3 месяца назад
👉 Розбираємо приклад з співбесіди на тему Event Loop. Коли виконуються setTimeout, коли Promise ✉️ Telegram: t.me/reactbeginners ❤️ Підтримати канал: opencollective.com/farstar
TypeScript - викинути не можна залишити. Кому постав сам.
Просмотров 1,4 тыс.5 месяцев назад
TypeScript - викинути не можна залишити. Кому постав сам.
TypeScript, приведення типів і satisfies
Просмотров 6005 месяцев назад
TypeScript, приведення типів satisfies
Структура React застосунку за 15 хвилин - Українською
Просмотров 2,4 тыс.6 месяцев назад
Структура React застосунку за 15 хвилин - Українською
#Bun - можливості та враження українською за 4 хв
Просмотров 1,5 тыс.8 месяцев назад
#Bun - можливост та враження українською за 4 хв
React, Redux та поширені помилки під час використання глобального стору
Просмотров 1,6 тыс.9 месяцев назад
React, Redux та поширен помилки під час використання глобального стору
Next.JS та нові серверні компонети 13.4 - навіщо потрібні та як їх використовувати
Просмотров 1,9 тыс.10 месяцев назад
Next.JS та нов серверн компонети 13.4 - навіщо потрібн та як їх використовувати
Велике оновлення NextJS 13.4 - короткий огляд українською
Просмотров 3,1 тыс.Год назад
Велике оновлення NextJS 13.4 - короткий огляд українською
Огляд Next.JS за 16 хвилин - українською
Просмотров 17 тыс.Год назад
Огляд Next.JS за 16 хвилин - українською
ReactCodeSmells: Магічні цифри, зайві об'єкти та інші Code Smells в React.
Просмотров 6 тыс.Год назад
ReactCodeSmells: Магічн цифри, зайв об'єкти та інш Code Smells в React.
ReactCodeSmells: Використовуйте useCallback правильно!
Просмотров 999Год назад
ReactCodeSmells: Використовуйте useCallback правильно!
ReactCodeSmells: useEffect та зомбі процеси.
Просмотров 703Год назад
ReactCodeSmells: useEffect та зомб процеси.
ReactCodeSmells: Не зберігайте похідні дані в стейті.
Просмотров 3,1 тыс.Год назад
ReactCodeSmells: Не зберігайте похідн дан в стейті.
Три популярні помилки початківців в React - state, key, effect
Просмотров 1,3 тыс.Год назад
Три популярн помилки початківців в React - state, key, effect
Змінні оточення та секретні секрети на прикладі React за 10 хвилин
Просмотров 900Год назад
Змінн оточення та секретн секрети на приклад React за 10 хвилин
Огляд Storybook - коротко, українською
Просмотров 2,9 тыс.Год назад
Огляд Storybook - коротко, українською
З новим 2023 роком!!!
Просмотров 591Год назад
З новим 2023 роком!!!
React Router - помилки та код рев'ю
Просмотров 931Год назад
React Router - помилки та код рев'ю

Комментарии

  • @alenakavyrshyna3916
    @alenakavyrshyna3916 День назад

    Дякую ❤

  • @panKocky
    @panKocky 3 дня назад

    "спочатку виконується весь синхронний код, це весь код крім ... промісів..." а чому тоді 4 і 6 з проміса вивелось раніше за 13?

    • @reactdev
      @reactdev 3 дня назад

      А тому що код яким ініціалізується проміс - теж синхронний) детальніше в повному відео)

    • @panKocky
      @panKocky 3 дня назад

      @@reactdev зрозумів, дякую

  • @user-qv5hw4hj9c
    @user-qv5hw4hj9c 8 дней назад

    Дуже корисно, по документації було складно розібратися і тут натрапила на це відео, дякую за пояснення!)

  • @Krasilnokova
    @Krasilnokova 8 дней назад

    Дуже корисно! Дякую!

  • @code.clear.
    @code.clear. 14 дней назад

    велетенське дякую за такий чудовий контент

  • @asya-qm8iu
    @asya-qm8iu 16 дней назад

    Дякую за контент, дуже корисно🤩. ( Вибачте за душність: але Vite бібліотека читається /vit/, як "veet"🙈)

    • @reactdev
      @reactdev 16 дней назад

      Та чому не подушнити якщо є обґрунтований привід)

    • @asya-qm8iu
      @asya-qm8iu 15 дней назад

      @@reactdev 😁 тоді я ще трохи подушню🤭 будь ласочка, Додайте в описі під відео посилання на наступний урок, так буде набагато простіше зорієнтуватися . заздалегідь дякую😊😊😊

  • @TeT22324
    @TeT22324 17 дней назад

    приклад змін - вогонь! дякую за відео!

  • @kulibabenko
    @kulibabenko 17 дней назад

    Зараз дойшов до половини відео, і вже радий, що попав на тебе, шановний Автор, вже стало на місця що таке Oullet, LayOut, index: true. Дякую за повільну і покрокову роздуплятину.

    • @reactdev
      @reactdev 16 дней назад

      Приходьте ще)

  • @2Extremum
    @2Extremum 18 дней назад

    Дякую за лекцію. В кінці коли почалося гадання то зловив злісних фейспалмів, люди не знають банального scope JS, а вже вивчають react

  • @user-wi2wj1er2e
    @user-wi2wj1er2e 21 день назад

    Круто дякую вам за вашу працю, залишилося тільки знайти в собі сили.

    • @reactdev
      @reactdev 16 дней назад

      Знайдете, аби бажання)

  • @michaeldelorens
    @michaeldelorens 22 дня назад

    Дай вам Боже здоров'я

  • @user-jx5re7yv7i
    @user-jx5re7yv7i Месяц назад

    було б добре як би відео було в якості 1080

    • @reactdev
      @reactdev Месяц назад

      Треба перезнімати вже. Може як вийде 19ий реакт зробимо по ньому оновлену версію курсу

  • @lesan6866
    @lesan6866 Месяц назад

    Дуже гарно розповідаєте, дуже дякую Вам за ваш труд!

  • @multy_dytynstv
    @multy_dytynstv Месяц назад

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

    • @reactdev
      @reactdev Месяц назад

      Пішов переслуховувати)

  • @Yablonevski
    @Yablonevski Месяц назад

    Дуже корисний і якісний контент, побільше б такого на українському ютубі

    • @reactdev
      @reactdev Месяц назад

      Дякую, впевнений буде тільки більше)

  • @innaarchitector4223
    @innaarchitector4223 Месяц назад

    Дякую за вашу роботу🌟

  • @yankondratenko
    @yankondratenko Месяц назад

    Гарне відео. Дякую. Доречі: "next": "14.2.1" cookies().set() начебто працює

    • @reactdev
      @reactdev Месяц назад

      Так воно й має працювати) а от cookie з request не працює)

  • @Jen13022
    @Jen13022 Месяц назад

    крутий контент)

  • @YaroslavEx
    @YaroslavEx Месяц назад

    дякую. Придивляюся до технології. Я джун, потрібно буде робити обмінник. Працюю з Redux Toolkit, думаю, чи впроваджувати React Query.

  • @bessuka
    @bessuka Месяц назад

    Дякую, за старання!

  • @ViacheslavM3192
    @ViacheslavM3192 Месяц назад

    дуже класне і інформативне відео

  • @bohdan3619
    @bohdan3619 Месяц назад

    топ контент 👍 дякую 🔥

  • @user-zg7ss7ri1t
    @user-zg7ss7ri1t Месяц назад

    Як завжди корисний контент, дякую!

  • @SAPIENTIA666
    @SAPIENTIA666 Месяц назад

    Дякуємо!!!😊

  • @sevgenberg585
    @sevgenberg585 Месяц назад

    Можно узнать ваше мнение по MistCSS?

    • @reactdev
      @reactdev Месяц назад

      Не мав досвіду з цим проектом. Треба брати та пробувати на чомусь

  • @sevgenberg585
    @sevgenberg585 Месяц назад

    Хлопцы если нужен суперперформенс. Вышла вот такой фреймворк Elysiajs. Полностью тайп сефти. бан тоже уже все т.к. вышел WinerJS

  • @SuperPirks
    @SuperPirks Месяц назад

    Дякую за відео. Але не зрозумів одну річ. Коли універсальні компоненти рендеряться на клієнті а коли на сервері? І від чого це залежить?

    • @reactdev
      @reactdev Месяц назад

      Універсальні рендеряться і там і там. А серверрі лише на сервері

  • @bohdan3619
    @bohdan3619 Месяц назад

    Доброго дня, дякую за відео, все дуже ясно та зрозуміло, підскажіть, чи будуть ще відео по NextJs?

    • @reactdev
      @reactdev Месяц назад

      На наступному тижні має вийти відео про API в Next.JS

  • @Tory_dev
    @Tory_dev Месяц назад

    Доброго вечора! я щось пропустила, і тепер не можу зрозуміти : це визначено десь в документації, що файли сторінок мають називатися something.page.jsx , чи це Ваш підхід найменування файлів (я за приставку .page) ?

    • @reactdev
      @reactdev Месяц назад

      Виключно мій, для того щоб одразу бачити що це початок сторінки. Ви можете називати файли так, як зручно та звично вам та команді.

  • @user-gy6up8tx7r
    @user-gy6up8tx7r Месяц назад

    Дякую за чергове чудове відео!)

  • @user-fc2fk2vf7l
    @user-fc2fk2vf7l Месяц назад

    👍

  • @andeveloper
    @andeveloper Месяц назад

    допоможіть будь ласка з налаштуванням. хочу залишати пустий рядок в дужках наприклад коли пишеш стилі. він постійно рядок прибирає - не зміг найти в налаштуваннях.

    • @reactdev
      @reactdev Месяц назад

      Можна приклад?

    • @andeveloper
      @andeveloper Месяц назад

      @@reactdev звісно ) .container { // пустий рядок } і після збереження файлу цей пустий рядок прибирається .container { } і перетворюється ось на таке я хотів залишати цей пустий рядок можливо налаштувати щоб при збережені був максимум один пустий рядок

    • @reactdev
      @reactdev Месяц назад

      @@andeveloper Ось так спрацює. /* prettier-ignore */ .test { } Ще можна додати певні файли в ignore за допомогою .prettierignore Детальніше в документації prettier.io/docs/en/ignore.html

    • @andeveloper
      @andeveloper Месяц назад

      @@reactdev дякую, але це ж не те...

    • @reactdev
      @reactdev Месяц назад

      @@andeveloper Розумію, але prettier і був задизайнений з можливістю мінімальних кастомізацій - це одна з його ідей аби все було якомого більш одноманітно.

  • @RoTrend23493
    @RoTrend23493 Месяц назад

    Коментар для підтримки україномовного чудового контенту!!! (але якість відео для очей-катастрофа)

    • @reactdev
      @reactdev Месяц назад

      Дякую, це перші відео. Далі краще

  • @RoTrend23493
    @RoTrend23493 Месяц назад

    Супер! своїми словами, а не читання методички,, як інші))))

  • @vladimirmaximoff8005
    @vladimirmaximoff8005 Месяц назад

    Спасибо за контент)Успехов)

  • @electrovlady
    @electrovlady Месяц назад

    Привіт, дякую за якісний контент. Все чітко та по ділу. Окрема дяка за пояснення про () в назві тек. Чекаю на нові відео

  • @user_2782-
    @user_2782- Месяц назад

    +++

  • @iarokusch5108
    @iarokusch5108 2 месяца назад

    відео сподобалось, дякую , вчитись українською то привілеї. є момент коли ви пишете код і кажете що так не потрібно робити бо.... ніби все зрозуміло але власне не зрозуміло, ви пропускаєте і не пояснюєте наглядно. Скоріше більшість ваших підписників розуміє. Чекаю нових відео і надіюсь у вас у майбутньому буде більше часу і можливостей щоб випускати частіше такі відео.

    • @reactdev
      @reactdev 2 месяца назад

      Може бути, тому Ви можете спитати що саме не зрозуміло прямо тут, або тут t.me/reactbeginnerschat

  • @Evgen_mir
    @Evgen_mir 2 месяца назад

    Дякую, гарний стрім, цікава балачка)

  • @natavch
    @natavch 2 месяца назад

    Дякую за корисність

  • @viktorgrigorash7737
    @viktorgrigorash7737 2 месяца назад

    Дякую! Нарешті є інфа українською!!!

  • @user-ep4qo5sg4c
    @user-ep4qo5sg4c 2 месяца назад

    чомусь всеодно не відображається в GH Pages, 404 error і все . хто як це вирішував ?

    • @reactdev
      @reactdev 2 месяца назад

      Подивись basePath чи встановлений правильно

  • @user-zg7ss7ri1t
    @user-zg7ss7ri1t 2 месяца назад

    якщо це було підсумкове по клієнтській частині відео, то в майбутньому можна очікувати ще й по беку?)

    • @reactdev
      @reactdev 2 месяца назад

      Так, планується, треба закрити API ендпоінти

    • @user-zg7ss7ri1t
      @user-zg7ss7ri1t 2 месяца назад

      @@reactdev супер, буду чекати, гарні уроки по реакту, тепер по нексту) дякувати не передякувати) де лише береться стільки мотивації і часу...)

    • @reactdev
      @reactdev 2 месяца назад

      Дякую

  • @nix7705
    @nix7705 2 месяца назад

    Таке питання, як це змусити працювати з asyncThunk redux-toolkit? Так розумію воно перехоплює усі запити і будь який реквест від Thunk іде у ліс. Взагалі якась дерев'яна річ у плані сумісності. Не хочу повертати нічого з Лоадеру, я хочу щоб він просто викликав Thunk, бажано передав туди параметри, і воно мені запише щось у мій глобальний стейт. Ну в крайньому разі, чи можна з фетч з Лоадеру записати щось у глобальний стейт. Як це взагалі робиться з RTK? Жесть якась. Понапридумують якісь костлявих оновлень і нових версій які без напильника не працюють одна з одною.

    • @nix7705
      @nix7705 2 месяца назад

      Ладно, знайшов свою помилку, env з сервером лежав у src... store.dispatch(...Thunk(URL+params)) працює у Лоадері

    • @FinTart
      @FinTart 13 дней назад

      @@nix7705 як ти зробив, щоб asyncThunk запрацював у loader? можеш написати виклик asyncThunk у loader повністю?

    • @FinTart
      @FinTart 13 дней назад

      @@nix7705 дякую, розібрався

  • @victorchei
    @victorchei 2 месяца назад

    все як завжди круто, наглядно і лаконічно!!! Дуже очікую продовження відосиків

    • @reactdev
      @reactdev 2 месяца назад

      Колись будуть)

  • @evlads78
    @evlads78 2 месяца назад

    Чи має значення що краще застосовувати для опису компонентів - arrow functions або function declaration?

    • @reactdev
      @reactdev 2 месяца назад

      У arrow function немає властивості name (це ж анонімна функція), в стек трейсі виглядає крапельку менш зручно. В усьому іншому справа смаку

  • @user_2782-
    @user_2782- 2 месяца назад

    +++

  • @user_2782-
    @user_2782- 2 месяца назад

    +++

  • @user-kp4ji8ww6i
    @user-kp4ji8ww6i 2 месяца назад

    велике дякую за чергове корисне відео! все круто викладено!