ПОЛНЫЙ КУРС REACT JS для начинающих - Изучи Реакт за 2 часа с нуля!
HTML-код
- Опубликовано: 2 июн 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!)
Огонь! Спасибо большое, очень полезно!
Фишка с теорией очень понравилось, благодаря тому что ты её не любишь ты все доносишь максимально доходчиво и круто
Спасибо огромное за качественный, актуальный контент и классную,подачу)
как раз понадобилось (буквально два часа назад) повторить базу по реакту! и тут видео! спасибо!!!!
Макс ты молодец. Так быстро проговорить лекции причем все по делу и без воды. 2 с половиной часа!!! Материал очень был полезен. Отдельное спасибо за тайм коды. Но ты терминатор :) как так можно выдержать. Удачи тебе и здоровья.
Ждем полный курс по Next JS и TWcss
++
+
Очень быстрый курс, четко и без воды! Ни разу не перемотал вперед, все в быстром темпе!
Прям именно то, что нужно было💯
Брат, пожалуйста, не останавливайся, награда за знания, которые ты передаешь, велика.
Спасибо за такой ролик. Сам изучаю React будет полезно.
Просто супер! Ждал этого 1000 лет!)
Топчик ролик. На новой клаве повысилась продуктивность у меня, тоже топ
Этот курс мне понятнее чем первый по реакту, спасибо!
Спасибо за видео, информация очень полезная
Супер! Спасибо👍
Новый уровень видео и уроков. Огонь
Спасибо за видео! Очень полезно
Курс просто пушка. Спасибо большое.
Большое спасибо! Первая часть была очень полезной, и вторая также пригодилась. Хочу сказать, что я уже перешёл на более высокий уровень. Я знаю и использую всю информацию из видео и сейчас активно изучаю материалы с других каналов. Однако мне больше нравится ваш стиль преподавания. Не могли бы вы создать продвинутый курс по React с использованием TypeScript? Все компании, в которых я проходил собеседования, требуют знание TypeScript и Next.js. Спасибо ещё раз!
Спасибо тебе за видео )
Ждем так же next 💥
Как всегда топ!!
По первым двум минутам понимаю, что годнота подъехала🔥
Снимай по next js, очень ждём!)
Tailwind css тоже нужно освежить, я считаю)
Полный курс по NextJS.
Заранее спасибо!
курс имба по сравнению с прошлым(но и прошлый тоже кайф)✨✨✨✨
Видео огонь🔥
Макс, круто! Но хотелось бы "от и до" разбор теории + практика сразу на том каком-то интересном приложении. Ждем Next.js!!!
Четко , спасибо
Ты крутой! Спасибо за урок по моему любимому реакту! С удовольствием посмотрел бы урок по таилвинду + реакт
Красава , лучший ....спс
Макс, спасибо тебе большое. Долго ждал, никак не мог найти у других блогеров такой хорошо структурированный курс, тем более в бесплатном доступе. Спасибо!
Давай полный курс по TailwindCSS / NextJS! Классный подход к преподнесению материала. Все по делу и понятно. Спасибо
Скоро будет в новом формате
Го полный курс по NextJS! Удачи!
Топ, Макс, будет ли что-то по бэку? И что посоветуешь выбрать Express или Nest ?
Пока точно нет. Начать с express потом в нест, там же экспресс под капотом
Спасибо 😇
Хорошо обьсняешь даже теория не скучна красава
Спасибо огромное за урок, очень информативно и лаконично! Единственное, имела сложность на практической части. Если следовать чисто по уроку, приходится один и тот же код переделывать несколько раз. Возможно, я ошиблась и стоило просмотреть всю практику, а уже потом приступать к работе; но, как по мне, было бы гораздо удобнее иметь более последовательный пример, чтоб, смотря видео, писать код одновременно с вами. Еще раз спасибо за ваш труд.
Будем стараться делать лучше. ❤️
Класс 👍. Давай курс по tailwind и next .js
Огонь как раз нужен был такой курс, тока начинаю изучать реакт🔥 спасибо большое!
Вот тока один вопрос, стоит ли просмотреть предыдущий ваш курс по реакту перед этим?
Думаю нет
Спасибо 👍
комментарий в поддержку канала) 🎉🎉
Tailwind тоже ждем!!! Очень крутой инструмент!
Хотелось бы видеть курс по React на более продвинутом уровне
Поддержите
А чего не хватило? Как мне кажется дальше уже next js идет
@@REDGroup у тебя в родмапе вроде больше перед некстом
Спасибо больше ❤❤
Давай полный курс по tailwind
Класс!
Сделайте, пожалуйста урок по ReactFlow. Очень актуально нынче. По этой библиотеке нет нормальных видосов.
самый хорошый канал по веб разработки 💪🏻👍🏻
Спасибо
видос пушка хоть я знаю реакт все равно интресно повторить что то узнать новое)
Если что во vue можно использовать подобное
Да, tailwind курс нужно обновить, next было бы ниплохо. И может короткое видео сделать про обновлённый react-query (разбора 5 версии на канале вроде как не было)
Давай по NEXT JS!!!
Потратил 20 мин на поиск инфы по тому как при вводе «code» в консоли открыть VS Code, а ты через минуту после этого сказал как 🙃 Спасибо за видос !
пишу коммент в поддержку и продвижение канала 💪💪💪
Макс, сделай, пожалуйста, полный курс по Next.js🔥
Сразу видно что человек с огромным
опытом и знаниями, можете дать совет для меня(новичка) про этапы изучения фронтенд и т.д
есть видео на его канале от нуля до миддл все технологии и уровни
Красава !!!!!!
Привет, давай курс по Next 14
сделай Курс по тайлвинд, пожалуйста ;) Очень крутой контент, спасибо!
Про мемоизацию можно и про react fiber поизучать например когда мы можем давать элементам аттрибут key
Хорошая новость, будем смотреть
Ждем обновление по nextjs и tailwind :)
Видео о красоте кода
@REDGroup Что за приложение на маке по раздвоению экранов?
Amethyst
Макс, даешь react hook form!!!
Только вчера закончил повтор реакта по тому курсу, а тут новый подъехал😅
Приятного просмотра
Огонь
Ждём курса по Next
Правильно ли я понимаю что команда 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. Да и прописывание этой команды было только для примера?
Да, для виндовс есть аналоги. Это команда для удаления папки
Было бы круто верстать какой то проект и по ходу дела узнавать о фишках фреймворка. По типу видео Nuxt Dashboard
go next js!!!
Полный курс по next пожалуйста Макс
👍🏿 красава
Next.js Compiler интересует, а именно, как настроить styledComponents
В качестве пожелания! может вы снимите курс реакта на маленьких приложениях для начинающих где будут использоваться и рассмотрены случаи применения того или иного хука или функционала. Т.е каждый тайм код тема. Может на маленьком приложении будет рассмотрена или несколько тем.
В конце была практика или это сложно показалось?
@@REDGroup Я не поняла видимо что в конце ещё что то есть. Но все в одном месте и не понимаю когда и что лучше применить. А на отдельных приложениях было бы понятнее (по мне).
Tailwind - полезный инструмент, замечаю что опытные разработчики часто его используют, в обучение уж точно или чтобы быстро наброски проекта накидать, было бы здорово иметь полный справочник по свойствам. Спасибо за курс, с минимальным количеством теории всё-таки материал лучше усваивается чем без неё, как мне кажется.
Будем еще улучшать сценарную часть, да и звук мне не до конца нравится. Я перфекционист в плане контента и важны вылизать до идеала
Про стэйт менеджер можно снять про Effector
Здрасте Макс, если будешь делать по нексту, сдлеай пожалуйста показательный пример реализации themeBackground darkMode с ипользованием localStorage нативно, без всяких tailwind и прочишь готовых пакетов, будет здоровно, ибо на серверсайд нельзя использовать локальстор, а на клиенте всплывает перерендер баг, кнопки или темы. Возможно я уже подтяну знания и решу эту фичу, как выйдет ролик, но все же. Будет здоровно. За ранее спасибо и спасибо за это
Здравствуйте, Макс! Надеюсь вы увидите мой комментарий и он не останется без ответа)
Во первых хочу чертовски сильно вас поблагодарить за ваш труд. Весь этот обучающий контент это просто кладись информации. Благодаря вам (и еще парочки блогеров) я смог с 0 трудоустроиться и перехать со своего города. На данный момент фронтендер... Однако благодаря вашим роликам смог изучить бекенд разработку (на nest), я уже довольно уверенно себя чувствую в беке, однако хочется расти дальше. Изучить например редис, когда его нужно применять, rabbit и многое многое из продвинутого. Хотел у вас спросить, есть ли у вас такие курсы, может планируете их снять? Может вы можете порекомедовать какие нибудь?
Заранее спасибо за ответ!
Спасибо за теплые слова. Пока в планах нет
А может можете порекомендовать какие нибудь курсы которые знаете сами?
@@REDGroup
@books414 Уже давно не видел продвинутых курсов в нашей сфере. Рекомендовать нечего
Хорошо, понял, спасибо@@REDGroup
Давай полный курс по Tailwind
Давай курсы по Tailwind и NextJs 14
Когда ты работаешь в Next.js, нет ошибок, всё нормально работает, а потом, когда обновляешь страницу, у тебя выходит ошибка. Почему?
Я думаю, нужно добавить к Next.js работу с React Query + SSR
Возможно можно было еще вынести все состояние текса и setText в отдельный контекс и обернуть все приложения, мб ошибаюсь и вообще не нужно и потом превью вынести в компонент отдельный с использованием контекста. Может быть супер бред.
Давай полный курс по NextJS Уже 2000 лайков эсть
Мы планируем новый формат курса, поэтому задержка
ураа
Давай курс по NEXT и Tailwind!
Давай курс по tailwind
Проста топ
а почему у тебя цвета button и div различаются в dark modern, у меня например все синие
У меня стоит расширение color tag как то так называется
@@REDGroupСпасибо)
Давай полный курс по Redux
Пожалуйста
сами разработчики говорят, что б сразу redux toolkit изучали
redux забыть хотят
я так и не понял, зачем он установил сначала typescript + swc, и после этого он говорит ставить эту вариацию, но после этого удаляет папку и уже установлено javascript + swc. Как это понимать ?
Потому что сначала хотел тс потом понял что новичкам будет сложно и поставил js версию
@@REDGroup понял. Спасибо.
Где-то же был проект магазина на реакт, он актуален?
Да, только там nextjs
Привет Макс
сейчас реакт 19 выходит
опять снова пилить курс :)
Там ничего нового, можете тайм код глянуть
некст ждем
во vue можно использовать одинарные теги