![Курс React для початківців від Vitalii Ruban](/img/default-banner.jpg)
- 99
- 251 843
Курс React для початківців від Vitalii Ruban
Ukraine
Приєднався 21 кві 2022
Цей канал присвячений курсу React для початківців, створеного на підтримку Українців під час війни. Курс безкоштовний, а всі матеріали відкриті за посиланням - github.com/Drag13/react-learning-course-short
Під час курсу ми обговоримо наступні теми:
👉 Що таке React
👉 React - старт з нуля
👉 Компоненти в React
👉 Як створити компоненту в React
👉 Стилі в React - CSS, CSS Modules, SCSS, CSSinJS
👉 Інструменти керування станом React застосунку
👉 React та форми
👉 React та React Router
👉 React та комунікація з сервером
👉 React та UI бібліотеки
👉 React та тести
Практичний курс доступний за посиланням: ua-cam.com/play/PLx9b8ngesbGEXrHBR8fBcQFfYyAeZv59d.html
Під час курсу ми обговоримо наступні теми:
👉 Що таке React
👉 React - старт з нуля
👉 Компоненти в React
👉 Як створити компоненту в React
👉 Стилі в React - CSS, CSS Modules, SCSS, CSSinJS
👉 Інструменти керування станом React застосунку
👉 React та форми
👉 React та React Router
👉 React та комунікація з сервером
👉 React та UI бібліотеки
👉 React та тести
Практичний курс доступний за посиланням: ua-cam.com/play/PLx9b8ngesbGEXrHBR8fBcQFfYyAeZv59d.html
Декомпозиція коду в React - коротко
👉 Коротко про декомпозицію в React застосунках на прикладі коду
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
✉️ 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 - коротко, українською
"Реакт з нуля" це коли з конкретним SPA фреймворком не знайомий, а не вивчення npm, js, css, html і т.д.
Дуже корисна лекція! Дякую!
Лайк, коментар. Дякую за відео. Дякую за приклади.
все ніби дуже просто, але коли доводиться через запит fetch витягнути інформацію наприклад id та name і потім щоб воно вписалось в вашу функцію де result = id:, name: і т.п я починаю дуже тупити і не знаю як назвати всі о'бєкти і який об'єкт з яким порівнювати і це здається дууже важко
Це одне із найбльш usefull відео по практичному застосуванню git. Автор тримає фокус на послідовності дій.
Пане Віталій дякую за науку ! Хай коду на Українській буде більше !!!
+++
дізлайк відпрацює тільки один раз тому що пропса dislike не міняється після першого дізлайку і useEffect не відпрацьовує. Вот навіщо лажу гнати, га?))) UPD: Fix:: const dislike = () => setLiked( liked === 'pending' ? 'disliked' : 'pending'); чуток костильно але для даного прикладу піде)
Привіт Рубану Віталію від Рубана Ігоря
Супер, дякую за укр мову, пояснив класно!!
Дякую! Як завжди, дуже класне відео!) А ще більше дякую за нову роботу, яку робите!
а сорси з цього відео хтось - кудись аплодив на паблік?
а для інтернет-магазинів реакт підійде?
Я б не радив чистий реакт для e-commerce. Будуть проблеми з seo. Як варіант можна взяти Next.JS
запитання а лекція по хуках по факту була вже чи не записана була чи вона є в плейлісті і який її номер??
SavchukIT 2!!!!!!!!!!!
хорошо говоришь, молодец) есть пару вопросов, поспрашиваю пока у гпт, может еще вернусь)) а так спасибо (:
Коментар на підтримку каналу. Дякую за Bашу працю!
Дуже цікаве та корисне відео! дякую!
Потрапив сюди по рекомендації AI Gemini, дякую:)
Нічого собі)
не знаю де краще залишити коментар, тому залишу тут, дуже крутий канал, дуже зрозуміло і чітко подається інформація, сам працюю джуном, з деякими пробілами в знаннях дуже допоміг ваш канал, продовжуйте в тому ж дусі, бажаю успіху.
Дякую. Нажаль канал трохи на паузі у зв'язку зі зміною роботи) Але все має бути)
Якщо чесно, не розумію взагалі приколу тайпскрипта хоч й 4 роки вже працюю. як така заміна документації? ну ок, але можна одразу нормальну документацію писати. Перевірка аби в коді неправильно чогось не написали? ну для цього є код ревью від команди й тести. А якщо цього нема, але є продвинутий тайпскрипт з Дженериками - то це якась дичина а не проект. Більш зрозуміло для нових програмістів? знов - документація, рідмі й сам код по собі читабельним має бути. Натомість ми маємо купу зайвого коду для програміста, превірки вхідних данних в ф-ї хоча це по замовченню повинно бути в норм коді - в вас ф-я приймає те що не треба- ловіть Ексепшн Й вишенкою - маємо джаваскріпт код котрий при перетворені в байт код НЕ дозволяє тепер робити купу оптимізацій
Якщо за 4 роки ви не побачили користі від TS, то може для вас його і не має. Тут вже стільки списів зламано, що, напевне, дискутувати просто немає сенсу.
Божественно структурована і подана інформація. Величезне вам дякую від всіх хто вивчає React. Ви зробили великий вклад у мою освіту!
Лайк і комент в просування каналу
Дякую
Щось мій useNavigation завжди має state idle і не переходить у loading. Може знаєте чому? Я ще намагаюсь розділити код за допомогою lazy і suspension. От у suspension fallback приймає компонент і можу показати що відбувається завантаження, а без нього ніяк
Дякую за відео, приклад змін - найкращий )) Україномовний контент - то любов )
дякую!
як щодо 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."
цікаве пояснення, а можна детальніше будь ласка? може щоб було зрозуміліше зробити 2 приклади, в одному буде проміс(res, rej), а в іншому такий як в прикладі. І коли саме потрібна така конструкція промісу?
дякую, крута інфа якої мало, щей на топовому прикладі)
Добрий день, дякую за відео, вчора доробила, але! Я протестила і у себе і у вас . Останній рядок не відпрацьовує взагалі!!! там є баг. Можливо порадите як пофіксити
Дякую ❤
"спочатку виконується весь синхронний код, це весь код крім ... промісів..." а чому тоді 4 і 6 з проміса вивелось раніше за 13?
А тому що код яким ініціалізується проміс - теж синхронний) детальніше в повному відео)
@@reactdev зрозумів, дякую
Дуже корисно, по документації було складно розібратися і тут натрапила на це відео, дякую за пояснення!)
Дякую!
Дуже корисно! Дякую!
велетенське дякую за такий чудовий контент
Дякую за контент, дуже корисно🤩. ( Вибачте за душність: але Vite бібліотека читається /vit/, як "veet"🙈)
Та чому не подушнити якщо є обґрунтований привід)
@@reactdev 😁 тоді я ще трохи подушню🤭 будь ласочка, Додайте в описі під відео посилання на наступний урок, так буде набагато простіше зорієнтуватися . заздалегідь дякую😊😊😊
приклад змін - вогонь! дякую за відео!
Зараз дойшов до половини відео, і вже радий, що попав на тебе, шановний Автор, вже стало на місця що таке Oullet, LayOut, index: true. Дякую за повільну і покрокову роздуплятину.
Приходьте ще)
Дякую за лекцію. В кінці коли почалося гадання то зловив злісних фейспалмів, люди не знають банального scope JS, а вже вивчають react
Круто дякую вам за вашу працю, залишилося тільки знайти в собі сили.
Знайдете, аби бажання)
Дай вам Боже здоров'я
було б добре як би відео було в якості 1080
Треба перезнімати вже. Може як вийде 19ий реакт зробимо по ньому оновлену версію курсу
Дуже гарно розповідаєте, дуже дякую Вам за ваш труд!
Накраще що в цьому відео є це перша зміна тексту)) взагалі топчик) А так погоджуюсь з усіма, гарна ілюстрація гіт, взяв собі відосик на озброєння:) Успіхів
Пішов переслуховувати)
Дуже корисний і якісний контент, побільше б такого на українському ютубі
Дякую, впевнений буде тільки більше)
Дякую за вашу роботу🌟
Гарне відео. Дякую. Доречі: "next": "14.2.1" cookies().set() начебто працює
Так воно й має працювати) а от cookie з request не працює)
крутий контент)
Дякую
дякую. Придивляюся до технології. Я джун, потрібно буде робити обмінник. Працюю з Redux Toolkit, думаю, чи впроваджувати React Query.
Дякую, за старання!