Зачем нужен HTML для создания Web приложений?

Зачем React делится на пакеты React и ReactDOM

Это архитектурное решение для разделения ответственности и гибкости использования.

История: раньше было всё вместе

// React v0.11 (2014)
import React from 'react';
React.render(<App />, document.getElementById('root'));
// Всё было в одном пакете

Разделение (React v0.12+)

// React - компоненты и логика
import React, { Component, useState } from 'react';

// ReactDOM - рендерит в DOM
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

Зачем нужно разделение

1. Разные платформы

// Веб браузер
import ReactDOM from 'react-dom';

// Native для iOS/Android
import React from 'react-native';

// VR приложения
import React from 'react-vr';

// Игры
import React from 'react-game';

// Одна логика компонентов (React), разные рендерры

2. Архитектура

┌─────────────────────────────────┐
│  React Core                     │
│  - Компоненты                   │
│  - Hooks                        │
│  - State management             │
│  - Virtual DOM logic            │
└─────────────────────────────────┘
           |
     ┌─────┴─────┐
     |           |
     v           v
┌─────────┐  ┌────────────┐
│ReactDOM │  │React       │
│(браузер)│  │Native      │
└─────────┘  │(мобиль)    │
             └────────────┘

3. Размер бандла

// Если тебе нужна только логика компонентов (в Node.js)
import React from 'react';
// Не нужно загружать весь ReactDOM код!

// ReactDOM содержит:
// - Управление DOM
// - Event handling
// - Браузерные API
// - Стили и CSS
// = ~65KB

Примеры использования

В браузере (веб)

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

На сервере (Node.js SSR)

// server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const html = ReactDOMServer.renderToString(<App />);
res.send(html);
// Нет ReactDOM нужен на сервере!

В React Native (мобиль)

// App.js
import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello Mobile</Text>
    </View>
  );
}
// Используем React, но рендерим в Native элементы

Мини игра (Canvas)

// game.js
import React, { useState, useEffect } from 'react';

function GameComponent() {
  const [score, setScore] = useState(0);
  
  // Логика компонента
  useEffect(() => {
    // Рисуем на Canvas (не используя ReactDOM)
  }, []);
  
  return null; // Ничего не рендерим в DOM
}

Преимущества разделения

✓ Код React логики не привязан к браузеру
✓ Можно использовать на разных платформах
✓ Меньше размер бандла для специфичных случаев
✓ Легче тестировать логику без DOM
✓ SSR работает эффективнее
✓ Возможность иметь разные рендеры

Технический стек

React (компоненты, логика)
  ↓
Reconciliation (сравнение деревьев)
  ↓
Diff algorithm (выявление изменений)
  ↓
Renderer (вывод на конкретную платформу)
  ├─ ReactDOM (браузер)
  ├─ React Native (мобиль)
  ├─ React VR (VR)
  └─ Custom renderer (свой)

Создание собственного рендерера

import React from 'react';
import { createRoot } from 'react-reconciler';

// Твой кастомный рендерер
const MyRenderer = createRoot(hostConfig);

MyRenderer.render(<App />);
// Рендерит на свою платформу!

Заключение

React разделен на:

• React - логика компонентов (платформо-независимый)
• ReactDOM - рендерит в браузер
• ReactNative - рендерит на мобиль
• Др. рендеры - специфичные платформы

Это позволяет использовать одну логику компонентов на разных платформах с разными рендерерами.