Как настроить окружение Dev/Build для отдельных компонентов React?

Для настройки окружения Dev/Build для отдельных компонентов React и их компиляции в независимые JS бандлы или в один большой файл, можно использовать следующие инструменты и подходы:

### Использование Bundlers (например, Webpack или Rollup)

1. **Установите Node.js и npm** (если еще не установлены):
   Установите Node.js с официального сайта (https://nodejs.org/), вместе с ним будет установлен npm.

2. **Создайте новый проект**:
    ```shell
    mkdir my-components && cd my-components
    npm init -y
    ```

3. **Установите зависимости для React и для сборщика**:
    ```shell
    npm install react react-dom
    npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react
    ```

4. **Настройте Babel**:
   Создайте файл `.babelrc` с настройками для React:
    ```json
    {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
    ```

5. **Настройте Webpack**:
   Создайте файл `webpack.config.js` для настройки сборки:
    ```javascript
    const path = require('path');

    module.exports = {
      entry: {
        'my-component': './src/MyComponent.js' // Здесь можно добавить много точек входа для разных компонентов
      },
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        libraryTarget: 'umd',
        globalObject: 'this'
      },
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader'
            }
          }
        ]
      },
      externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
      },
      resolve: {
        extensions: ['.js', '.jsx']
      }
    };
    ```

6. **Добавьте скрипты в `package.json` для сборки**:
    ```json
    {
      "scripts": {
        "build": "webpack --mode production"
      }
    }
    ```

7. **Создайте ваши компоненты React**:
   Разработайте компоненты в папке `src`, чтобы затем собрать их в bundles. Пример компонента `MyComponent.js`:

    ```jsx
    import React from 'react';

    class MyComponent extends React.Component {
      render() {
        return <div>My React Component</div>;
      }
    }

    export default MyComponent;
    ```

8. **Запустите сборку**:
    ```shell
    npm run build
    ```

   После сборки, сгенерированные JS-бандлы будут находиться в папке `dist`.

### Использование компонентов в HTML странице

1. **Подключите React и ReactDOM в ваш HTML файл**:
    ```html
    <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>
    ```

2. **Подключите сгенерированные бандлы**:
    ```html
    <script src="path/to/your/dist/my-component.bundle.js"></script>
    ```

3. **Используйте ваши компоненты как обычные DOM элементы**:
    ```html
    <div id="component-container"></div>
    <script>
      ReactDOM.render(React.createElement(MyComponent), document.getElementById('component-container'));
    </script>
    ```

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

Использование Webpack и Babel позволит вам создавать компоненты, которые