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

Возьмем простой пример с реимплементацией хука useState. В нашем примере мы используем глобальный массив для хранения значений состояний, а переменную currentHook для отслеживания текущего индекса. Каждый раз, вызывая useState, мы инкрементируем индекс и присваиваем соответствующее значение из массива. Это позволяет нам работать с несколькими состояниями в одном компоненте. Однако, если попытаться изменить порядок вызова хуков, результат будет непредсказуемым.

Если попытаться внедрить условный рендеринг хуков, например, добавить чекбокс для включения/выключения поля с именем, произойдут сбои в порядке хука, что может привести к таким проблемам, как потеря состояния или неверное его присваивание. Пример с чекбоксом демонстрирует эту проблему очень наглядно: добавление нового хука в середину уже существующих может привести к тому, что состояния поменяются местами, и данные из одного поля будут отображаться в другом.

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

Кроме того, использование хуков в цикле или условных конструкциях (например, в if-else или тернарных операторах) приводит к нарушениям работы React, так как каждый вызов хука должен быть предсказуемым и иметь неизменный порядок при каждом рендере компонента.

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

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

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

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

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

Альтернативы условным хукам

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

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

Заключение

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

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

Как использовать продвинутые хуки React для улучшения доступности и производительности

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

Начнем с хука useId. Он позволяет генерировать уникальные идентификаторы для элементов компонента, что крайне важно для доступности и корректной работы форм. В React 19.1 был изменен формат ID с :r123: на «r123», чтобы они стали валидными CSS-селекторами. Этот хук полезен, когда необходимо избежать проблем с повторным использованием идентификаторов на одной странице. Например, если мы хотим отрендерить несколько одинаковых элементов с уникальными ID, то useId автоматически обеспечит каждому элементу уникальность, даже если он появляется несколько раз в интерфейсе. Это особенно важно для обеспечения доступности, так как ID помогают правильно связывать поля ввода с их метками, а также позволяют улучшить работу с экранными читалками.

Использование useId помогает избежать ручной генерации уникальных идентификаторов, которые могли бы привести к ошибкам при повторном рендере компонента. Например, если бы мы задали ID вручную, то при рендере нового поля с тем же ID возникла бы ошибка. Для случаев с множественными элементами в одном компоненте рекомендуется использовать один хук useId и дополнять идентификаторы тегами, такими как ${id}-tos-check или ${id}-username. Это подход позволяет гарантировать, что каждый элемент остается уникальным даже в самых сложных интерфейсах.

Перейдем к следующему хуку, который помогает в интеграции с внешними хранилищами данных – useSyncExternalStore. Этот хук используется для подписки на внешние хранилища, такие как библиотеки управления состоянием или браузерные API. Он принимает три параметра. Первый — это функция подписки, которая отслеживает изменения в данных хранилища. Второй — это функция получения снимка состояния, которая используется для обновления компонента, когда состояние меняется. Третий параметр — это опциональная функция для получения начального состояния при рендеринге на сервере.

В примере с использованием useSyncExternalStore можно создать индикатор состояния сети, который будет показывать, онлайн ли пользователь. В данном случае мы подписываемся на события online и offline, и каждый раз при изменении состояния сети React будет автоматически обновлять компонент, отображая актуальный статус. Этот подход позволяет интегрировать React с существующими API браузера, что делает его удобным инструментом для работы с внешними данными.

Хотя useSyncExternalStore полезен для интеграции с не-React кодом, для большинства случаев управления состоянием стоит использовать более высокоуровневые хуки, такие как useState или useReducer, поскольку они позволяют лучше контролировать внутреннее состояние компонента.

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

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

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

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

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

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

Когда и зачем использовать Callback, Memo и Effect Hooks в React?

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

useMemo и useCallback — это два хука, которые помогают предотвратить лишние перерасчёты и рендеры, что может быть критично в сложных интерфейсах. useMemo используется для запоминания результатов вычислений, которые зависят от входных данных. Это значит, что вычисление произойдёт только в случае изменения одной из зависимостей, указанных в массиве зависимостей. Например, если мы передаем в хук массив значений a, b и c, то функция будет пересчитываться только в случае их изменений.

js
const memoizedCallback = useMemo(() => () => doSomething(a, b, c), [a, b, c]);

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

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

Вместе с этими хуками стоит отметить и более специализированные версии useEffect, такие как useLayoutEffect и useInsertionEffect. Эти хуки предоставляют возможность более точно контролировать момент применения эффектов в жизненном цикле компонента.

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

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

useInsertionEffect, в свою очередь, применяется только в очень специфичных случаях, например, для использования в библиотеках CSS-in-JS. Он выполняется ещё до useLayoutEffect, и его использование не требуется в повседневной разработке. Этот хук особенно полезен для авторов библиотек и фреймворков, которые нуждаются в синхронном управлении стилями до того, как компоненты отобразятся на странице.

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

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

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

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

Как мигрировать компоненты React из классовых в функциональные: шаг за шагом

В мире разработки на React часто возникает необходимость перехода от классовых компонентов к функциональным, особенно с появлением хуков, которые значительно упрощают работу с состоянием и побочными эффектами. Миграция может показаться сложной, но на самом деле это процесс, который можно выполнить поэтапно, минимизируя трудности и сохраняя удобочитаемость кода. Рассмотрим, как это можно сделать на примере приложения для создания списка дел (todo).

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

Для начала важно понимать, что классовые компоненты в React были необходимы для работы с состоянием и методами жизненного цикла. Однако, начиная с версии React 16.8, с хуками появилась возможность управлять состоянием и побочными эффектами в функциональных компонентах, что упрощает код, делает его легче для тестирования и улучшает производительность. В этом контексте рассмотрим, как мы можем мигрировать классические компоненты todo-приложения.

Пример класса компонента TodoItem состоит из нескольких методов: обработки кликов для изменения состояния задачи и удаления задачи. Однако, поскольку в функциональных компонентах мы не имеем доступа к методу this, необходимо изменить способ обработки данных. Сначала мы удаляем все старые методы и создаем функциональный компонент, который принимает пропсы: title, completed, id, toggleTodo и removeTodo.

javascript
export function TodoItem({ title, completed, id, toggleTodo, removeTodo }) {
  function handleToggle() {
    toggleTodo(id);
  }

  function handleRemove() {
    removeTodo(id);
  }

  return (
    <div>
      <input type="checkbox" checked={completed} onChange={handleToggle} />
      {title}
      <button onClick={handleRemove}>x</button>
    </div>
  );
}

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

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

javascript
import { useContext } from 'react';
import { StateContext } from './StateContext.js';

export function TodoList() {
  const items = useContext(StateContext);

  return (
    <div>
      {items.map((item) => (
        <TodoItem key={item.id} {...item} />
      ))}
    </div>
  );
}

В этом примере мы заменяем использование this.context на хук useContext, который позволяет легко работать с контекстом. Это избавляет от необходимости использовать класс StateContext.Consumer и значительно упрощает структуру кода.

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

javascript
export function TodoFilter({ filterTodos }) {
  function handleFilter(name) {
    filterTodos(name);
  }

  return (
    <div>
      <button onClick={() => handleFilter('all')}>All</button>
      <button onClick={() => handleFilter('completed')}>Completed</button>
      <button onClick={() => handleFilter('active')}>Active</button>
    </div>
  );
}

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

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

javascript
import { useEffect, useState } from 'react';

export function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    const response = await fetch('/todos');
    const data = await response.json();
    setTodos(data);
  };

  return (
    <div>
      <TodoList items={todos} />
    </div>
  );
}

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

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

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

Как правильно мигрировать от классовых компонентов React к функциональным с использованием Hooks?

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

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

Основная цель миграции — улучшить читаемость и производительность, избавиться от повторяющихся действий и лишней сложности, присущей классовым компонентам. Например, для управления состоянием в классовых компонентах использовалась конструкция this.state и методы типа this.setState(). В функциональных компонентах с Hooks все гораздо проще и естественнее, потому что состояние инкапсулируется внутри компонента через useState. Это позволяет обновлять данные без необходимости вручную изменять структуру компонента.

Однако важно отметить, что в процессе миграции могут возникнуть различные трудности. Одним из самых заметных вызовов является работа с методами жизненного цикла, так как их функциональный аналог useEffect работает немного по-другому. Кроме того, функциональные компоненты не могут использовать this, что делает некоторые аспекты работы с контекстом менее очевидными. Это значит, что для более глубокой работы с состоянием и контекстом нужно будет адаптировать подходы к использованию новых API.

Вместо метода componentDidMount, componentDidUpdate, и componentWillUnmount в классовых компонентах, useEffect в функциональных компонентах предоставляет более гибкую и компактную альтернативу, которая позволяет прописывать логику, срабатывающую при изменении состояния или при монтировании компонента. Однако, чтобы использовать useEffect корректно, нужно учитывать его поведение с зависимостями, иначе можно столкнуться с непредсказуемыми результатами.

Рассматривая конкретные аспекты миграции, важно понимать, что при переходе от классовых компонентов к Hooks, вы не только упрощаете свой код, но и открываете возможность использовать новые возможности React. Например, работу с контекстом через useContext, обработку асинхронных запросов с useEffect, а также упрощенное управление состоянием через useState и useReducer.

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

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

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

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

Миграция на Hooks также означает, что вам необходимо переосмыслить способы работы с состоянием и контекстом в приложении. Например, при использовании useState для каждого компонента необходимо контролировать его состояние, но если ваше приложение требует более сложных операций с состоянием, как в случае с Redux или MobX, вам стоит рассмотреть использование useReducer. Это может быть особенно полезно, если ваши компоненты взаимодействуют с глобальными данными, и вам нужно более гибко управлять их состоянием.

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

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

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

После того как вы клонировали папку с кодом с примерами GitHub, появится уведомление о том, что был найден Git-репозиторий. Вы можете закрыть это уведомление, поскольку наша цель — открыть только папку Chapter01_1. Теперь, когда Visual Studio Code (VS Code) настроен, можно перейти к следующему шагу: настройке нового проекта с помощью Vite.

Vite — это популярный инструмент для разработки, который был выбран для этого проекта, поскольку он является одним из самых предпочтительных среди разработчиков, согласно исследованию "State of JS 2024" (https://2024.stateofjs.com/). Это решение позволяет быстро и удобно настроить проект, с возможностью расширения конфигурации по мере необходимости. Чтобы настроить проект с помощью Vite, выполните следующие шаги:

  1. В верхней панели меню VS Code выберите Terminal | New Terminal, чтобы открыть новый терминал.

  2. В терминале введите команду:
    $ npm create [email protected] .
    Символ $ указывает, что это команда для терминала. Убедитесь, что в конце команды стоит точка, чтобы проект был создан в текущей папке. Это важно, чтобы не создавать новую папку.

  3. Когда система запросит, нужно ли установить create-vite, просто введите "y" и нажмите Enter для продолжения.

  4. Если будет задан вопрос о том, что текущая директория не пуста, выберите вариант "Remove existing files and continue", а затем подтвердите выбор клавишей Enter.

  5. При запросе о названии пакета подтвердите предложенное по умолчанию название, нажав Enter.

  6. Когда система спросит, какой фреймворк выбрать, используйте клавиши со стрелками, чтобы выбрать React, и нажмите Enter.

  7. При выборе варианта укажите JavaScript (для простоты и чтобы охватить более широкую аудиторию, в книге рассматривается только JavaScript).

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

  8. Отредактируйте файл package.json, чтобы версии зависимостей и dev-зависимостей соответствовали следующим:

    json
    "dependencies": {
  "react": "19.0.0",
  "react-dom": "19.0.0"
},
"devDependencies": {
  "@eslint/js": "9.19.0",
  "@types/react": "19.0.8",
  "@types/react-dom": "19.0.3",
  "@vitejs/plugin-react": "4.3.4",
  "eslint": "9.19.0",
  "eslint-plugin-react": "7.37.4",
  "eslint-plugin-react-hooks": "5.0.0",
  "eslint-plugin-react-refresh": "0.4.18",
  "globals": "15.14.0",
  "vite": "6.1.0"
}

  9. После этого можно установить зависимости, выполнив команду npm install в терминале.

  10. Затем запустите сервер разработки с помощью команды npm run dev. После этого терминал покажет URL, по которому ваше приложение будет доступно.

  11. Откройте это приложение в браузере, и вы должны увидеть, что на кнопке отображается надпись "count is 0". При нажатии на эту кнопку значение будет увеличиваться.

Кроме Vite, существуют и альтернативы, такие как webpack, Rollup и Parcel. Однако эти инструменты требуют большей настройки и могут не обеспечить такого удобного опыта работы с сервером разработки, как Vite, который поддерживает стандарт ECMAScript Modules (ESM) и минимальную конфигурацию для начала работы. Среди будущих альтернатив можно выделить Rolldown, хотя на момент написания книги он ещё находится на стадии разработки.

После того как проект настроен, следующим шагом будет интеграция инструментов, которые помогут следить за качеством кода и соблюдением лучших практик. Для этого мы будем использовать ESLint и Prettier.

Настройка ESLint и Prettier для соблюдения лучших практик и стиля кода

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

  1. В терминале откройте новый терминал (используя Split Terminal, чтобы сохранить работающий сервер) и введите команду:

    bash
    npm install --save-dev --save-exact [email protected] [email protected]

    Флаги --save-dev и --save-exact гарантируют, что эти зависимости будут установлены только для разработки и будут закреплены на точных версиях.

  2. Теперь настройте Prettier, чтобы он автоматически форматировал ваш код. Для этого создайте файл .prettierrc.json в корне проекта. В этот файл добавьте следующие настройки:

    json
    {
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 80,
  "semi": false,
  "jsxSingleQuote": true,
  "singleQuote": true
}

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

Интеграция с VS Code

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

Настройка ESLint, в свою очередь, позволит вам избежать многих распространённых ошибок и недочётов в коде. Совмещение ESLint и Prettier обеспечит не только корректность логики, но и единообразие стиля кода в рамках проекта.

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

Как настроить Prettier и ESLint для эффективной работы с кодом в проекте

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

Первым шагом будет настройка Prettier, который отвечает за автоматическое форматирование кода. Для этого откройте настройки VS Code через меню File | Preferences... | Settings (для Windows/Linux) или Code | Settings... | Settings на macOS. В открывшемся редакторе настроек перейдите во вкладку Workspace, чтобы все изменения сохранялись в файл .vscode/settings.json в папке вашего проекта. Это гарантирует, что другие разработчики, работающие с вашим проектом, также будут использовать эти настройки.

Далее необходимо включить автоматическое форматирование кода при сохранении. Для этого найдите параметр editor.formatOnSave и установите флажок для его активации. Следующим шагом будет выбор форматировщика — выберите Prettier - Code formatter в списке параметра editor.defaultFormatter.

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

Однако, чтобы избежать ненужной нагрузки на производительность, полезно настроить исключения для определённых файлов и папок, которые не следует форматировать. Для этого создайте файл .prettierignore в корне проекта и добавьте туда папки, такие как dist/, где находится транспилированный код. Папка node_modules/ автоматически игнорируется Prettier.

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

javascript
import prettierConfig from 'eslint-config-prettier';

Далее прокрутите файл до конца и добавьте конфигурацию Prettier в массив правил, чтобы ESLint учитывал форматирование Prettier:

javascript
'react-refresh/only-export-components': [
  'warn',
  { allowConstantExport: true },
],
prettierConfig,

Кроме того, стоит отключить правило для prop-types в React, так как с версии React 19 проверки типов свойств были удалены, и единственный способ их добавить — это использовать TypeScript. Если вы ещё не знакомы с TypeScript, рекомендуется изучить его после завершения работы с этим проектом, однако в данном контексте использование TypeScript не рассматривается.

После того как настройки ESLint и Prettier завершены, проверьте их работу, выполнив команду npx eslint src в терминале. Если ошибок не будет, значит, все настроено правильно.

Для удобства можно добавить команду lint в файл package.json, чтобы запускать линтер с помощью одной команды. Для этого выполните команду:

bash
npm pkg set scripts.lint="eslint src"

После этого можно будет запускать линтер через npm run lint.

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

Для начала создадим классический компонент React, который будет позволять пользователю вводить имя. В примере описан процесс создания компонента с использованием классов. Однако важно понять, что с развитием React и добавлением Hooks использование классов становится всё менее актуальным. Hooks позволяют создавать компоненты без необходимости писать методы класса и вручную управлять состоянием через this.setState. Вместо этого мы можем использовать хуки, такие как useState и useEffect, которые значительно упрощают процесс.

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

javascript
export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
  }

  handleChange(evt) {
    this.setState({ name: evt.target.value });
  }

  render() {
    const { name } = this.state;
    return (
      <div>
        <input type="text" value={name} onChange={evt => this.handleChange(evt)} />
        <p>{name}</p>
      </div>
    );
  }
}

Этот код имеет несколько ключевых моментов, которые необходимо понимать. Во-первых, для установки начального состояния используется конструктор, во-вторых, изменения состояния осуществляются через метод this.setState, который обновляет объект состояния и перерисовывает компонент. Однако, с приходом React Hooks, такой подход стал не самым оптимальным.

При использовании React Hooks тот же компонент может быть реализован намного проще с использованием хука useState:

javascript
import React, { useState } from 'react';

export function App() {
  const [name, setName] = useState('');
  
  const handleChange = (evt) => {
    setName(evt.target.value);
  };
  
  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>{name}</p>
    </div>
  );
}

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

Для полноты картины важно учитывать, что переход на React Hooks предполагает отказ от использования классов, что требует определённых усилий и изменений в проекте, особенно если код был написан с использованием классов. Однако, после перехода на хуки код становится значительно более упрощённым и гибким.

Смотрите также

Методы оценки и контроля качества нефти в процессе ее добычи
Как использовать медленный плита для приготовления вкусных блюд?
Методы обучения иностранным языкам с учетом профессиональной направленности студентов
Как понять «фейковые новости»: различные подходы к определению и их особенности
Поведение птиц в условиях зимней стужи и снегопадов
Организация документационного потока в компании
Факторы, влияющие на разработку международных маркетинговых стратегий
Принципы организации и проведения медицинской экспертизы
Почему термин "блокчейн" вызывает споры и почему это важно понимать?
Экстракция в пищевой промышленности: процессы и применение
Влияние солнечного излучения на фотосинтетическую активность растений
Роль молекул РНК в молекулярной медицине