Дорожная карта для изучения React в 2023 году.

Одна из самых больших проблем, с которой сталкиваются все frontend-разработчики (которые не используют React) – это создание адаптивного приложения со сложным пользовательским интерфейсом при сохранении быстрого времени загрузки и высокой производительности. Интерфейс – это то, что привлекает внимание пользователей и повышает популярность вашего сайта. Веб-сайт, который работает медленно и требует много времени для загрузки, чаще всего будет никому не нужен. В этом отношении React является бестселлером для разработчиков, поскольку он обеспечивает легкое создание красивых интерфейсов и позволяет хорошо оптимизировать производительность приложений.

Хотя это звучит очень круто, изучение новой технологии может оказаться пугающей перспективой. Взвешенный подход в обучении может быть чрезвычайно полезен при освоении новых навыков и поможет вам эффективно выучить необходимые технологии.

@react_tg – телеграм канал для изучения React с нуля до профи.

Прежде чем мы начнём, давайте посмотрим на содержание этой статьи:

1. Введение в React
2. React vs другие фреймворки
3. Необходимые навыки
4. Полезные советы для изучения
5. Процесс онлайн-обучения
6. RoadMap для изучения React
7. Почему следует изучать React?
8. Проблемы во время обучения
9. Заключение

Введение в React

React – это мощная библиотека JavaScript, созданная Facebook. Это инструмент с открытым исходным кодом и библиотекой пользовательского интерфейса на основе компонентов.

Все элементы, которые мы видим на веб-сайте, построенном на React, состоят из нескольких подкомпонентов, например, кнопок, боковых меню, панели навигации, верхних и нижних колонтитулов, абзацев и т.д.

Чтобы узнать больше о компонентах и других функциях, рекомендуем ознакомиться с официальной документацией.

React vs другие фреймворки

Сравнение React с другими фреймворками для frontend-разработки на JS:

Angular 

Angular – это фреймворк разработки приложений (не библиотека JS), основанный на TypeScript с открытым исходным кодом. Фреймворк поддерживается и управляется командой Angular в Google и может быть использована для создания эффективных одностраничных приложений (SPA) для предприятий.

Плюсы

• На Angular легко создавать одностраничные приложения
• Создание прототипов, разработка и тестирование становятся быстрее
• Он поддерживает двустороннюю привязку данных
• Манипуляции с DOM просты, и, следовательно, нагрузка на сервер сведена к минимуму
• Адаптивный веб-дизайн
• Последние версии Angular поддерживают TypeScript, что облегчает его изучение
• Хорошая поддержка сообщества

Минусы

• Сложно понять MVC для начинающих
• Некоторые функции трудны для понимания, например, внедрение зависимостей, сервисы и т.д.
• Плохой отклик при поисковой оптимизации

Официальная документация: Link. 

Vue.js 

Это фреймворк пользовательского интерфейса на основе JavaScript. Он используется для построения пользовательских интерфейсов и создания одностраничных приложений с помощью некоторых библиотек.

Плюсы

• Удивительно прост в использовании
• У него хорошая документация
• Он поддерживает манипулирование виртуальным DOM и двустороннюю привязку данных
• Модульное тестирование может быть эффективно выполнено
• Хорошая поддержка сообщества

Минусы

• Он не подходит для крупномасштабных проектов
• Ограниченные ресурсы
• Не очень популярен среди разработчиков

Официальная документация: Link.

Существуют и другие популярные фреймворки, но вот те аспекты, которые ставят React выше:

• Он основан на компонентах, и одни и те же компоненты могут быть использованы повторно
• Мы можем разбить весь пользовательский интерфейс на мельчайшие компоненты
• Он прост в использовании
• Односторонняя привязка данных
• Он использует виртуальный DOM, что означает меньшую нагрузку при рендеринге на стороне сервера
• Высокая производительность
• Хорошая документация

Но существуют и недостатки:

• JSX поначалу очень сбивает с толку
• Конфликты версий и новая документация
• Последующие обновления могут вызывать хаос и путаницу

Вот краткий анализ того, как возросла популярность React за последние годы:

Необходимые навыки

Прежде чем приступить к обучению React, у вас должны иметься следующие навыки:

• Знакомство с любым языком программирования
• Умение выполнять базовые операции со строками, массивами
• Знание ООП
• Основы HTML, CSS и JavaScript
• Интерес к освоению новых навыков

Полезные советы для изучения

Это те вещи, которые вы должны учитывать при овладении новым навыком:

• Знайте свои способности, объективно оценивайте себя
• Отслеживайте свой процесс обучения
• Создавайте временные рамки
• Пересматривайте и сосредотачивайтесь на слабых местах
• Обратитесь за помощью к экспертам
• Применяйте на практике всё, чему вы научились
• Учитесь, а не зубрите
• Тренируйся, тренируйся и еще раз тренируйся!
• Создавайте проекты
• Делитесь результатами своего обучения в LinkedIn, размещайте свои коды в репозиториях GitHub

Процесс online-обучения

Изучение новых навыков онлайн экономит много времени. Мы можем учиться в удобное для нас время и удобно управлять своим расписанием. Во время обучения онлайн:

• Выберите курс, основанный на ценностях и результатах
• Он должен включать проекты и техническую поддержку во время обучения
• Курс, который предлагает мини-сертификацию, более ценен
• Выделите определённое время для своих онлайн-занятий
• Придерживайтесь времени и практикуйтесь ежедневно
• Сосредоточьтесь на основных концепциях и в то же время развейте свои сомнения
• Ведите заметки и пересматривайте их
• Задавайте хорошие вопросы и избавьтесь от своих сомнений.

Вы можете посмотреть наш список из 1000 бесплатных курсов для всех уровней разработчиков и выбрать то, что вам по душе.

Вот еще несколько курсов, которые вы, возможно, захотите изучить:

Бесплатные:

• Codecademy
• Egghead
• Egghead
• Scrimba
• ui.Dev 

Платные:

• Egghead
• Frontendmasters
• Reacttraining
• Newline
• React for beginners

RoadMap для изучения React

1. Изучение основ Frontend-разработки

HTML: HTML расшифровывается как Язык Гипертекстовой Разметки и является стандартным языком разметки для создания веб-страниц. Мы используем различные теги для структурирования частей веб-страницы. Различные HTML-элементы сообщают браузеру, как содержимое должно отображаться в браузере.

Вы должны быть осведомлены о следующих вещах:

• Все основные теги, новые функции и поддержка в HTML5
• Как подключить CSS-файл
• Различные атрибуты
• Встраивание аудио, изображений и видео (медиа)

CSS: CSS расшифровывается как Каскадные Таблицы Стилей. Он используется для форматирования веб-страниц и в первую очередь фокусируется на внешнем виде элементов. Мы можем управлять стилями HTML-элементов с помощью CSS. Мы также можем изменить положение, макет, расположение HTML-элементов с помощью CSS.

Обязательно ознакомьтесь со следующими пунктами:

• Как подключить CSS-файлы
• Селекторы атрибутов
• Блочная модель

JavaScript: JS добавляет интерактивности и динамики в HTML-документ. Это язык сценариев на стороне клиента. Чтобы принимать входные данные от пользователей, проверять, отображать и т.д., мы используем JavaScript.

Ниже приведены важные моменты, которые следует учитывать:

• Функции
• Строки
• Управление массивом
• Циклы
• Взаимодействие с пользователем
• Отладка

2. Инструменты и программное обеспечение

GitHub: Это хостинг-сервис, который позволяет пользователям хранить свои исходные коды и управлять ими. Он предоставляет полезный графический интерфейс (User Interface) для управления вашими проектами. Мы также можем получить к нему доступ с помощью командной строки. Как только вы начнёте писать код и работать над проектами, вы должны использовать GitHub для управления своими исходными кодами. Он также обеспечивает командное сотрудничество.

Сосредоточьтесь на следующих важных моментах:

• Как создать репозиторий
• Размещение вашего кода на GitHub
• Ветвление
• Команды Git
• Командное сотрудничество
• Управление версиями

Редакторы кода

VS Code: Это мощный редактор исходного кода, используемый большинством разработчиков. Он предоставляет дополнительные расширения и инструменты разработки, которые оказываются чрезвычайно полезными при написании кода.

3. Системы управления пакетами

Npm или Yarn 

Это инструменты, используемые для управления пакетами и библиотеками. Вы можете выбрать менеджер пакетов по своему желанию.

Изучите команды командной строки, чтобы:

• создавать проекты
• устанавливать, удалять новые модули, пакеты
• обновлять версии

4. Углубленные концепции в разработке

ES6: Это расшифровывается как ECMAScript 6, причём ES6 является 6-й версией ECMAScript. ECMAScript был введён для стандартизации JavaScript и был опубликован в 2015 году. В связи с новыми выпусками, в предыдущих концепциях React произошли некоторые функциональные изменения.

• Управление состоянием: Это специальный метод, который React использует для манипулирования, обновления значений и данных, связанных с компонентами.
• Передача значений между компонентами: Обычно мы передаём данные от родителя к потомку с помощью реквизитов. Существуют альтернативные способы передачи данных с использованием Redux и Context API.

Это некоторые углубленные концепции, которые особенно важны:

• Состояние компонента/Контекстный API
• Redux
• Async/Await 
• Запросы API
• Promises
• Observable
• Helpers 
• Постоянная структура данных

5. Лучший стиль с использованием сторонних пакетов и плагинов

Вы можете изучить или добавить в свой проект следующие особенности и плагины:

• добавьте Bootstrap в свои приложения
• сделайте свою веб-страницу адаптивной в соответствии с различными размерами экрана
• примените Material Design в своих компонентах
• установите цвета по умолчанию для своих проектов – Цветовые палитры: первичные, вторичные, третичные цвета

6. Работа с API

• Извлечение данных из API
• Получение и отправление запросов
• Обработка promises и observables

7. Маршрутизация и навигация

• Загрузка других компонентов на той же странице
• Навигация между различными компонентами и представлениями

8. Тестирование

Тестирование является важной частью жизненного цикла разработки программного обеспечения. Тестирование позволяет выпустить ваш проект в свет таким, каким вы планировали изначально. Мы используем следующие ресурсы для тестирования компонентов React:

• Jest: Jest – это программа для тестирования JavaScript, которая позволяет вам получить доступ к DOM через jsdom.
• React Testing Library: это лёгкое решение для тестирования компонентов React.

Почему следует изучать React?

• Хорошая поддержка сообщества
• Потенциально-выдающаяся карьера
• Регулярные обновления и новые версии
• Огромная популярность
• Хороший доход
• Высокие требования на рынке
• Выбор новых разработчиков

Согласно средней зарплате разработчика React:

Проблемы во время обучения

Как и в случае, когда вы изучаете что-то новое, вы можете столкнуться с некоторыми трудностями в процессе обучения. Вы можете обратиться за помощью к нескольким сообществам, например, stackoverflow, quora и т.д., чтобы развеять ваши сомнения. Сосредоточьтесь на изучении следующих тем:

• Hooks и Redux 
• Promises 
• Data binding 
• Функциональные компоненты и компоненты, основанные на классах
• Жизненный цикл компонентов

Заключение

Технологии меняются с невероятной скоростью, и инновации в существующих структурах и рабочем процессе внедряются на регулярной основе. Чтобы адаптироваться к этим изменениям, важно также постоянно обновлять свои навыки. Поскольку некоторые концепции и их реализации могут быть устаревшими, всегда следуйте официальной документации, повышайте свою квалификацию и оставайтесь востребованными!