Изучение ReactJS — полная дорожная карта

Веб-разработка — увлекательная область для иследования, изучения и понимания.

ReactJS (он же React) — это библиотека пользовательского интерфейса на основе JavaScript с открытым исходным кодом. Сегодня он безумно популярен в сообществах веб-разработчиков. React Native не менее популярен среди разработчиков мобильных приложений.

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

Зачем нужна дорожная карта для изучения React?

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

Изучение чего-то нового не должно сильно отличаться. Если у вас есть карта или руководство, которое позволяет вам знать, что «если вы сначала выучите А, затем попытаетесь выучить Б. Тогда вам будет намного легче найти С», все будет намного проще для вас.

Это также может помочь вам определиться с альтернативными маршрутами, как далеко идти за раз и когда делать паузу.

В этом руководстве мы разобьем все на этапы и построим дорожную карту для изучения ReactJS. Вы также найдете ресурсы для изучения (необязательно) по мере дальнейшего изучения дорожной карты.

 Имейте в виду, что вы можете почувствовать себя немного ошеломленным, глядя на эту дорожную карту в первый раз. Но не волнуйтесь. Это не так сложно, как кажется. Я также указал некоторые ресурсы, которые помогут вам учиться в невероятном темпе.

Поскольку ReactJS очень популярен, вы можете найти здесь некоторое сходство со многими другими предлагаемыми дорожными картами. Но они не совсем одинаковы.

Разбивка дорожной карты на этапы

Мы разобьем всю дорожную карту на четыре этапа:

• Что нужно изучить перед изучением React
• С чего начать изучение React
• Как перейти от новичка к продвинутому React-разработчику
• Как перейти от среднего к продвинутому разработчику React

Что нужно изучить, прежде чем изучать React

ReactJS написан на JavaScript. Вам нужно быть знакомым с несколькими вещами (помимо базовых знаний JavaScript), чтобы ускорить изучение React.

Система контроля версий GIT

Git — это инструмент контроля версий, который помогает вам лучше управлять исходным кодом. Он не имеет прямого отношения к ReactJS. Но это поможет, если вы изучите его основные способы использования, чтобы вы могли воспользоваться преимуществами экосистемы разработки.

Git легко освоить, если вы сосредоточитесь на нескольких основных вещах, таких как:

• Как создать репозиторий
• Как применить/отменить изменения
• Как зафиксировать изменения в репозитории
• Как отправить изменения в удаленный репозиторий
• Как решать конфликты слияния (merge conflict)?

Наряду с Git вам также необходимо знать, как использовать сервис управления репозиторием на основе Git, такой как GitHub.

HTML

HTML обеспечивает структуру веб-страницы. Вы будете использовать HTML в новом синтаксисе под названием JSX, когда будете изучать в ReactJS.

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

CSS

Когда дело доходит до CSS, область применения зашкаливает. Однако сосредоточьтесь на этих темах:

• Селекторы css
• Псевдо классы и их применение
• Блочная модель (box model)
• Flexbox
• Grid
• Позиционирование элементов (абсолютное, относительное и т.д.)
• Единицы измерения (px, em, rem, vh и т.д.)

В изучении Css Вам помогут :

• Интерактивный курс "Базовый Css"
• Прикладной визуальный дизайн

Javascript

Вы должны знать следующие понятия из JavaScript:

• Объявление переменных (var, let и const)
• Обработка литералов
• Функции и стрелочные функции
• Деструктуризация объектов
• Spread и Rest операторы
• Модули, экспорт и импорт
• Promise и асинхронное программирование

Основы Javascript Вам поможет освоить этот интерактивный курс.

Экосистема NPM

Вы должны знать, как использовать npm, yarn и диспетчер версий узлов (nvm), которые помогают запускать и тестировать приложение ReactJs локально.

Знание того, как они работают на высоком уровне, всегда полезно для отладки вашей среды в случае возникновения проблем.

 

Как развернуть, разместить и сделать ваше приложение общедоступным:

Будет не очень весело, если вы создали что-то классное с помощью ReactJS и не сможете продемонстрировать это миру. Итак, вы должны знать, как развернуть приложение и сделать его общедоступным.

Такие инструменты, как Vercel или Netlify, упрощают развертывание приложения React несколькими щелчками мыши.

С чего начать изучение React новичку

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

Знакомство с ReactJs. 

Вы должны понимать, что такого особенного в ReactJs. Это декларативная библиотека пользовательского интерфейса на основе компонентов.

Изучаем, как настроить среду разработки и локаоьное окружение

Существует несколько способов настроить среду разработки для ReactJ. Как минимум, вы можете подключить React используя дистрибутив CDN.

Этот подход хорош для начала, но не является эталонным. Как новичок, вы, возможно, не захотите тратить слишком много времени на настройки, связанные с Babel или Webpack для ваших проектов.

Самый разумный и быстрый способ начать работу со средой разработки ReactJS — туториал  Create React App. Выполняя простые задачи шаг за шагом, Вы очень быстро создадите свое первое приложение на React.

Изучаем JSX

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

JSX — это синтаксис, который выглядит как HTML, но также имеет возможности JavaScript. Этот синтаксис помогает разработчикам писать логику пользовательского интерфейса со всеми необходимыми элементами, такими как выборка данных, условия, циклы, выражения и т. д.

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

Изучаем React компоненты

Компоненты — это сердце приложений ReactJs. Мы создаем независимые компоненты, которые можно использовать повторно, автономные и изолированные. Компонент должен правильно выполнять одну работу. Несколько компонентов объединяются для создания приложения.

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

React State

State (Состояние) — это данные, приватные для вашего компонента. Мы не разделяем состояния между компонентами. «Состояние» вашего компонента, которое вы используете для отображения информации и изменения информации.

Props в React

В реальном программировании вам понадобятся компоненты для взаимодействия друг с другом. Состояния являются частными для компонента, но вам необходимо передавать данные между компонентами. Вот тут и понадобятся Props. Обратите внимание, что Props доступны только для чтения.

Списки и ключи в React

Мы используем список для генерации списка элементов в компоненте React. Это очень распространенная задача — перечислить пользователей, элементы TODO и т.д.. Мы используем функцию map() для перебора списка и отображения результатов.

Ключи помогают определить, какой элемент из списка был изменен, чтобы сообщить React о повторном рендеринге. ReactJS выдает предупреждение, если вы забыли указать ключи для списка.

Методы жизненного цикла в React

Мы обсуждали, что «состояние» — это личное дело компонента. Состояние может быть динамическим и может потребовать модификации. Нам также необходимо выполнять очистку ресурсов при уничтожении компонентов. ReactJs предоставляет различные методы жизненного цикла для определения фаз и принятия мер.

Если вы только начинаете работать с ReactJS, вы должны понимать управление жизненным циклом функциональных компонентов. Вы можете сделать это с помощью встроенных хуков, таких как useState, useEffect и т. д.

Как вырости от новичка к разработчику React среднего уровня

Давайте теперь посмотрим, что нужно, чтобы перейти от начального к среднему уровню с React.

На этом этапе вы начнете сосредотачиваться на полноте приложения. В конце этого этапа вы сможете выполнять большинство задач ReactJs и получать удовольствие от их выполнения.

Стилизация в React

Мы все хотим, чтобы наши приложения выглядели свежо и эстетично. Вы можете использовать старый добрый CSS для стилизации своего приложения ReactJS. Или вы можете использовать Sass или другие библиотеки компонентов на основе CSS, такие как TailwindCSS, ChakraUI, react-bootstrap или MUI. Выбор полностью за вами.

Обработка форм в React

Обработка форм является важным требованием в веб-приложениях. Вам нужно понять, как обрабатывать элементы формы в стиле ReactJS.

Например, вы можете использовать библиотеку react-hook-form для простого создания форм.

Обработка данных в React

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

Процесс согласования в React

ReactJS использует виртуальный DOM и алгоритм сравнения, чтобы решить, когда и что обновлять в фактическом DOM для рендеринга. Знание того, как это работает внутри, поможет вам в отладке.

React Hooks

Надеюсь, вы немного узнали о некоторых встроенных хуках, таких как useState useEffect, когда изучали  жизненный цикл компонентов. Есть и другие полезные встроенные хуки, которые вам нужно изучить. Убедитесь, что вы не игнорируете их.

Пользовательские хуки React

Пользовательские хуки помогают в повторном использовании кода. Вы должны искать возможности для извлечения логики компонентов в многоразовые хуки. Код становится чистым и модульным с использованием пользовательских хуков.