tgoop.com/reactify_IT/1486
Last Update:
👨💻 План развития Frontend Разработчика (Часть 3)
Ты уже освоил базу: HTML, CSS, JavaScript. Но в реальности никто не пишет проекты на чистом коде — это долго, сложно и неэффективно. Если ты написал что-то на чистом JS без фреймворков, то, грубо говоря, ты создал свой фреймворк. Другим разработчикам будет тяжело разобраться в твоём коде, а поддержка такого проекта превратится в ад.
Решение? Готовые фреймворки и библиотеки. Они дают структуру, правила и экосистему, упрощают разработку и делают код предсказуемым.
Среди популярных вариантов — Vue, Angular, Svelte, Solid, но мы остановимся на React. Почему? Потому что он мощный, гибкий и востребованный на рынке. Давай разберёмся, как его правильно учить.
React — это основной инструмент, с которым ты будешь работать. Если ты можешь сделать ToDo App, то это уже похоже на коммерческий код. Чем рабочий код отличается от пет-проектов? Объёмом, структурой, абстракциями, обёртками, разделением на модули.
Когда ты делаешь простое приложение (например, Кинотеатр), ты уже сталкиваешься с реальными кейсами:
- Работа с API
- Отрисовка данных
- Поиск и фильтрация
- Роутинг
- Управление состоянием
Сложность не в написании какого-то "особенного" кода, а в масштабе. Нужно учиться ориентироваться в больших проектах, понимать чужой код и писать поддерживаемый свой.
Для изучения React я предлагаю максимально подготовить свой мозг и пройти 2 курса по React, повторяя за автором и делая конспект:
→ React - Курс по React для Начинающих
https://www.youtube.com/watch?v=is3T0W0ouT0
→ Курс React с нуля
https://youtu.be/am_UiIvha5M?si=7io3qRZITckfH2zA
Далее проходим более подробный курс с дотошным объяснением базы от Димыча:
→ Todolist React JS
https://www.youtube.com/watch?v=pzs3a-d3kjM
После этого приступаем к практике и делаем приложение новостей с основными фичами фронтенда: Поиск, Фильтрация, Пагинация, Слайдер и т.д. Тут также произойдёт первое знакомство с TypeScript, Redux, Router, FSD:
→ React Новости
https://youtu.be/bD0UXb7kD_k?si=e5Y5Jkiwt_66U5Ug
Далее углубляем свои знания и смотрим, как создают большое приложение Pizza:
→ React Pizza v2
https://youtu.be/_UywBskWJ7Q?si=WN2kX8Eck9BW_OD3
Ещё больше практики, чтобы уже тошнило, а мозг окончательно привык к React:
→ Разработай 6 проектов на ReactJS
https://youtu.be/eS0GL73tkmw?si=2G36Y4n-bYI4hnT1
Изучаем базу роутинга и применяем сразу на практике
→ React Router 6
https://youtu.be/0auS9DNTmzE?si=GGuidPN1NpfvVAiw
На самом деле ТС очень сложный. Даже опытные разработчики не умеют решать сложные задачи. Проходим 2 курса в YouTube:
→ Полный курс TypeScript
https://www.youtube.com/watch?v=V7hBejCH1HI
→ TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС
https://youtu.be/LWtHl__oEWc?si=E3MJHqHHMM68NblJ
Если за 10 дней не освоили базис — всё равно идём дальше. Остальное натренируется в проектах. Сложные темы: дженерики, утилити-типы, защитники типов, маппинг — вы не поймёте их, пока не начнёте практиковаться в полном стеке. Нам нужна база, которая покрывает 80% рабочей нагрузки.
Тут так же как и в TypeScript. Redux имеет кучу инструментов. Но для того чтобы нам понять его - нужна практика. У многи новичков проблема с ним. Что нам нужно уметь: создавать слайсы, использовать данные в компонентах, использовать диспатч, делать запросы на сервер с санками или rtk query. Это база, которая уже позволит вам делать приложение. остальное изучаем уже на практике всего стека.
→ Полный курс Redux
https://www.youtube.com/watch?v=gPmYTqGPDWA
→ Redux Toolkit для управления
https://www.youtube.com/watch?v=C0fBnil_Im4
То же самое и с Redux. Хотя в нём много инструментов, главное — начать практиковаться. У многих новичков возникают сложности. Базовые навыки, которые нужно освоить: Создание слайсов, Использование данных в компонентах, Работа с диспатчем, Запросы к серверу (санки или RTK Query)
Этого достаточно для создания рабочих приложений. Остальное освоится в процессе работы с полным стеком.
#redux #roadmap #frontend #react #typescript