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

Відео

Event Loop в JavaScript - коротко
Переглядів 6203 місяці тому
👉 Дуже коротко про Event Loop на приклад коду. Повна версія тут - ua-cam.com/video/LBz1aQtYot8/v-deo.html ✉️ Telegram: t.me/reactbeginners ❤️ Підтримати канал: opencollective.com/farstar
7.1 NextJs та API
Переглядів 1,1 тис.4 місяці тому
- Навіщо нам 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,1 тис.6 місяців тому
Як додати нову сторінку в 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,1 тис.6 місяців тому
Розглядаємо стилізацію 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,2 тис.6 місяців тому
У цьому відео ми поговоримо про стилізацію в 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,6 тис.6 місяців тому
У цьому відео ми створимо власн серверн та клієнтськ (універсальні) компоненти в Next.JS, та наочно побачимо різницю між ними 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
2-2. NextJS та справжні клієнтські компоненти
Переглядів 1,3 тис.6 місяців тому
Чи існують в 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,7 тис.6 місяців тому
У цьому відео ми поговоримо про види компонентів в Next.JS, призначення та обмеження серверних компонентів, переваги та недоліки різних видів компонентів 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
1-2. [Практика] NextJs - створюємо свій перший застосунок
Переглядів 2,7 тис.7 місяців тому
Опис курсу Next.JS - структура курсу, вимоги, програма та вс інш організаційн питання до курсу. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
1-1. Next.JS - що це таке і чим відрізняється від React
Переглядів 4 тис.7 місяців тому
Давайте обговоримо що таке Next.JS, як він має можливост та чим він відрізняється від React. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
0. Вступ до курсу Next.JS
Переглядів 3,6 тис.7 місяців тому
Опис курсу Next.JS - структура курсу, вимоги, програма та вс інш організаційн питання до курсу. 💻 Програма та матеріали - github.com/Drag13/NextJS-express-course-app 🧑‍💻Код github.com/Drag13/NextJS-express-course 💌 Telegram - t.me/reactbeginners
Питання зі співбесіди - Event Loop на прикладі коду
Переглядів 1,6 тис.7 місяців тому
👉 Розбираємо приклад з співбесіди на тему Event Loop. Коли виконуються setTimeout, коли Promise ✉️ Telegram: t.me/reactbeginners ❤️ Підтримати канал: opencollective.com/farstar
TypeScript - викинути не можна залишити. Кому постав сам.
Переглядів 1,5 тис.8 місяців тому
TypeScript - викинути не можна залишити. Кому постав сам.
TypeScript, приведення типів і satisfies
Переглядів 6518 місяців тому
TypeScript, приведення типів satisfies
Структура React застосунку за 15 хвилин - Українською
Переглядів 2,6 тис.9 місяців тому
Структура React застосунку за 15 хвилин - Українською
#Bun - можливості та враження українською за 4 хв
Переглядів 1,5 тис.11 місяців тому
#Bun - можливост та враження українською за 4 хв
React, Redux та поширені помилки під час використання глобального стору
Переглядів 1,7 тис.Рік тому
React, Redux та поширен помилки під час використання глобального стору
Next.JS та нові серверні компонети 13.4 - навіщо потрібні та як їх використовувати
Переглядів 2 тис.Рік тому
Next.JS та нов серверн компонети 13.4 - навіщо потрібн та як їх використовувати
Велике оновлення NextJS 13.4 - короткий огляд українською
Переглядів 3,1 тис.Рік тому
Велике оновлення NextJS 13.4 - короткий огляд українською
Огляд Next.JS за 16 хвилин - українською
Переглядів 18 тис.Рік тому
Огляд Next.JS за 16 хвилин - українською
ReactCodeSmells: Магічні цифри, зайві об'єкти та інші Code Smells в React.
Переглядів 6 тис.Рік тому
ReactCodeSmells: Магічн цифри, зайв об'єкти та інш Code Smells в React.
ReactCodeSmells: Використовуйте useCallback правильно!
Переглядів 1,1 тис.Рік тому
ReactCodeSmells: Використовуйте useCallback правильно!
ReactCodeSmells: useEffect та зомбі процеси.
Переглядів 762Рік тому
ReactCodeSmells: useEffect та зомб процеси.
ReactCodeSmells: Не зберігайте похідні дані в стейті.
Переглядів 3,3 тис.Рік тому
ReactCodeSmells: Не зберігайте похідн дан в стейті.
Три популярні помилки початківців в React - state, key, effect
Переглядів 1,4 тис.Рік тому
Три популярн помилки початківців в React - state, key, effect
Змінні оточення та секретні секрети на прикладі React за 10 хвилин
Переглядів 962Рік тому
Змінн оточення та секретн секрети на приклад React за 10 хвилин
Огляд Storybook - коротко, українською
Переглядів 3,3 тис.Рік тому
Огляд Storybook - коротко, українською
З новим 2023 роком!!!
Переглядів 608Рік тому
З новим 2023 роком!!!
React Router - помилки та код рев'ю
Переглядів 962Рік тому
React Router - помилки та код рев'ю

КОМЕНТАРІ

  • @PutlerXLO
    @PutlerXLO 16 годин тому

    "Реакт з нуля" це коли з конкретним SPA фреймворком не знайомий, а не вивчення npm, js, css, html і т.д.

  • @igorchornyj5823
    @igorchornyj5823 3 дні тому

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

  • @user-qb3kq7ep2k
    @user-qb3kq7ep2k 7 днів тому

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

  • @Dima-cz1gb
    @Dima-cz1gb 16 днів тому

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

  • @volodymyr_in_ua
    @volodymyr_in_ua 16 днів тому

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

  • @mishachubenko3394
    @mishachubenko3394 18 днів тому

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

  • @user-andriypt82
    @user-andriypt82 18 днів тому

    +++

  • @tarasyurchyshyn9701
    @tarasyurchyshyn9701 24 дні тому

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

  • @Igor_UA
    @Igor_UA 26 днів тому

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

  • @user-kc3ek9uv1y
    @user-kc3ek9uv1y 26 днів тому

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

  • @user-gy6up8tx7r
    @user-gy6up8tx7r 28 днів тому

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

  • @schamanperenok5637
    @schamanperenok5637 Місяць тому

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

  • @romko2391
    @romko2391 Місяць тому

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

    • @reactdev
      @reactdev 28 днів тому

      Я б не радив чистий реакт для 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 2 місяці тому

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

    • @reactdev
      @reactdev Місяць тому

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

  • @freetimeproject7
    @freetimeproject7 2 місяці тому

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

    • @reactdev
      @reactdev Місяць тому

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

  • @user-ol1ve8vg9l
    @user-ol1ve8vg9l 2 місяці тому

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

  • @ShamrikOFF
    @ShamrikOFF 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 місяці тому

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

  • @YaroslavEx
    @YaroslavEx 4 місяці тому

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

  • @bessuka
    @bessuka 5 місяців тому

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