- Видео 99
- Просмотров 227 633
Курс React для початківців від Vitalii Ruban
Украина
Добавлен 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 та тести
Практичний курс доступний за посиланням: ruclips.net/p/PLx9b8ngesbGEXrHBR8fBcQFfYyAeZv59d
Під час курсу ми обговоримо наступні теми:
👉 Що таке React
👉 React - старт з нуля
👉 Компоненти в React
👉 Як створити компоненту в React
👉 Стилі в React - CSS, CSS Modules, SCSS, CSSinJS
👉 Інструменти керування станом React застосунку
👉 React та форми
👉 React та React Router
👉 React та комунікація з сервером
👉 React та UI бібліотеки
👉 React та тести
Практичний курс доступний за посиланням: ruclips.net/p/PLx9b8ngesbGEXrHBR8fBcQFfYyAeZv59d
Декомпозиція коду в React - коротко
👉 Коротко про декомпозицію в React застосунках на прикладі коду
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
✉️ 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 - коротко, українською
Дякую ❤
"спочатку виконується весь синхронний код, це весь код крім ... промісів..." а чому тоді 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.
Дякую, за старання!
дуже класне і інформативне відео
Дякую!
топ контент 👍 дякую 🔥
Як завжди корисний контент, дякую!
Дякуємо!!!😊
Можно узнать ваше мнение по MistCSS?
Не мав досвіду з цим проектом. Треба брати та пробувати на чомусь
Хлопцы если нужен суперперформенс. Вышла вот такой фреймворк Elysiajs. Полностью тайп сефти. бан тоже уже все т.к. вышел WinerJS
Дякую за відео. Але не зрозумів одну річ. Коли універсальні компоненти рендеряться на клієнті а коли на сервері? І від чого це залежить?
Універсальні рендеряться і там і там. А серверрі лише на сервері
Доброго дня, дякую за відео, все дуже ясно та зрозуміло, підскажіть, чи будуть ще відео по NextJs?
На наступному тижні має вийти відео про API в Next.JS
Доброго вечора! я щось пропустила, і тепер не можу зрозуміти : це визначено десь в документації, що файли сторінок мають називатися something.page.jsx , чи це Ваш підхід найменування файлів (я за приставку .page) ?
Виключно мій, для того щоб одразу бачити що це початок сторінки. Ви можете називати файли так, як зручно та звично вам та команді.
Дякую за чергове чудове відео!)
👍
допоможіть будь ласка з налаштуванням. хочу залишати пустий рядок в дужках наприклад коли пишеш стилі. він постійно рядок прибирає - не зміг найти в налаштуваннях.
Можна приклад?
@@reactdev звісно ) .container { // пустий рядок } і після збереження файлу цей пустий рядок прибирається .container { } і перетворюється ось на таке я хотів залишати цей пустий рядок можливо налаштувати щоб при збережені був максимум один пустий рядок
@@andeveloper Ось так спрацює. /* prettier-ignore */ .test { } Ще можна додати певні файли в ignore за допомогою .prettierignore Детальніше в документації prettier.io/docs/en/ignore.html
@@reactdev дякую, але це ж не те...
@@andeveloper Розумію, але prettier і був задизайнений з можливістю мінімальних кастомізацій - це одна з його ідей аби все було якомого більш одноманітно.
Коментар для підтримки україномовного чудового контенту!!! (але якість відео для очей-катастрофа)
Дякую, це перші відео. Далі краще
Супер! своїми словами, а не читання методички,, як інші))))
Спасибо за контент)Успехов)
Привіт, дякую за якісний контент. Все чітко та по ділу. Окрема дяка за пояснення про () в назві тек. Чекаю на нові відео
+++
відео сподобалось, дякую , вчитись українською то привілеї. є момент коли ви пишете код і кажете що так не потрібно робити бо.... ніби все зрозуміло але власне не зрозуміло, ви пропускаєте і не пояснюєте наглядно. Скоріше більшість ваших підписників розуміє. Чекаю нових відео і надіюсь у вас у майбутньому буде більше часу і можливостей щоб випускати частіше такі відео.
Може бути, тому Ви можете спитати що саме не зрозуміло прямо тут, або тут t.me/reactbeginnerschat
Дякую, гарний стрім, цікава балачка)
Дякую за корисність
Дякую! Нарешті є інфа українською!!!
чомусь всеодно не відображається в GH Pages, 404 error і все . хто як це вирішував ?
Подивись basePath чи встановлений правильно
якщо це було підсумкове по клієнтській частині відео, то в майбутньому можна очікувати ще й по беку?)
Так, планується, треба закрити API ендпоінти
@@reactdev супер, буду чекати, гарні уроки по реакту, тепер по нексту) дякувати не передякувати) де лише береться стільки мотивації і часу...)
Дякую
Таке питання, як це змусити працювати з asyncThunk redux-toolkit? Так розумію воно перехоплює усі запити і будь який реквест від Thunk іде у ліс. Взагалі якась дерев'яна річ у плані сумісності. Не хочу повертати нічого з Лоадеру, я хочу щоб він просто викликав Thunk, бажано передав туди параметри, і воно мені запише щось у мій глобальний стейт. Ну в крайньому разі, чи можна з фетч з Лоадеру записати щось у глобальний стейт. Як це взагалі робиться з RTK? Жесть якась. Понапридумують якісь костлявих оновлень і нових версій які без напильника не працюють одна з одною.
Ладно, знайшов свою помилку, env з сервером лежав у src... store.dispatch(...Thunk(URL+params)) працює у Лоадері
@@nix7705 як ти зробив, щоб asyncThunk запрацював у loader? можеш написати виклик asyncThunk у loader повністю?
@@nix7705 дякую, розібрався
все як завжди круто, наглядно і лаконічно!!! Дуже очікую продовження відосиків
Колись будуть)
Чи має значення що краще застосовувати для опису компонентів - arrow functions або function declaration?
У arrow function немає властивості name (це ж анонімна функція), в стек трейсі виглядає крапельку менш зручно. В усьому іншому справа смаку
+++
+++
велике дякую за чергове корисне відео! все круто викладено!