ПОЛНЫЙ КУРС REACT JS для начинающих - Изучи Реакт за 2 часа с нуля!
Рет қаралды 48,779
Күн бұрын🔥 Оформить премиум подписку - 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
@REDGroup 3 ай бұрын
🔥 Оформить премиум подписку - htmllessons.ru/premium Поддержи видео лайком, 2000 лайков 👍 и я делаю полный курс по Next js 2024! Скачать 🖥 папку проекта - t.me/redgroupchannel
@user-ug2dm3cj5q 10 күн бұрын
У меня npm не является встроенной командой
@REDGroup 10 күн бұрын
Установите nodejs
@user-ug2dm3cj5q 10 күн бұрын
Версию 22.0.2 (Current), for Windows и using fnm? Или что using?
@Farruh_13 3 ай бұрын
Давай полный курс по NextJS
@hetsowf 3 ай бұрын
+
@user-fc5wz3up3w 3 ай бұрын
+
@xvmmxv8049 3 ай бұрын
+
@timurimbalance 3 ай бұрын
Согласен!!!
@Rais_Dev 3 ай бұрын
+
@exelione2229 2 ай бұрын
Прям то что мне нужно на данном этапе. Нахватался всего, а по полочкам разложить не могу. Спасибо!
@selfishhsifles4536 3 ай бұрын
Фишка с теорией очень понравилось, благодаря тому что ты её не любишь ты все доносишь максимально доходчиво и круто
@OlegGuitar 2 ай бұрын
спасибо за видео! ждем курс по tailwind и next!)
@MrMakob 3 ай бұрын
как раз понадобилось (буквально два часа назад) повторить базу по реакту! и тут видео! спасибо!!!!
@user-hp6qz3ui9e 3 ай бұрын
Спасибо огромное за качественный, актуальный контент и классную,подачу)
@user-nb7sk4go9e Ай бұрын
Очень быстрый курс, четко и без воды! Ни разу не перемотал вперед, все в быстром темпе!
@mquix_x 2 ай бұрын
Ждем полный курс по Next JS и TWcss
@markwellofficial 2 ай бұрын
++
@s1de638 2 ай бұрын
+
@ulugbekeshnazarovuz 3 ай бұрын
Брат, пожалуйста, не останавливайся, награда за знания, которые ты передаешь, велика.
@alexcomp5030 3 ай бұрын
Огонь! Спасибо большое, очень полезно!
@Djarvic 3 ай бұрын
Спасибо за такой ролик. Сам изучаю React будет полезно.
@devcodingitstudio2764 3 ай бұрын
Топчик ролик. На новой клаве повысилась продуктивность у меня, тоже топ
@veniaminsamoylov1617 3 күн бұрын
Макс ты молодец. Так быстро проговорить лекции причем все по делу и без воды. 2 с половиной часа!!! Материал очень был полезен. Отдельное спасибо за тайм коды. Но ты терминатор :) как так можно выдержать. Удачи тебе и здоровья.
@angelguard8534 3 ай бұрын
Просто супер! Ждал этого 1000 лет!)
@TamikMachine 3 ай бұрын
Прям именно то, что нужно было💯
@user-zp1go5wr5h 2 ай бұрын
Этот курс мне понятнее чем первый по реакту, спасибо!
@igorminaev2832 3 ай бұрын
Спасибо за видео, информация очень полезная
@niktop7172 2 ай бұрын
Новый уровень видео и уроков. Огонь
@user-pj8lq9ws7x Ай бұрын
Курс просто пушка. Спасибо большое.
@sailoks8411 2 ай бұрын
Спасибо за видео! Очень полезно
@user-oh9vr9bw8j 3 ай бұрын
Макс, спасибо тебе большое. Долго ждал, никак не мог найти у других блогеров такой хорошо структурированный курс, тем более в бесплатном доступе. Спасибо!
@user-nw4io5hb4b 3 ай бұрын
Большое спасибо! Первая часть была очень полезной, и вторая также пригодилась. Хочу сказать, что я уже перешёл на более высокий уровень. Я знаю и использую всю информацию из видео и сейчас активно изучаю материалы с других каналов. Однако мне больше нравится ваш стиль преподавания. Не могли бы вы создать продвинутый курс по React с использованием TypeScript? Все компании, в которых я проходил собеседования, требуют знание TypeScript и Next.js. Спасибо ещё раз!
@user-iw2ne1ek2u 3 ай бұрын
Ждем так же next 💥
@Cherry.Blossom.11 2 ай бұрын
Ты крутой! Спасибо за урок по моему любимому реакту! С удовольствием посмотрел бы урок по таилвинду + реакт
@LenaFelica_songwriter 2 ай бұрын
Супер! Спасибо👍
@user-dg7ri8yr7s 3 ай бұрын
курс имба по сравнению с прошлым(но и прошлый тоже кайф)✨✨✨✨
@s1de638 2 ай бұрын
Снимай по next js, очень ждём!) Tailwind css тоже нужно освежить, я считаю)
@johna6436 2 ай бұрын
Полный курс по NextJS. Заранее спасибо!
@user-oo2xh6mb5w 5 күн бұрын
По первым двум минутам понимаю, что годнота подъехала🔥
@yuryshuller2650 2 ай бұрын
Спасибо тебе за видео )
@marinamey4364 2 ай бұрын
Макс, круто! Но хотелось бы "от и до" разбор теории + практика сразу на том каком-то интересном приложении. Ждем Next.js!!!
@komilovsg 2 ай бұрын
Давай полный курс по TailwindCSS / NextJS! Классный подход к преподнесению материала. Все по делу и понятно. Спасибо
@REDGroup 2 ай бұрын
Скоро будет в новом формате
@user-bg7oy2ux3s 3 ай бұрын
Хорошо обьсняешь даже теория не скучна красава
@dowranorazow6584 3 ай бұрын
Го полный курс по NextJS! Удачи!
@ZhdanParfenov 2 ай бұрын
Класс! Сделайте, пожалуйста урок по ReactFlow. Очень актуально нынче. По этой библиотеке нет нормальных видосов.
@user-nf5uj8um6m Ай бұрын
видос пушка хоть я знаю реакт все равно интресно повторить что то узнать новое)
@LoadinG093309 2 ай бұрын
Как всегда топ!!
@user-jy1je5hh3n 2 ай бұрын
Класс 👍. Давай курс по tailwind и next .js
@klemen__tina 26 күн бұрын
Спасибо огромное за урок, очень информативно и лаконично! Единственное, имела сложность на практической части. Если следовать чисто по уроку, приходится один и тот же код переделывать несколько раз. Возможно, я ошиблась и стоило просмотреть всю практику, а уже потом приступать к работе; но, как по мне, было бы гораздо удобнее иметь более последовательный пример, чтоб, смотря видео, писать код одновременно с вами. Еще раз спасибо за ваш труд.
@REDGroup 26 күн бұрын
Будем стараться делать лучше. ❤️
@marinamey4364 2 ай бұрын
Tailwind тоже ждем!!! Очень крутой инструмент!
@user-wl2xp8yo6x 2 ай бұрын
Про мемоизацию можно и про react fiber поизучать например когда мы можем давать элементам аттрибут key
@user-fv6uf8gt2r 3 ай бұрын
комментарий в поддержку канала) 🎉🎉
@NATURI_PUBGM 2 ай бұрын
самый хорошый канал по веб разработки 💪🏻👍🏻
@REDGroup 2 ай бұрын
Спасибо
@mrfir7806 3 ай бұрын
Если что во vue можно использовать подобное
@black.company9057 2 ай бұрын
Потратил 20 мин на поиск инфы по тому как при вводе «code» в консоли открыть VS Code, а ты через минуту после этого сказал как 🙃 Спасибо за видос !
@xvmmxv8049 3 ай бұрын
Красава , лучший ....спс
@user-hz3tr9bu1h 3 ай бұрын
Видео огонь🔥
@realityisback2417 2 ай бұрын
Четко , спасибо
@romanov_evgeny 2 ай бұрын
Макс, сделай, пожалуйста, полный курс по Next.js🔥
@shield7143 2 ай бұрын
Давай полный курс по tailwind
@marpusik1277 2 ай бұрын
Спасибо 😇
@ruslanismagilov9996 2 ай бұрын
сделай Курс по тайлвинд, пожалуйста ;) Очень крутой контент, спасибо!
@shba_shorts 2 ай бұрын
Сразу видно что человек с огромным опытом и знаниями, можете дать совет для меня(новичка) про этапы изучения фронтенд и т.д
@user-no6il5pi8n 2 ай бұрын
есть видео на его канале от нуля до миддл все технологии и уровни
@user-wt5cr7xr1r 2 ай бұрын
Да, tailwind курс нужно обновить, next было бы ниплохо. И может короткое видео сделать про обновлённый react-query (разбора 5 версии на канале вроде как не было)
@aleksandrholoven2412 3 ай бұрын
Привет, давай курс по Next 14
@bashkort_erete 3 ай бұрын
пишу коммент в поддержку и продвижение канала 💪💪💪
@Artem-dev-VAA 3 ай бұрын
Спасибо больше ❤❤
@mquix_x 2 ай бұрын
Хотелось бы видеть курс по React на более продвинутом уровне
@repaprika 2 ай бұрын
Поддержите
@REDGroup 2 ай бұрын
А чего не хватило? Как мне кажется дальше уже next js идет
@user-no6il5pi8n 2 ай бұрын
@@REDGroup у тебя в родмапе вроде больше перед некстом
@Xtemple135 3 ай бұрын
Только вчера закончил повтор реакта по тому курсу, а тут новый подъехал😅
@REDGroup 3 ай бұрын
Приятного просмотра
@ligh7fun 3 ай бұрын
Ждем обновление по nextjs и tailwind :)
@user-xs8bz6nl3y 2 ай бұрын
Видео о красоте кода
@dimalukashenko4865 2 ай бұрын
Хорошая новость, будем смотреть
@mage4087 2 ай бұрын
Давай по NEXT JS!!!
@IvanovJeniaIT 2 ай бұрын
Про стэйт менеджер можно снять про Effector
@igorprotsenko2320 2 ай бұрын
Tailwind - полезный инструмент, замечаю что опытные разработчики часто его используют, в обучение уж точно или чтобы быстро наброски проекта накидать, было бы здорово иметь полный справочник по свойствам. Спасибо за курс, с минимальным количеством теории всё-таки материал лучше усваивается чем без неё, как мне кажется.
@REDGroup 2 ай бұрын
Будем еще улучшать сценарную часть, да и звук мне не до конца нравится. Я перфекционист в плане контента и важны вылизать до идеала
@Choco1atePuma 27 күн бұрын
Было бы круто верстать какой то проект и по ходу дела узнавать о фишках фреймворка. По типу видео Nuxt Dashboard
@MrXperince 2 ай бұрын
Макс, даешь react hook form!!!
@alexms8508 3 ай бұрын
Красава !!!!!!
@ruslangilyazov7733 2 ай бұрын
В качестве пожелания! может вы снимите курс реакта на маленьких приложениях для начинающих где будут использоваться и рассмотрены случаи применения того или иного хука или функционала. Т.е каждый тайм код тема. Может на маленьком приложении будет рассмотрена или несколько тем.
@REDGroup 2 ай бұрын
В конце была практика или это сложно показалось?
@ruslangilyazov7733 2 ай бұрын
@@REDGroup Я не поняла видимо что в конце ещё что то есть. Но все в одном месте и не понимаю когда и что лучше применить. А на отдельных приложениях было бы понятнее (по мне).
@kindoir4705 2 ай бұрын
go next js!!!
@user-rd4os8oe2t 2 ай бұрын
Давай курсы по Tailwind и NextJs 14
@user-iw7wr5yk1d 2 ай бұрын
Полный курс по next пожалуйста Макс
@Javohir-uj8sf 2 ай бұрын
Давай полный курс по Tailwind
@user-ow8bi4ut4k 3 ай бұрын
Огонь как раз нужен был такой курс, тока начинаю изучать реакт🔥 спасибо большое! Вот тока один вопрос, стоит ли просмотреть предыдущий ваш курс по реакту перед этим?
@REDGroup 3 ай бұрын
Думаю нет
@user-ow8bi4ut4k 3 ай бұрын
Спасибо 👍
@user-pj9mp5vd6n 2 ай бұрын
Топ, Макс, будет ли что-то по бэку? И что посоветуешь выбрать Express или Nest ?
@REDGroup 2 ай бұрын
Пока точно нет. Начать с express потом в нест, там же экспресс под капотом
@Parsefal_T Ай бұрын
Здрасте Макс, если будешь делать по нексту, сдлеай пожалуйста показательный пример реализации themeBackground darkMode с ипользованием localStorage нативно, без всяких tailwind и прочишь готовых пакетов, будет здоровно, ибо на серверсайд нельзя использовать локальстор, а на клиенте всплывает перерендер баг, кнопки или темы. Возможно я уже подтяну знания и решу эту фичу, как выйдет ролик, но все же. Будет здоровно. За ранее спасибо и спасибо за это
@raloynner9385 2 ай бұрын
Next.js Compiler интересует, а именно, как настроить styledComponents
@MacChickenBodyMaffin 2 ай бұрын
@REDGroup Что за приложение на маке по раздвоению экранов?
@REDGroup 2 ай бұрын
Amethyst
@Rocky_3883 2 ай бұрын
Ждём курса по Next
@hazanant9722 3 ай бұрын
Я думаю, нужно добавить к Next.js работу с React Query + SSR
@ArmTool 2 ай бұрын
Давай курс по NEXT и Tailwind!
@aliicomua1369 2 ай бұрын
Давай курс по tailwind
@user-ub1mz5ok1r 2 ай бұрын
Правильно ли я понимаю что команда 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. Да и прописывание этой команды было только для примера?
@REDGroup 2 ай бұрын
Да, для виндовс есть аналоги. Это команда для удаления папки
@user-cu7kv6re6m Ай бұрын
Огонь
@polwmail 2 ай бұрын
👍🏿 красава
@elmanmammadov1877 2 ай бұрын
Давай полный курс по NextJS Уже 2000 лайков эсть
@REDGroup 2 ай бұрын
Мы планируем новый формат курса, поэтому задержка
@diyar3604 3 ай бұрын
Давай полный курс по Redux Пожалуйста
@bashkort_erete 3 ай бұрын
сами разработчики говорят, что б сразу redux toolkit изучали redux забыть хотят
@why........................... 3 ай бұрын
ураа
@joxa_muxa 2 ай бұрын
Когда ты работаешь в Next.js, нет ошибок, всё нормально работает, а потом, когда обновляешь страницу, у тебя выходит ошибка. Почему?
@sattorerror 3 ай бұрын
во vue можно использовать одинарные теги
@AlexanderSavchenko91 2 ай бұрын
сейчас реакт 19 выходит опять снова пилить курс :)
@REDGroup 2 ай бұрын
Там ничего нового, можете тайм код глянуть
@books414 2 ай бұрын
Здравствуйте, Макс! Надеюсь вы увидите мой комментарий и он не останется без ответа) Во первых хочу чертовски сильно вас поблагодарить за ваш труд. Весь этот обучающий контент это просто кладись информации. Благодаря вам (и еще парочки блогеров) я смог с 0 трудоустроиться и перехать со своего города. На данный момент фронтендер... Однако благодаря вашим роликам смог изучить бекенд разработку (на nest), я уже довольно уверенно себя чувствую в беке, однако хочется расти дальше. Изучить например редис, когда его нужно применять, rabbit и многое многое из продвинутого. Хотел у вас спросить, есть ли у вас такие курсы, может планируете их снять? Может вы можете порекомедовать какие нибудь? Заранее спасибо за ответ!
@REDGroup 2 ай бұрын
Спасибо за теплые слова. Пока в планах нет
@books414 2 ай бұрын
А может можете порекомендовать какие нибудь курсы которые знаете сами? @@REDGroup
@REDGroup 2 ай бұрын
@books414 Уже давно не видел продвинутых курсов в нашей сфере. Рекомендовать нечего
@books414 2 ай бұрын
Хорошо, понял, спасибо@@REDGroup
@dear_up 3 ай бұрын
Привет Макс
@user-ow1cx9xc9g 3 ай бұрын
Проста топ
@maarutan 2 ай бұрын
некст ждем
@jantttez Күн бұрын
Возможно можно было еще вынести все состояние текса и setText в отдельный контекс и обернуть все приложения, мб ошибаюсь и вообще не нужно и потом превью вынести в компонент отдельный с использованием контекста. Может быть супер бред.
@user-hz3tr9bu1h 3 ай бұрын
Где-то же был проект магазина на реакт, он актуален?
@REDGroup 3 ай бұрын
Да, только там nextjs
@alone-xu2bo Ай бұрын
как называет пакет иконок для vs code?
@REDGroup Ай бұрын
В описании
@initialmoment7416 28 күн бұрын
я так и не понял, зачем он установил сначала typescript + swc, и после этого он говорит ставить эту вариацию, но после этого удаляет папку и уже установлено javascript + swc. Как это понимать ?
@REDGroup 28 күн бұрын
Потому что сначала хотел тс потом понял что новичкам будет сложно и поставил js версию
@initialmoment7416 28 күн бұрын
@@REDGroup понял. Спасибо.
BalcevMMA_BOXING
Рет қаралды 8 МЛН
RED Group
Рет қаралды 15 М.
АйТи Синяк
Рет қаралды 12 М.