Что нужно знать React-разработчику в 2021 году

Максим Кравец

CEO в Holyweb

Я руководитель аутсорс-продакшна Holyweb, мы занимаемся разработкой фронтенда корпоративных систем и сервисов для финтеха, ритейла и IT-холдингов. Наш основной технологический стек: React.js, Redux / Effector, Razzle. Команда быстро растет, поэтому я провожу много собеседований — иногда по 20-30 в неделю. В этом материале рассмотрим, какими инструментами и ключевыми навыками должен владеть React-разработчик, чтобы держать руку на пульсе индустрии и производить хорошее впечатление на собеседовании.

Знание JavaScript

React построен на основе JavaScript. В первую очередь людям, желающим изучать React, нужно понять, насколько хорошо они знают сам JavaScript.

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

Использование State Manager

В React.js нет встроенного State Manager. Как стандарт долгое время использовалась библиотека Redux, но она не очень хорошо выполняет эту роль — при работе с ней приходится писать много бойлерплейт-кода, отсутствуют средства управления асинхронным поведением и побочными эффектами.

Так начали появляться другие State Managers. Разработчики Redux учли свои недочеты и представили библиотеку Redux Toolkit, которую хорошо приняли frontend разработчики.

Redux Toolkit — библиотека поверх Redux. Она дает возможность добиться того же, что и Redux, но с Redux Toolkit вам придется писать намного меньше кода, чем c Redux. Кроме того, Redux Toolkit использует внутри себя Immer.js, поэтому не нужно думать над иммутабельностью данных, т.е использовать деструктуризацию, создавая каждый раз новые объект состояния в редьюсерах.

Еще одна довольно перспективная библиотека — MobX. Бизнес логика MobX отличается от Redux. Не стоит забывать и про Effector, которую создали выходцы из СНГ.

На сегодняшний день эти три State Managers являются самыми популярными. Все три  библиотеки очень хорошо справляются со своей задачей, но мы обычно используем либо Redux Toolkit, либо Effector.

React Hooks

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

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

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

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

Когда хуки только появились, мы в Holyweb экспериментировали на них, писали новые компоненты и смотрели, что из этого выйдет. Когда все хорошо получалось, мы использовали их дальше, писали на них новые фичи. Для тех, кто до сих пор не использовал React Hooks, я бы рекомендовал это попробовать — с ними очень легко описывать нужную логику, они делают код чистым и более понятным.

Многих волнует вопрос, стоит ли переписывать проект по новой, потому что появились хуки. Я бы не сказал, что перформанс значительно возрастет или упадет от таких действий. Если вам понравятся хуки, то пишите новые фичи вашего проекта на них. Переписать старые куски всегда вы успеете.

Давайте посмотрим примеры на хуках.

Сделаем простой Counter.

Вот код с использованием классового компонента:

			class App extends React.Component {
 state = {
   counter: 0
 };
 onIncrement = () => {
   this.setState((state) => {
     return {
       counter: state.counter + 1
     }
   });
 };
 onDecriment = () => {
   this.setState((state) => {
     return {
       counter: state.counter - 1
     }
   });
 };
 render() {
   return (
     <div>
       <button onClick={this.onIncrement}>+</button>
       <button onClick={this.onDecriment}>-</button>
       <div>Counter: {this.state.counter}</div>
     </div>
   );
 }
}
		

А вот код с использованием функционального компонента и хуков:

			function App () {
 const [counter, toggleCounter] = React.useState(0)
 const onIncrement = () => {
   toggleCounter(counter => counter + 1)
 }
 const onDecriment = () => {
   toggleCounter(counter => counter - 1)
 }
 return (
   <div>
     <button onClick={onIncrement}>+</button>
     <button onClick={onDecriment}>-</button>
     <div>Counter: {counter}</div>
   </div>
 );
}
		

Можно убедиться, что код на хуках чище и понятнее.

Server-Side Rendering

Сейчас есть несколько популярных SSR решений. На наших первых проектах, где мы применяли SSR, у нас было полностью кастомное решение. Со временем мы начали изучать и использовать готовые решения. У каждого из них есть свои плюсы и минусы. Например, на одном из текущих проектов мы используем Razzle, а на другом — Next.js.

Next.js — это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды. То, что у Next не совсем нравится — в некоторых случаях он диктует архитектуру и то, как строить приложения. Но это уже вопрос вкуса и личных пристрастий.

Razzle — это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.

Если вы серьезно задумались на тему SSR, рекомендуем внимательно изучить следующие продукты и попытаться получить максимум практического опыта:

• js (React-based);
• js (Vue-based);
• Gatsby (React-based);
• Gridsome (Vue-based).

Частые ошибки в изучении React

Основная ошибка большинства разработчиков — невнимательное чтение документации. Например, один из наших разработчиков признался, что плохо прочитал документацию и начал везде использовать useCallback, когда это было не нужно делать. Только потом он это понял, когда начал перечитывать документацию.

На вопросы, которые люди задают в чатах и профильных сообществах, чаще всего уже есть ответы в документации — просто нужно ее внимательно прочитать.

Помимо самой библиотеки, специалист должен владеть такими технологиями, как HTML, CSS, JavaScript, npm, Git, Babel, WebPack, Redux. Также могут пригодиться навыки работы с другими инструментами, но это уже зависит от вакансии.

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