🫶🏻 Ранний доступ к плейлисту, тренажёры, экзамены и конспекты на нашей платформе: 🔗 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)
🤖 VibeCoder / SystemDesign / Fullstack марафон: https://docs.google.com/forms/d/1aAvJE5_IjPUNJyyOfTrcelP-9SgP_jRTmw3dxBGd8PM/edit 🛜 Курс по DevOps для Front-end разрабов https://it-incubator.io/education/devops-for-developers 🎨 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 💰 Карьерный бустер\стажировка https://it-incubator.io/education/career-booster/?utm_source=youtube&utm_medium=it-k&utm_campaign=education&utm_content=rsw Топ 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/ 00:00 — Интро, мотивация, философия 03:22 — Принцип работы React Router: URL и рендеринг компонентов 04:20 — Жизненный цикл Single Page Application (SPA) 06:20 — Создание проекта и установка React Router (используем pnpm) 08:10 — Режимы работы React Router: Декларативный режим 09:22 — Настройка BrowserRouter и обертка приложения 10:45 — Конфигурация путей: Компоненты Routes и Route 14:48 — Как React понимает, какой компонент отрисовать 17:00 — Разница между React-элементом и рендером компонента 25:29 — Навигация: Почему нельзя использовать обычные ссылки a 26:44 — Компоненты Link и NavLink, переходы без перезагрузки 32:34 — Стилизация активных ссылок через NavLink и класс active 35:48 — Динамические пути и параметры, URL Params 39:40 — Как считывать параметры с помощью хука useParams 44:18 — Фундаментальные основы, Монтирование и Демонтирование компонентов 51:00 — Использование useEffect для отслеживания жизненного цикла 01:00:11 — Важность фундаментальных знаний для Software Engineer 01:01:40 — Анонс нового курса по Full Stack инженерии 01:06:05 — О планах развития канала и конспектах