Как правильно создавать и использовать компоненты в React?

Question

Samantha

webpack , node.js , react , nextjs

Как правильно создавать и использовать компоненты в React?

Необходимо разработать конструктор страниц. В настоящее время компоненты собираются с использованием esbuild в формате esm модулей. В конструкторе страниц собранный файл component.js загружается через import(component.js). 

Однако это вызывает несколько проблем. Во-первых, все библиотеки должны включаться в сборку, что увеличивает размер бандла. В противном случае при загрузке компонента появляются ошибки в браузере, связанные с отсутствием React: 
<pre><code>Ошибка загрузки компонента MyApp: TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".</code></pre>

Во-вторых, это приводит к дублированию React, поскольку каждая зависимость использует свою версию React.

18 марта 2025 г. 10:34

Ответы на вопрос 1

Похожие вопросы

Answer 1

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

### Проблемы

1. **Дублирование зависимостей**: Если компоненты загружаются отдельно и каждая из сторонних библиотек использует свою версию React, это может приводить к проблемам с производительностью и даже ошибками, связанным с различиями в поведении версий.
  
2. **Ошибка загрузки модулей**: Если зависимости, такие как React, не находятся в области видимости вашего приложения, может возникнуть ошибка о том, что модуль не найден.

### Рекомендации по реализации

Чтобы избежать этих проблем, вы можете рассмотреть следующие подходы:

#### 1. **Упаковка совместно используемых зависимостей**

Объедините React и другие библиотеки в одну общую сборку. Например, если вы используете esbuild, вы можете настроить сборку таким образом, чтобы библиотеки, такие как React, были внешними зависимостями. Это позволит избежать дублирования:

```javascript
// esbuild.config.js
require('esbuild').build({
  entryPoints: ['src/index.jsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  external: ['react', 'react-dom'], // Указываем библиотеки, которые будут внешними зависимостями
}).catch(() => process.exit(1));
```

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

#### 2. **Подключение React через CDN**

Если вы не хотите собирать React вместе с остальными компонентами, вы можете загружать его через CDN и использовать глобальные переменные:

```html
<!-- Подключаем React через CDN -->
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
```

Затем убедитесь, что ваш код использует React как глобальную переменную:

```javascript
const { useState } = React;
// ... ваш код компонента.
```

#### 3. **Проверка совместимости версий**

Если вы используете несколько пакетов от разных разработчиков, убедитесь, что они используют совместимые версии React. Эту информацию можно проверить в `package.json` и рекомендуется использовать инструменты, такие как `npm ls`, для выявления конфликтных зависимостей.

#### 4. **Создание компонентов в формате без бандлинга**

Также вы можете рассмотреть вариант создания компонентов в формате без бандлинга (например, с использованием UMD), что будет удобно для потребления существующими приложениями без необходимости настройки веб-пакетов или esbuild.

#### 5. **Использование React как peer dependency**

Если вы разрабатываете библиотеки компонентов, укажите React как `peerDependency` в `package.json`, чтобы пользователи вашей библиотеки знали, что они должны установить совместимую версию React:

```json
{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  }
}
```

### Заключение

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