ฝัง
- เผยแพร่เมื่อ 15 มิ.ย. 2024
- 🔥 Оформить премиум подписку - htmllessons.ru/premium?...
❤️ Отзывы тут - t.me/htmllessons_reviews
Регистрируйтесь на масштабную IT-конференцию GoCloud - sc.link/5W9cv
Реклама. ООО "Облачные технологии", ИНН 7736279160, ERID: 2VfnxwK83a8
Поддержи видео лайком, 2000 лайков 👍 и я делаю полный курс по Next js 2024!
Скачать 🖥 папку проекта - t.me/redgroupchannel
Новый большое видео на канале, сегодня я публикую полный курс React JS для начинающих. Этот материал позволит тебе изучить Реакт за 2 часа с нуля. Считай это 20 уроков React в одном видео. В прошлый раз я делал полный курс по React, но это был не такой полный материал. В этом ролике будет как и практика react, на примере проекта, так и немного теории реакта. Также отвечу на некоторые вопросы, которые встречаются на собеседование на Junior React Front-end разработчика. Можно сказать это фундаментальный курс по React от А до Я. Приятного просмотра!
🔐 МК по авторизации (все исходники и запись доступны навсегда!) - t.me/red_master_class_bot
⚡️ Список интенсивов по подписке - htmllessons.ru/list-intensive...
☑️ Чеклист "С нуля до Senior front-end" - t.me/checklist_redgroup_pay_bot
VK - redgroupchannel
🍥 Тема в редактор/IDE - Dark Modern / Jetbrains Mono / Catppuccin icon
✨Скачать настройку VS Code - get.redlinks.tech/s/7hEUp1j
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
00:00:00 - Начало
00:01:08 - План видео
00:02:27 - Курс по Nextjs
00:02:52 - Где скачать папку проекта?
00:03:47 - Концепция данного курса
00:05:23 - Как следить за всеми обновлениями?
00:06:35 - NPM vs YARN
00:07:20 - Vite vs Webpack
00:08:45 - Что такое React?
00:10:36 - Установка React
00:14:36 - Разбираем базовую структуру проекта
00:18:06 - Тема/Иконки/Шрифт
00:18:56 - Почему функциональные компоненты
00:24:26 - Особенности JSX
00:28:23 - Проблемы с SEO (возможно ли?) и почему выбирают Next.js?
00:31:56 - Первый компонент
00:33:29 - Варианты как можно писать стили в React
00:37:36 - Как подключить изображения в React?
00:39:36 - Вывод элементов с помощью map в JSX
00:41:26 - Условия внутри JSX - тернарный оператор
00:42:36 - Декомпозиция и пропсы
00:44:36 - Хуки в React - useState
00:49:34 - Оптимизация большого количества стейтов
00:52:50 - useEffect
00:58:26 - useRef - где применять?
01:01:56 - Как понять когда нужна оптимизация?
01:05:06 - useCallback - оптимизация
01:06:26 - useMemo - оптимизация и кэширование
01:09:06 - useCallback vs useMemo
01:09:48 - React.memo - повышение производительности
01:11:16 - Авторизация и контекст useContext
01:17:26 - Кастомный хук
01:18:36 - Выполнение запросов с помощью fetch
01:21:56 - Routing - React Router Dom v6
01:25:01 - Как писать ссылки без перезагрузки?
01:25:22 - Как вручную перенаправлять?
01:26:06 - Какой структуры папок придерживаться
01:30:04 - Показываю мою структуру в большом проекте
01:31:36 - Добавление TypeScript в проект
01:36:56 - Верстка редактора письма
01:53:06 - Функционал формы
02:13:16 - Простенькая база данных
02:15:06 - Почему важно писать сервисы?
02:15:51 - Получение данных axios
02:17:16 - Почему (Tanstack Query) React Query это круто?
02:20:36 - useMutation - мутация
02:23:54 - Рефакторинг компонентов
02:25:26 - Кратко про react 19
02:25:50 - Почему Redux устарел и какие альтернативы?
02:26:36 - Какой план обучения дальше?
👇 Полезные видео:
Деплой проекта с нуля - • ДЕПЛОЙ FULL-STACK Reac...
Настройка vs code - • Полный курс по настрой...
Настройка webstorm - • Настройка, которая сде...
Настройка терминала - • Настройка терминала 20...
⚡️Закрытый клуб "5 утра" - htmllessons.ru/ext/club
💡 Личный ТГ канал - t.me/hardmaxchannel
🌿 Плейлист с полными курсами для новичков и не только - • Полные курсы
👉 Все ссылки (+ настройка редактора) и информация обо мне - redlinks.tech/
Дизайн проекта - dribbble.com/shots/17411058-C...
#React #ReactJS #React_js #RedGroup
🔥 Оформить премиум подписку - htmllessons.ru/premium
Поддержи видео лайком, 2000 лайков 👍 и я делаю полный курс по Next js 2024!
Скачать 🖥 папку проекта - t.me/redgroupchannel
У меня npm не является встроенной командой
Установите nodejs
Версию 22.0.2 (Current), for Windows и using fnm? Или что using?
Давай полный курс по NextJS
+
+
+
Согласен!!!
+
Прям то что мне нужно на данном этапе. Нахватался всего, а по полочкам разложить не могу. Спасибо!
спасибо за видео! ждем курс по tailwind и next!)
Ждем полный курс по Next JS и TWcss
++
+
Фишка с теорией очень понравилось, благодаря тому что ты её не любишь ты все доносишь максимально доходчиво и круто
Огонь! Спасибо большое, очень полезно!
Спасибо огромное за качественный, актуальный контент и классную,подачу)
Прям именно то, что нужно было💯
как раз понадобилось (буквально два часа назад) повторить базу по реакту! и тут видео! спасибо!!!!
Брат, пожалуйста, не останавливайся, награда за знания, которые ты передаешь, велика.
Просто супер! Ждал этого 1000 лет!)
Спасибо за такой ролик. Сам изучаю React будет полезно.
Очень быстрый курс, четко и без воды! Ни разу не перемотал вперед, все в быстром темпе!
Новый уровень видео и уроков. Огонь
Топчик ролик. На новой клаве повысилась продуктивность у меня, тоже топ
Этот курс мне понятнее чем первый по реакту, спасибо!
Спасибо за видео, информация очень полезная
Супер! Спасибо👍
Курс просто пушка. Спасибо большое.
Спасибо за видео! Очень полезно
По первым двум минутам понимаю, что годнота подъехала🔥
Ждем так же next 💥
Спасибо тебе за видео )
Как всегда топ!!
Макс ты молодец. Так быстро проговорить лекции причем все по делу и без воды. 2 с половиной часа!!! Материал очень был полезен. Отдельное спасибо за тайм коды. Но ты терминатор :) как так можно выдержать. Удачи тебе и здоровья.
Большое спасибо! Первая часть была очень полезной, и вторая также пригодилась. Хочу сказать, что я уже перешёл на более высокий уровень. Я знаю и использую всю информацию из видео и сейчас активно изучаю материалы с других каналов. Однако мне больше нравится ваш стиль преподавания. Не могли бы вы создать продвинутый курс по React с использованием TypeScript? Все компании, в которых я проходил собеседования, требуют знание TypeScript и Next.js. Спасибо ещё раз!
Макс, спасибо тебе большое. Долго ждал, никак не мог найти у других блогеров такой хорошо структурированный курс, тем более в бесплатном доступе. Спасибо!
Снимай по next js, очень ждём!)
Tailwind css тоже нужно освежить, я считаю)
Четко , спасибо
Класс 👍. Давай курс по tailwind и next .js
Видео огонь🔥
Давай по NEXT JS!!!
Спасибо 😇
Полный курс по NextJS.
Заранее спасибо!
Ты крутой! Спасибо за урок по моему любимому реакту! С удовольствием посмотрел бы урок по таилвинду + реакт
Красава , лучший ....спс
курс имба по сравнению с прошлым(но и прошлый тоже кайф)✨✨✨✨
Давай полный курс по tailwind
Го полный курс по NextJS! Удачи!
Если что во vue можно использовать подобное
Хорошо обьсняешь даже теория не скучна красава
Макс, круто! Но хотелось бы "от и до" разбор теории + практика сразу на том каком-то интересном приложении. Ждем Next.js!!!
видос пушка хоть я знаю реакт все равно интресно повторить что то узнать новое)
комментарий в поддержку канала) 🎉🎉
Про мемоизацию можно и про react fiber поизучать например когда мы можем давать элементам аттрибут key
Макс, сделай, пожалуйста, полный курс по Next.js🔥
Привет, давай курс по Next 14
Спасибо больше ❤❤
Класс!
Сделайте, пожалуйста урок по ReactFlow. Очень актуально нынче. По этой библиотеке нет нормальных видосов.
Tailwind тоже ждем!!! Очень крутой инструмент!
Красава !!!!!!
Макс, даешь react hook form!!!
Давай полный курс по TailwindCSS / NextJS! Классный подход к преподнесению материала. Все по делу и понятно. Спасибо
Скоро будет в новом формате
Видео о красоте кода
сделай Курс по тайлвинд, пожалуйста ;) Очень крутой контент, спасибо!
самый хорошый канал по веб разработки 💪🏻👍🏻
Спасибо
Да, tailwind курс нужно обновить, next было бы ниплохо. И может короткое видео сделать про обновлённый react-query (разбора 5 версии на канале вроде как не было)
Топ, Макс, будет ли что-то по бэку? И что посоветуешь выбрать Express или Nest ?
Пока точно нет. Начать с express потом в нест, там же экспресс под капотом
Хорошая новость, будем смотреть
Хотелось бы видеть курс по React на более продвинутом уровне
Поддержите
А чего не хватило? Как мне кажется дальше уже next js идет
@@REDGroup у тебя в родмапе вроде больше перед некстом
пишу коммент в поддержку и продвижение канала 💪💪💪
Только вчера закончил повтор реакта по тому курсу, а тут новый подъехал😅
Приятного просмотра
Ждем обновление по nextjs и tailwind :)
Потратил 20 мин на поиск инфы по тому как при вводе «code» в консоли открыть VS Code, а ты через минуту после этого сказал как 🙃 Спасибо за видос !
@REDGroup Что за приложение на маке по раздвоению экранов?
Amethyst
Было бы круто верстать какой то проект и по ходу дела узнавать о фишках фреймворка. По типу видео Nuxt Dashboard
Про стэйт менеджер можно снять про Effector
Спасибо огромное за урок, очень информативно и лаконично! Единственное, имела сложность на практической части. Если следовать чисто по уроку, приходится один и тот же код переделывать несколько раз. Возможно, я ошиблась и стоило просмотреть всю практику, а уже потом приступать к работе; но, как по мне, было бы гораздо удобнее иметь более последовательный пример, чтоб, смотря видео, писать код одновременно с вами. Еще раз спасибо за ваш труд.
Будем стараться делать лучше. ❤️
Ждём курса по Next
👍🏿 красава
Давай полный курс по Tailwind
Полный курс по next пожалуйста Макс
Давай курс по NEXT и Tailwind!
Давай курсы по Tailwind и NextJs 14
Когда ты работаешь в Next.js, нет ошибок, всё нормально работает, а потом, когда обновляешь страницу, у тебя выходит ошибка. Почему?
Огонь как раз нужен был такой курс, тока начинаю изучать реакт🔥 спасибо большое!
Вот тока один вопрос, стоит ли просмотреть предыдущий ваш курс по реакту перед этим?
Думаю нет
Спасибо 👍
go next js!!!
Правильно ли я понимаю что команда 12:09 "rm -rf" относиться к Linux или macOS? Так как у меня была ошибка на Windows: Remove-Item : Не удается найти параметр, соответствующий имени параметра "rf".
строка:1 знак:4
+ rm -rf email
+ ~~~
+ CategoryInfo : InvalidArgument: (:) [Remove-Item], ParameterBindingException
+ FullyQualifiedErrorId : NamedParameterNotFound,Microsoft.PowerShell.Commands.RemoveItemCommand. Да и прописывание этой команды было только для примера?
Да, для виндовс есть аналоги. Это команда для удаления папки
Next.js Compiler интересует, а именно, как настроить styledComponents
Сразу видно что человек с огромным
опытом и знаниями, можете дать совет для меня(новичка) про этапы изучения фронтенд и т.д
есть видео на его канале от нуля до миддл все технологии и уровни
Огонь
Давай курс по tailwind
ураа
Здрасте Макс, если будешь делать по нексту, сдлеай пожалуйста показательный пример реализации themeBackground darkMode с ипользованием localStorage нативно, без всяких tailwind и прочишь готовых пакетов, будет здоровно, ибо на серверсайд нельзя использовать локальстор, а на клиенте всплывает перерендер баг, кнопки или темы. Возможно я уже подтяну знания и решу эту фичу, как выйдет ролик, но все же. Будет здоровно. За ранее спасибо и спасибо за это
Я думаю, нужно добавить к Next.js работу с React Query + SSR
В качестве пожелания! может вы снимите курс реакта на маленьких приложениях для начинающих где будут использоваться и рассмотрены случаи применения того или иного хука или функционала. Т.е каждый тайм код тема. Может на маленьком приложении будет рассмотрена или несколько тем.
В конце была практика или это сложно показалось?
@@REDGroup Я не поняла видимо что в конце ещё что то есть. Но все в одном месте и не понимаю когда и что лучше применить. А на отдельных приложениях было бы понятнее (по мне).
Здравствуйте, Макс! Надеюсь вы увидите мой комментарий и он не останется без ответа)
Во первых хочу чертовски сильно вас поблагодарить за ваш труд. Весь этот обучающий контент это просто кладись информации. Благодаря вам (и еще парочки блогеров) я смог с 0 трудоустроиться и перехать со своего города. На данный момент фронтендер... Однако благодаря вашим роликам смог изучить бекенд разработку (на nest), я уже довольно уверенно себя чувствую в беке, однако хочется расти дальше. Изучить например редис, когда его нужно применять, rabbit и многое многое из продвинутого. Хотел у вас спросить, есть ли у вас такие курсы, может планируете их снять? Может вы можете порекомедовать какие нибудь?
Заранее спасибо за ответ!
Спасибо за теплые слова. Пока в планах нет
А может можете порекомендовать какие нибудь курсы которые знаете сами?
@@REDGroup
@books414 Уже давно не видел продвинутых курсов в нашей сфере. Рекомендовать нечего
Хорошо, понял, спасибо@@REDGroup
Давай полный курс по Redux
Пожалуйста
сами разработчики говорят, что б сразу redux toolkit изучали
redux забыть хотят
Давай полный курс по NextJS Уже 2000 лайков эсть
Мы планируем новый формат курса, поэтому задержка
Курс Тейлвинд плиз!!!!!!!!!
Tailwind - полезный инструмент, замечаю что опытные разработчики часто его используют, в обучение уж точно или чтобы быстро наброски проекта накидать, было бы здорово иметь полный справочник по свойствам. Спасибо за курс, с минимальным количеством теории всё-таки материал лучше усваивается чем без неё, как мне кажется.
Будем еще улучшать сценарную часть, да и звук мне не до конца нравится. Я перфекционист в плане контента и важны вылизать до идеала
Проста топ
во vue можно использовать одинарные теги
сейчас реакт 19 выходит
опять снова пилить курс :)
Там ничего нового, можете тайм код глянуть
некст ждем
🚀🚀🚀🚀
как называет пакет иконок для vs code?
В описании
Привет Макс
я так и не понял, зачем он установил сначала typescript + swc, и после этого он говорит ставить эту вариацию, но после этого удаляет папку и уже установлено javascript + swc. Как это понимать ?
Потому что сначала хотел тс потом понял что новичкам будет сложно и поставил js версию
@@REDGroup понял. Спасибо.