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

วีดีโอ

Event Loop в JavaScript - коротко
มุมมอง 6173 หลายเดือนก่อน
👉 Дуже коротко про Event Loop на приклад коду. Повна версія тут - th-cam.com/video/LBz1aQtYot8/w-d-xo.html ✉️ Telegram: t.me/reactbeginners ❤️ Підтримати канал: opencollective.com/farstar
7.1 NextJs та API
มุมมอง 1.1K4 หลายเดือนก่อน
- Навіщо нам 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 та Клієнтський роутинг
มุมมอง 1.1K6 หลายเดือนก่อน
Як додати нову сторінку в 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 та стилізація
มุมมอง 1.1K6 หลายเดือนก่อน
Розглядаємо стилізацію 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
มุมมอง 1.2K6 หลายเดือนก่อน
У цьому відео ми поговоримо про стилізацію в 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.5K6 หลายเดือนก่อน
У цьому відео ми створимо власн серверн та клієнтськ (універсальні) компоненти в Next.JS, та наочно побачимо різницю між ними 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
2-2. NextJS та справжні клієнтські компоненти
มุมมอง 1.3K6 หลายเดือนก่อน
Чи існують в 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.7K6 หลายเดือนก่อน
У цьому відео ми поговоримо про види компонентів в Next.JS, призначення та обмеження серверних компонентів, переваги та недоліки різних видів компонентів 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
1-2. [Практика] NextJs - створюємо свій перший застосунок
มุมมอง 2.7K6 หลายเดือนก่อน
Опис курсу Next.JS - структура курсу, вимоги, програма та вс інш організаційн питання до курсу. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
1-1. Next.JS - що це таке і чим відрізняється від React
มุมมอง 4K7 หลายเดือนก่อน
Давайте обговоримо що таке Next.JS, як він має можливост та чим він відрізняється від React. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
0. Вступ до курсу Next.JS
มุมมอง 3.6K7 หลายเดือนก่อน
Опис курсу Next.JS - структура курсу, вимоги, програма та вс інш організаційн питання до курсу. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
Питання зі співбесіди - Event Loop на прикладі коду
มุมมอง 1.6K7 หลายเดือนก่อน
👉 Розбираємо приклад з співбесіди на тему Event Loop. Коли виконуються setTimeout, коли Promise ✉️ Telegram: t.me/reactbeginners ❤️ Підтримати канал: opencollective.com/farstar
TypeScript - викинути не можна залишити. Кому постав сам.
มุมมอง 1.5K8 หลายเดือนก่อน
TypeScript - викинути не можна залишити. Кому постав сам.
TypeScript, приведення типів і satisfies
มุมมอง 6518 หลายเดือนก่อน
TypeScript, приведення типів satisfies
Структура React застосунку за 15 хвилин - Українською
มุมมอง 2.6K9 หลายเดือนก่อน
Структура React застосунку за 15 хвилин - Українською
#Bun - можливості та враження українською за 4 хв
มุมมอง 1.5K11 หลายเดือนก่อน
#Bun - можливост та враження українською за 4 хв
React, Redux та поширені помилки під час використання глобального стору
มุมมอง 1.7Kปีที่แล้ว
React, Redux та поширен помилки під час використання глобального стору
Next.JS та нові серверні компонети 13.4 - навіщо потрібні та як їх використовувати
มุมมอง 2Kปีที่แล้ว
Next.JS та нов серверн компонети 13.4 - навіщо потрібн та як їх використовувати
Велике оновлення NextJS 13.4 - короткий огляд українською
มุมมอง 3.1Kปีที่แล้ว
Велике оновлення NextJS 13.4 - короткий огляд українською
Огляд Next.JS за 16 хвилин - українською
มุมมอง 18Kปีที่แล้ว
Огляд Next.JS за 16 хвилин - українською
ReactCodeSmells: Магічні цифри, зайві об'єкти та інші Code Smells в React.
มุมมอง 6Kปีที่แล้ว
ReactCodeSmells: Магічн цифри, зайв об'єкти та інш Code Smells в React.
ReactCodeSmells: Використовуйте useCallback правильно!
มุมมอง 1.1Kปีที่แล้ว
ReactCodeSmells: Використовуйте useCallback правильно!
ReactCodeSmells: useEffect та зомбі процеси.
มุมมอง 761ปีที่แล้ว
ReactCodeSmells: useEffect та зомб процеси.
ReactCodeSmells: Не зберігайте похідні дані в стейті.
มุมมอง 3.3Kปีที่แล้ว
ReactCodeSmells: Не зберігайте похідн дан в стейті.
Три популярні помилки початківців в React - state, key, effect
มุมมอง 1.4Kปีที่แล้ว
Три популярн помилки початківців в React - state, key, effect
Змінні оточення та секретні секрети на прикладі React за 10 хвилин
มุมมอง 961ปีที่แล้ว
Змінн оточення та секретн секрети на приклад React за 10 хвилин
Огляд Storybook - коротко, українською
มุมมอง 3.3Kปีที่แล้ว
Огляд Storybook - коротко, українською
З новим 2023 роком!!!
มุมมอง 608ปีที่แล้ว
З новим 2023 роком!!!
React Router - помилки та код рев'ю
มุมมอง 962ปีที่แล้ว
React Router - помилки та код рев'ю

ความคิดเห็น

  • @igorchornyj5823
    @igorchornyj5823 22 ชั่วโมงที่ผ่านมา

    Дуже корисна лекція! Дякую!

  • @user-qb3kq7ep2k
    @user-qb3kq7ep2k 5 วันที่ผ่านมา

    Лайк, коментар. Дякую за відео. Дякую за приклади.

  • @Dima-cz1gb
    @Dima-cz1gb 14 วันที่ผ่านมา

    все ніби дуже просто, але коли доводиться через запит fetch витягнути інформацію наприклад id та name і потім щоб воно вписалось в вашу функцію де result = id:, name: і т.п я починаю дуже тупити і не знаю як назвати всі о'бєкти і який об'єкт з яким порівнювати і це здається дууже важко

  • @volodymyr_in_ua
    @volodymyr_in_ua 14 วันที่ผ่านมา

    Це одне із найбльш usefull відео по практичному застосуванню git. Автор тримає фокус на послідовності дій.

  • @mishachubenko3394
    @mishachubenko3394 16 วันที่ผ่านมา

    Пане Віталій дякую за науку ! Хай коду на Українській буде більше !!!

  • @user-andriypt82
    @user-andriypt82 16 วันที่ผ่านมา

    +++

  • @tarasyurchyshyn9701
    @tarasyurchyshyn9701 22 วันที่ผ่านมา

    дізлайк відпрацює тільки один раз тому що пропса dislike не міняється після першого дізлайку і useEffect не відпрацьовує. Вот навіщо лажу гнати, га?))) UPD: Fix:: const dislike = () => setLiked( liked === 'pending' ? 'disliked' : 'pending'); чуток костильно але для даного прикладу піде)

  • @Igor_UA
    @Igor_UA 24 วันที่ผ่านมา

    Привіт Рубану Віталію від Рубана Ігоря

  • @user-kc3ek9uv1y
    @user-kc3ek9uv1y 24 วันที่ผ่านมา

    Супер, дякую за укр мову, пояснив класно!!

  • @user-gy6up8tx7r
    @user-gy6up8tx7r 26 วันที่ผ่านมา

    Дякую! Як завжди, дуже класне відео!) А ще більше дякую за нову роботу, яку робите!

  • @schamanperenok5637
    @schamanperenok5637 หลายเดือนก่อน

    а сорси з цього відео хтось - кудись аплодив на паблік?

  • @romko2391
    @romko2391 หลายเดือนก่อน

    а для інтернет-магазинів реакт підійде?

    • @reactdev
      @reactdev 26 วันที่ผ่านมา

      Я б не радив чистий реакт для e-commerce. Будуть проблеми з seo. Як варіант можна взяти Next.JS

  • @schamanperenok5637
    @schamanperenok5637 หลายเดือนก่อน

    запитання а лекція по хуках по факту була вже чи не записана була чи вона є в плейлісті і який її номер??

  • @user-mh5ec4hi4o
    @user-mh5ec4hi4o หลายเดือนก่อน

    SavchukIT 2!!!!!!!!!!!

  • @y_y6153
    @y_y6153 หลายเดือนก่อน

    хорошо говоришь, молодец) есть пару вопросов, поспрашиваю пока у гпт, может еще вернусь)) а так спасибо (:

  • @denyslysenko9617
    @denyslysenko9617 หลายเดือนก่อน

    Коментар на підтримку каналу. Дякую за Bашу працю!

  • @hermiona1940
    @hermiona1940 หลายเดือนก่อน

    Дуже цікаве та корисне відео! дякую!

  • @Zhuyka
    @Zhuyka หลายเดือนก่อน

    Потрапив сюди по рекомендації AI Gemini, дякую:)

    • @reactdev
      @reactdev หลายเดือนก่อน

      Нічого собі)

  • @sergeisamus8244
    @sergeisamus8244 หลายเดือนก่อน

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

    • @reactdev
      @reactdev หลายเดือนก่อน

      Дякую. Нажаль канал трохи на паузі у зв'язку зі зміною роботи) Але все має бути)

  • @freetimeproject7
    @freetimeproject7 2 หลายเดือนก่อน

    Якщо чесно, не розумію взагалі приколу тайпскрипта хоч й 4 роки вже працюю. як така заміна документації? ну ок, але можна одразу нормальну документацію писати. Перевірка аби в коді неправильно чогось не написали? ну для цього є код ревью від команди й тести. А якщо цього нема, але є продвинутий тайпскрипт з Дженериками - то це якась дичина а не проект. Більш зрозуміло для нових програмістів? знов - документація, рідмі й сам код по собі читабельним має бути. Натомість ми маємо купу зайвого коду для програміста, превірки вхідних данних в ф-ї хоча це по замовченню повинно бути в норм коді - в вас ф-я приймає те що не треба- ловіть Ексепшн Й вишенкою - маємо джаваскріпт код котрий при перетворені в байт код НЕ дозволяє тепер робити купу оптимізацій

    • @reactdev
      @reactdev หลายเดือนก่อน

      Якщо за 4 роки ви не побачили користі від TS, то може для вас його і не має. Тут вже стільки списів зламано, що, напевне, дискутувати просто немає сенсу.

  • @user-ol1ve8vg9l
    @user-ol1ve8vg9l 2 หลายเดือนก่อน

    Божественно структурована і подана інформація. Величезне вам дякую від всіх хто вивчає React. Ви зробили великий вклад у мою освіту!

  • @ShamrikOFF
    @ShamrikOFF 3 หลายเดือนก่อน

    Лайк і комент в просування каналу

    • @reactdev
      @reactdev 3 หลายเดือนก่อน

      Дякую

  • @MrSeredan
    @MrSeredan 3 หลายเดือนก่อน

    Щось мій useNavigation завжди має state idle і не переходить у loading. Може знаєте чому? Я ще намагаюсь розділити код за допомогою lazy і suspension. От у suspension fallback приймає компонент і можу показати що відбувається завантаження, а без нього ніяк

  • @batalika
    @batalika 3 หลายเดือนก่อน

    Дякую за відео, приклад змін - найкращий )) Україномовний контент - то любов )

  • @katerynashadrina1514
    @katerynashadrina1514 3 หลายเดือนก่อน

    дякую!

  • @pathliving
    @pathliving 3 หลายเดือนก่อน

    як щодо vanilla extract (zero-runtime) css-in-js та nextjs v14? слова з оф.документації "Best-in-class developer experience without the runtime cost. Don’t ship a dynamic CSS engine to your users - ship regular CSS."

  • @IQFlow1
    @IQFlow1 3 หลายเดือนก่อน

    цікаве пояснення, а можна детальніше будь ласка? може щоб було зрозуміліше зробити 2 приклади, в одному буде проміс(res, rej), а в іншому такий як в прикладі. І коли саме потрібна така конструкція промісу?

  • @IQFlow1
    @IQFlow1 3 หลายเดือนก่อน

    дякую, крута інфа якої мало, щей на топовому прикладі)

  • @Natalia-iz2vi
    @Natalia-iz2vi 3 หลายเดือนก่อน

    Добрий день, дякую за відео, вчора доробила, але! Я протестила і у себе і у вас . Останній рядок не відпрацьовує взагалі!!! там є баг. Можливо порадите як пофіксити

  • @alenakavyrshyna3916
    @alenakavyrshyna3916 3 หลายเดือนก่อน

    Дякую ❤

  • @panKocky
    @panKocky 3 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 3 หลายเดือนก่อน

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

    • @panKocky
      @panKocky 3 หลายเดือนก่อน

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

  • @user-qv5hw4hj9c
    @user-qv5hw4hj9c 3 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 3 หลายเดือนก่อน

      Дякую!

  • @Krasilnokova
    @Krasilnokova 3 หลายเดือนก่อน

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

  • @code.clear.
    @code.clear. 4 หลายเดือนก่อน

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

  • @asya-qm8iu
    @asya-qm8iu 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

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

    • @asya-qm8iu
      @asya-qm8iu 4 หลายเดือนก่อน

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

  • @TeT22324
    @TeT22324 4 หลายเดือนก่อน

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

  • @kulibabenko
    @kulibabenko 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

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

  • @2Extremum
    @2Extremum 4 หลายเดือนก่อน

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

  • @user-wi2wj1er2e
    @user-wi2wj1er2e 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

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

  • @michaeldelorens
    @michaeldelorens 4 หลายเดือนก่อน

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

  • @user-jx5re7yv7i
    @user-jx5re7yv7i 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

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

  • @lesan6866
    @lesan6866 4 หลายเดือนก่อน

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

  • @multy_dytynstv
    @multy_dytynstv 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

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

  • @Yablonevski
    @Yablonevski 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

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

  • @innaarchitector4223
    @innaarchitector4223 4 หลายเดือนก่อน

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

  • @yankondratenko
    @yankondratenko 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

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

  • @Jen13022
    @Jen13022 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

      Дякую

  • @YaroslavEx
    @YaroslavEx 4 หลายเดือนก่อน

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

  • @bessuka
    @bessuka 4 หลายเดือนก่อน

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

  • @ViacheslavM3192
    @ViacheslavM3192 4 หลายเดือนก่อน

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

    • @reactdev
      @reactdev 4 หลายเดือนก่อน

      Дякую!