- 99
- 251 521
Курс 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 та тести
Практичний курс доступний за посиланням: th-cam.com/play/PLx9b8ngesbGEXrHBR8fBcQFfYyAeZv59d.html
Під час курсу ми обговоримо наступні теми:
👉 Що таке React
👉 React - старт з нуля
👉 Компоненти в React
👉 Як створити компоненту в React
👉 Стилі в React - CSS, CSS Modules, SCSS, CSSinJS
👉 Інструменти керування станом React застосунку
👉 React та форми
👉 React та React Router
👉 React та комунікація з сервером
👉 React та UI бібліотеки
👉 React та тести
Практичний курс доступний за посиланням: th-cam.com/play/PLx9b8ngesbGEXrHBR8fBcQFfYyAeZv59d.html
Декомпозиція коду в React - коротко
👉 Коротко про декомпозицію в React застосунках на прикладі коду
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
✉️ 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 хвилин
Дуже корисна лекція! Дякую!
Лайк, коментар. Дякую за відео. Дякую за приклади.
все ніби дуже просто, але коли доводиться через запит 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.
Дякую, за старання!
дуже класне і інформативне відео
Дякую!