Что самое неприятное в начале изучения любой новой для вас технологии? Не то, что вы ничего не знаете. А то, что непонятно, как это «ничего» превратить в знания.
В интернете на любой вопрос есть куча курсов, статей, видео. Все говорят разное. Все предлагают учить по-разному, все ожидают разного уровня знания. Подобрать что-то подходящее — задачка посложнее, чем выучить самостоятельно. Бывало ведь, что в вы открываете туториал, а там уже ждут, что вы знаете ES6, знаете как работает DOM, зачем нужна реактивность. А вы не знаете. Или знаете, но не уверены.
Поэтому начинать такое путешествие лучше самостоятельно. Примерно за месяц, при небольших ежедневных инвестициях времени можно освоить любую современную фронтендерскую библиотеку. Главное — следовать плану. РАссмотрим на примере React.
Месяц №0. До React
Важное отступление. Не стоит учить React с нуля. Хотелось бы, чтобы у вас уже было базовое понимание JavaScript, чтобы наслоение концепций не свело вас с ума. Потратьте какое-то время, чтобы разобраться в базовой технологии. Ведь в конце концов всё так или иначе сводится к ней.
Вот что нужно узнать о JS до того как браться за React:
- ES6+: стрелочные функции, деструктуризация, spread/rest, тернарники, шаблонные строки, импорты/экспорты.
- Массивы и объекты: map, filter, reduce, forEach.
- Асинхронность: Event Loop, промисы, async/await.
- DOM: как работают события, что такое document.querySelector, как навешивать обработчики событий на элементы.
Без этого дальше делать нечего. Но как только понимание появилось — переходим к React.
Как именно учить React
Я не советую учить React по курсам. Кажется, что метода лучше чем читать документацию и сразу пробовать еще не придумали. Поэтому вот три основных принципа, которые приблизят вас к цели.
- Документация React — лучшее, что есть по теме. Просто читайте её. Всё подряд.
- Проекты. Каждый день пишите код. Хотя бы по полчаса, но лучше часа по 2-3.
- Ошибки. Анализируйте возникающие ошибки. Так вы лучше поймете принципы React.
Подход прост, поэтому универсален и применим при изучении разных технологий.
Чего изучать не стоит
Обойдите стороной тулинг и элементы экосистемы. Почитаемые коммьюнити инструменты меняются каждый год. Принципы, на которых работает React — нет. Иначе говоря:
- Не учите Redux/MobX/Zustand. Сейчас вам это не нужно.
- Не учите Next.js. Когда понадобится — освоите за пару дней.
- Не учите TypeScript. Базово поймете за день, до уровня мастерства — за пару лет.
Все это нужно и полезно. Но не в первый месяц.
Неделя 1: Фундамент React
Первая неделя — самая важная. Здесь закладывается база. Если вы поймёте основные концепции, дальше всё пойдёт гораздо проще.
Что учить:
- Компоненты. Бывают функциональные и классовые. Функциональные сейчас стандарт, но классовые все равно встречаются. Важно понять, что компонент — это просто функция, которая возвращает JSX.
- JSX. Это HTML внутри JavaScript. Поймите, как вставлять динамические данные, как использовать условия и циклы внутри JSX.
- Пропсы. Как передавать данные в компоненты. Как делать компоненты переиспользуемыми.
- Состояние. Как хранить данные внутри компонента. Как менять состояние и заставлять компонент перерендериваться.
- Эффекты. Как делать запросы к API, как реагировать на изменения состояния.
На первой неделе просто пишите маленькие компоненты. Карточки, кнопки, формы. Без логики. Будет достаточно если они смогут просто отображать данные.
Неделя 2: Работа с данными и API
На второй неделе время закончить писать «статику» и начать работать с данными.
Что учить:
- Асинхронные запросы. Как получать данные с сервера. Как обрабатывать промисы внутри компонентов.
- useEffect для запросов. Как делать запросы при монтировании компонента.
- Обработка состояний загрузки. Показывать спиннер, пока данные грузятся. Показывать ошибку, если что-то пошло не так.
- Формы и обработка ввода. Как управлять полями ввода, как отправлять данные на сервер.
На этой неделе напишите простое приложение: получайте список пользователей из API, выводите его на экран, добавьте возможность добавлять и удалять их (локально).
Неделя 3: Маршрутизация и практика
На третьей неделе ваши приложения должны стать полнофункциональными.
Что учить:
- React Router. Единственное исключение в тулинге. Надо знать как делать навигацию между страницами в SPA. Как передавать параметры в URL.
- Глубокое понимание эффектов. Зависимости, очистка эффектов, предотвращение лишних запросов.
- Оптимизация. useMemo, useCallback, React.memo. На этом этапе я не углубляйтесь, но узнайте, что это существует и для чего используется. Почитайте про React Compiler, чтобы узнать как эти оптимизации он делает автоматические
- Контекст (Context API). Как передавать данные глубоко в дерево компонентов без пропсов.
На этой неделе попробуйте написать первое полноценное приложение: интернет-магазин. Список товаров, корзина, страница товара, оформление заказа. Без бекенда — все данные можно просто складывать в localStorage.
Неделя 4: Проект и собеседования
Последняя неделя потребует от вас минимальное количество технической работы.
Что делать:
- Соберите портфолио. Используйте сделанные проекты. Залейте их на гитхаб (если еще не сделали этого), «причешите» код, добавьте ридми
- Напишите резюме. Без воды. Конкретные технологии, конкретные проекты.
- Обновите профили на сайтах с вакансиями. Актуализируйте стек технологий, измените дополнительную информацию в резюме.
- Начинайте ходить на собеседования. Первые собеседования вы провалите. На них вы допустите ошибки. А ошибки в самом начале статьи мы договорились анализировать.
Главная мысль
Выучить React (да и почти что угодно) за месяц на базовом, достаточном для трудойстройства на начальную позицию, уровне — более чем реально.
Но только если у вас есть принципы, план и вы ему следуете.
Не распыляйтесь. Не прыгайте от одного курса к другому. Просто следуйте схеме:
- JavaScript (база) — неделя.
- React (компоненты, состояние, эффекты) — неделя.
- Работа с данными и API — неделя.
- Проект и собеседования — неделя.
Всё.
Желаю успехов!
