🫶🏻 Ранний доступ к плейлисту, тренажёры, экзамены и конспекты на нашей платформе: 🔗 https://it-incubator.io/react/ru ℹ️ Сегодня в бесплатном доступе нет ни одного полноценного курса по ReactJS, который помог бы понять, как построить большое фронтенд-приложение на React. При этом важно не столько пройти курс по React сам по себе (если мы хотим подготовить специалиста к работе), сколько видеть цельную картину: - как работает фронтенд-приложение - какие алгоритмы и структуры данных используются - по каким архитектурным принципам строятся современные React-фронтенд-приложения - о каких аспектах безопасности мы должны думать - как подружить наше приложение с CI/CD - что такое SSR - что такое BFF - какие протоколы коммуникации мы можем использовать: Http, RestAPI, WebSocket, GraphQL - для чего нам фундаментально нужен менеджер состояния (State Manager) - на каких принципах строятся все State Manager-ы Существует много разрозненных небольших курсов по всем этим аспектам, но 🍼 молодому фронтенд-инженеру сложно выстроить цельный роадмап ➬ и не сойти с ума 🤯 от бесконечного множества терминов и инструментов. Отдельные курсы по разным темам работают хорошо для уже сформированных профессионалов. Большинство курсов по React затрагивают эти темы «по верхам»: - теория справочного характера, мало практики из реальной жизни. Я решил записать свои уроки по React — подробные и практические! Практика-практика-практика + много объяснений. Очень много объяснений — не только о том, как работает React и какой API он предоставляет, но и о том, как React устроен внутри, почему он работает именно так и какую «внутрянку» React'а важно знать прикладному разработчику, чтобы писать эффективные SPA-фронтенд-приложения на уровне не самоучки-кодера, а глубокого, квалифицированного фронтенд-инженера ⚙️ 👩🏻💻 В рамках этого плейлиста мы вместе сделаем большой проект Musicfun 🎹 — музыкальный плеер с большим количеством функций. Мы глубоко разберём работу с - роутингом и управлением состоянием, - поймём, что такое асинхронный state management, - будем работать с REST API, GraphQL, WebSocket, - OAuth2-авторизацией, - поработаем с графиками, картами и оптимизациями. Мы рассмотрим не простые маленькие примеры, а разработаем от начала и до конца (а у ПО бывает конец разработки? 🤔) большой каталог музыки — аналог/клон Spotify, iTunes, SoundCloud. При этом в рамках бесплатного курса я буду не просто писать код, а подробно объяснять, что происходит, рассказывая про концепции и архитектурные принципы, на которых базируются такие библиотеки, как React Router, React Hook Form, TanStack Query, Redux и другие. Это не просто уроки, не просто курс ReactJS — это твой путеводитель к трудоустройству 🥇! Пройди этот практический курс, проделай всё шаг за шагом, осмысли материал, проговаривай со мной концепции и термины — и тебя с радостью возьмёт на работу любой работодатель 🫰 Всех обнял. Удачи 🍀
Curated by: IT-KAMASUTRA (32 videos)
🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT —INCUBATOR: 🎨 Front-end https://it-incubator.io/front-end/?utm_source=youtube&utm_medium=it-k&utm_campaign=education&utm_content=rsw ⚙ Back-end https://it-incubator.io/back-end/?utm_source=youtube&utm_medium=it-k&utm_campaign=education&utm_content=rsw 💬 Тренировка React-собеседований: https://it-incubator.io/prosobesim?s=D1E725 💰 Карьерный бустер\стажировка https://it-incubator.io/education/career-booster/?utm_source=youtube&utm_medium=it-k&utm_campaign=education&utm_content=rsw 🥋 Тренажёры курса: https://it-incubator.io/react/ru/react-samurai-way/free-course?s=D1E725 📚 Конспект урока: https://it-incubator.io/react/ru/react-samurai-way/free-course/24-hooks-as-state-management?s=D1E725 🚒 Комната на help2debug: https://help2debug.com/rooms/4 🪭 Плейлист на youtube: https://www.youtube.com/playlist?list=PLcvhF2Wqh7DOWFSdPX9OaakTOSlfOm0BR Топ 5 книг для программиста https://youtu.be/IeODSXm4s_E Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: https://www.youtube.com/channel/UCTW0FUhT0m-Bqg2trTbSs0g/join Поддержать меня можно на: Patreon https://www.patreon.com/itkamasutra Boosty https://boosty.to/itkamasutra Поддержать проект монеткой: https://social-network.samuraijs.com А здесь бесплатная взаимопомощь: https://t.me/reactjs_samurai * Мы в соц. сетях: https://vk.com/itkamasutra https://instagram.com/it.incubator https://telegram.me/itkamasutra * Мои личные VK и Inst: https://vk.com/d.kuzyuberdin https://www.instagram.com/dmitry.kuzyuberdin/ 0:00 — введение, тема видео 2:52 — intro 3:03 — архитектура фронтенд-приложения 8:08 — пример, повтор знаний через анализ базового приложения 11:24 — задача 11:56 — api 13:00 — анализ кода с точки зрения business logic (bll) 14:18 — кастомный хук useTracks, перенос логики из компонента в bll 20:58 — преимущества выноса бизнес-логики в отдельные кастомные хуки 22:35 — промежуточный итог 23:57 — файловая структура 25:54 — доработка приложения (refresh) 32:03 — пример 2: counter 34:39 — кастомный хук useCounter 41:23 — реализация бизнес требования 46:08 — доработка кастомного хука 48:28 — musicfun: бизнес логика (bll) в приложении 49:37 — TrackList.tsx 52:05 — MainPage.tsx 55:46 — TrackDetail.tsx 58:12 — summary 1:00:41 — заключение