Итак, вы хотите быстро изучить React, Redux и GraphQL, чтобы стать востребованным фронтенд-инженером?

Хорошая новость заключается в том, что изучение основ React достижимо довольно быстро (при условии, что вы уже являетесь разработчиком). Есть два критических фактора, которые в основном определяют, насколько быстро вы станете хорошим разработчиком React:

  1. Мотивация
  2. Методология

Учитесь итеративно, шаг за шагом!

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

Шаг 0: изучите современный JavaScript

React написан на JavaScript! Не будучи компетентным в современном JavaScript, вы будете испытывать трудности при изучении React, и то, что вы можете считать «проблемой React», на самом деле будет проблемой JavaScript. Существует тенденция просто изучать библиотеку или фреймворк и ожидать, что язык просто пойдёт впрок, в случае с экосистемой React этого следует избегать, так как это не так. самоуверенная структура (это библиотека), и, в отличие от других библиотек JS, она очень сильно ставит вас на место водителя.

Это то, что мы считаем важными частями современного JavaScript, с которыми вы захотите ознакомиться, прежде чем переходить к React:

  • Объявления переменных с помощью let и const — найдите время, чтобы понять область видимости блока и область видимости функции.
  • Использование модульного JavaScript, импорт/экспорт — убедитесь, что вы понимаете, как использовать экспорт по умолчанию, именованный экспорт и т. д., а также сопутствующий им импорт.
  • Деструктуризация массива — поймите, как работает синтаксис деструктуризации массива и как его можно использовать, чтобы избежать мутаций массива.
  • Деструктуризация объектов — разберитесь в синтаксисе, а затем найдите время, чтобы посмотреть и поэкспериментировать с тем, как работает деструктуризация внутри параметров функции.
  • Стрелочные функции — поймите различия между стрелочными функциями и старым синтаксисом ES5, в частности тот факт, что стрелочные функции получают свое «это значение» из контекста.
  • Синтаксис класса — поймите, что это всего лишь синтаксис, который использует прототипное наследование под капотом.
  • Синтаксис свойств класса — поймите, как писать методы для класса.

Шаг 0.5: Ознакомьтесь с NPM или Yarn

К счастью, научиться пользоваться менеджером пакетов несложно, и если вы уже являетесь разработчиком (или только учитесь им), вы, вероятно, уже прошли этот шаг. Тем не менее, стоит потратить время на то, чтобы убедиться, что вы понимаете, как устанавливать пакеты в правильное место (зависимости разработки или производства), и как облегчить себе жизнь и сэкономить время на вводе текста, добавив свои собственные скрипты в файл package.json. .

Шаг 1: Изучите основы React

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

Затем используйте create-react-app, чтобы запустить собственное приложение для реагирования и поиграть с тем, что вы узнали. Создать приложение React — отличный способ начать новый проект, не беспокоясь о настройке, на этом этапе вашего пути к React (и далее) это идеальный способ быстро приступить к работе и сократить время на кодирование 😎

Шаг 2. Научитесь думать в React

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

Шаг 3: Узнайте, как использовать React Router

Вероятно, вы захотите, чтобы пользователи могли перемещаться между разными страницами вашего приложения с помощью навигации в браузере, и для этого вам потребуется использовать React Router. Поскольку React не является самоуверенной библиотекой, этот маршрутизатор не устанавливается из коробки, но он является важной частью набора инструментов и необходим для полного понимания. Изучение маршрутизации — это шаг, который строится непосредственно на первом шаге и следует тому же декларативному принципу:

Узнайте, как начать работу с React Router, из пошаговых инструкций.

Шаг 4. Изучите формы, аутентификацию и выборку данных

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

Для аутентификации мы рекомендуем начать с JWT, так как это стандарт и он не имеет состояния :-)

Чтобы выполнять выборку данных в React, теперь вы можете напрямую использовать хорошо поддерживаемый fetch API. Вам нужно будет выполнять выборку данных внутри метода жизненного цикла componentDidMount().

Шаг 5: Создайте и разверните несколько приложений React

На этом этапе вы уже изучили все основы, которые вы знаете, чтобы создавать базовые приложения, так что пришло время попрактиковаться! Я настоятельно рекомендую создать приложение, которое использует некоторые данные из API, вы можете реализовать базовую маршрутизацию, чтобы предоставить представление в виде списка и подробное представление, а затем вы можете добавить некоторые формы. и войдите, чтобы попрактиковаться в этих частях. Если вам нужно вдохновение и эшафот, вот он! Я уверен, что вы можете придумать еще несколько забавных, но как насчет использования API погоды или API Рика и Морти ?? Столько вариантов 😁

Шаг 6 и далее

Если вы дойдете до этого этапа, вы в хорошей форме, чтобы начать изучать некоторые другие инструменты в экосистеме React, такие как Redux и GraphQL. Что вы можете обнаружить на этом этапе своего путешествия, так это то, что количество ресурсов начинает немного истощаться, так как изучение чего-либо в программировании имеет тенденцию следовать этому хорошо известному графику: