Ускорьте изучение React с помощью этих 12 советов!

Легко сразу же перейти на фреймворк, но прежде чем бежать, нужно пройтись, верно? Уверен, вам надоело это слышать! Еще одна вещь, которую вам наверняка надоело слышать: “Прежде чем изучать фреймворк, нужно знать JavaScript!”. Хотя этот совет верен, он порождает другой, часто остающийся без ответа вопрос. “Насколько много JavaScript мне нужно знать, прежде чем изучать React?”.

Я был далеко не экспертом по JavaScript, когда 3 года назад учил себя React. Но есть несколько важных вещей, которые я знал, и которые вы тоже должны знать перед изучением React (или любой другой библиотеки/фреймворка, если на то пошло).

• Функции (включая стрелочные функции ES6)
• Переменные (const и let)
• Типы данных
• Объекты и массивы (и как с ними работать)
• Импорт/экспорт модулей
• Работа с API
• Понимание того, как работает манипуляция DOM

Если у вас есть базовое представление о том, как все это работает, вы сможете хорошо освоить React. Работа с React сделает вас лучшим JavaScript-разработчиком, поскольку вы все еще работаете с JavaScript – ведь React – это библиотека JavaScript!

2) Используйте create-react-app

Использование create-create-app, который вы можете найти на GitHub для получения дополнительной информации здесь, является отличным способом начать работу. Он дает вам рабочий пример проекта из коробки, так что вам не нужно беспокоиться о том, чтобы создать его с нуля самостоятельно!

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

3) Забудьте о Redux, Context API и других модных штуках управления состоянием

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

4) Сосредоточьтесь на функциональных компонентах

Если бы вы хотели хранить состояние в компоненте, вам традиционно пришлось бы использовать компонент класса ES6. Компоненты классов немного неудобны (нужно беспокоиться о привязке “this”, работать с конструкторами, сложно хранить/обновлять сложное состояние и так далее):

Функциональные компоненты и крючки становятся более “приятным” способом создания компонентов реакций. Функциональные компоненты – это обычные функции JavaScript, которые возвращают JSX. В сочетании с хуком “useState” они делают создание и работу с компонентами намного приятнее.

Я не говорю “держитесь подальше от компонентов классов!”, если вы хотите изучить их, то, конечно, дерзайте! Это будут полезные знания. Однако все больше склоняется к крючкам, так что не пренебрегайте ими!

5) Выберите один способ стилизации компонента

В React существует несколько способов стилизации компонента (кто бы мог подумать, правда?) По последним подсчетам, их было как минимум 8. С ума сойти.

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

6) Изучите крючок useState

Ранее я уже упоминал хук useState, так что же это такое?

Хук useState позволяет нам хранить состояние в функциональном компоненте (раньше для этого нужно было использовать компонент класса). Это выглядит следующим образом:

Это сохраняет переменную name в состоянии. Мы можем изменить переменную с помощью setName(), а также инициализировать ее, передав значение в функцию useState (в данном случае “Chris”).

Хук useState делает управление сложным состоянием более приятным (мы можем иметь “несколько хуков состояния” для каждого компонента), и нам не нужно беспокоиться об использовании “this” каждый раз, когда мы хотим работать с состоянием:

7) Изучите хук useEffect

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

Хук useEffect – это то место, где вы обычно выполняете вызовы API, обновляете компонент, если реквизиты изменились, и выполняете любой код очистки.

С помощью хуков useEffect и useState можно решить множество проблем, поэтому обязательно имейте их в своем арсенале знаний React!

8) Начните с одного компонента

React – это все о компонентах, но это не значит, что мы должны перебарщивать с созданием компонентов для каждой мелочи в нашем проекте! Рекомендуется начать с одного компонента, а когда он станет слишком большим, разбить все на более мелкие компоненты. Избегая “чрезмерного абстрагирования”, вы сможете сделать ваш код более понятным на начальном этапе, а также избежать бурения реквизитов – это когда вам приходится передавать реквизиты через несколько компонентов, что может стать проблемой для управления.

9) Реквизиты против состояния

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

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

Вот пример передачи имени и возраста компоненту UserDetails от компонента App (т.е. родителя):

Состояние – это данные, которые могут представлять части приложения, которые могут изменяться. Например, список пользователей, булев флаг, который показывает, открыт ли модал, и значение поля ввода – все это может храниться в состоянии:

10) Игнорируйте сервер – используйте поддельные данные или существующие API.

Если вы пытаетесь изучить React, то обычно лучше всего сосредоточиться на React. Логично, правда? Когда вы практикуетесь в получении данных из API, может возникнуть соблазн подумать: “Черт, мне нужно создать API для этого! Похоже, мне придется изучать Node.js!”.

Если ваша цель – стать full-stack разработчиком, это неплохая идея. Но если вы хотите изучить React, попробуйте использовать существующие API или макеты данных для тренировки работы с API. Это поможет вам сосредоточиться на React (я очень верю в то, что нужно изучать что-то одно за раз!).

11) Держитесь подальше от других фреймворков

Это ошибка, которую совершают новички (в том числе и я). Существует множество фреймворков, и по какой-то причине мы думаем, что должны изучить их все! Но это не так. Я еще не встречал вакансий, в которых говорилось бы: “Обязательно наличие опыта работы с React, Vue и Angular” – если бы я встретил такую вакансию, я бы держался от нее подальше.

Если вы изучаете React, сосредоточьтесь на React. Вы всегда можете поиграть с другими, если хотите, вы даже можете подумать: “Эй, мне больше нравится Vue!”, и переключить свое внимание на него. Какой бы фреймворк вы ни выбрали, постарайтесь сосредоточиться на нем, пока не сможете создать хотя бы несколько проектов.

12) Изучите жизненный цикл и то, как происходит рендеринг компонента

Очень важно знать жизненный цикл React и то, как/когда компонент меняется. Я потратил много часов на исправление ошибок из-за того, что не до конца понимал эти вещи! Вот несколько советов, которые помогут вам начать с этого:

• Когда состояние компонента меняется, React перерисовывает его заново
• Когда компонент перерендеривается, он автоматически перерендеривает свои дочерние элементы
• Используйте useEffect() для запуска кода в определенные моменты жизненного цикла.

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

Опубликовано 18 мая 2020 г.

Я фронтенд-разработчик-самоучка, ставший старшим UI-разработчиком, автором FreeCodeCamp, ведущим контрибьютором и YouTuber/блоггером. Моя миссия – помочь начинающим изучить React, JavaScript и CSS. Крис Блейкли в Twitter