框架集成：02 HTML与React集成 - 详细教程与实战指南

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- JSX代码需要指定type="text/babel" -->
<script type="text/babel">
  const element = <h1>Hello, React!</h1>;
</script>

React.createElement(
  type,        // 标签名(如'div')、组件函数或类
  props,       // 属性对象(如{className: 'active', id: 'main'})
  ...children  // 子元素(字符串、元素或数组)
)

import ReactDOM from 'react-dom';

// 旧方式：直接render
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

import { createRoot } from 'react-dom/client';

// 新方式：先创建root，再render
const root = createRoot(document.getElementById('root'));
root.render(<App />);

// 卸载
root.unmount();

// React管理的DOM区域
<div id="root">
  <!-- 这里的内容由React完全管理 -->
  <!-- 不要直接操作这里的DOM -->
</div>

// React不管理的DOM区域
<header id="site-header">
  <!-- 这里的内容React不管，可以自由操作 -->
</header>

const { useState } = React;

// TodoItem 子组件
function TodoItem(props) {
  return React.createElement('li', {
    className: 'todo-item' + (props.done ? ' done' : '')
  },
    React.createElement('div', {
      className: 'todo-checkbox' + (props.done ? ' checked' : ''),
      onClick: function() { props.onToggle(props.id); }
    }),
    React.createElement('span', { className: 'todo-text' }, props.text),
    React.createElement('button', {
      className: 'todo-delete',
      onClick: function() { props.onDelete(props.id); }
    }, '\u00d7')
  );
}

// TodoApp 主组件
function TodoApp() {
  var [todos, setTodos] = useState([
    { id: 1, text: '学习React基础', done: false },
    { id: 2, text: '理解createElement', done: true },
    { id: 3, text: '掌握渲染流程', done: false }
  ]);
  var [inputText, setInputText] = useState('');
  var [filter, setFilter] = useState('all');

  function addTodo() {
    var text = inputText.trim();
    if (!text) return;
    setTodos(function(prev) {
      return prev.concat([{ id: Date.now(), text: text, done: false }]);
    });
    setInputText('');
  }

  function toggleTodo(id) {
    setTodos(function(prev) {
      return prev.map(function(t) {
        return t.id === id ? Object.assign({}, t, { done: !t.done }) : t;
      });
    });
  }

  function deleteTodo(id) {
    setTodos(function(prev) {
      return prev.filter(function(t) { return t.id !== id; });
    });
  }

  // 渲染待办列表...
}

// 不推荐：直接操作React管理的DOM
function MyComponent() {
  const ref = useRef();
  const handleClick = () => {
    // 直接操作DOM，破坏React的数据流
    ref.current.style.color = 'red';
  };
}

// 推荐：通过状态驱动UI更新
function MyComponent() {
  const [isActive, setIsActive] = useState(false);
  return React.createElement('div', {
    style: { color: isActive ? 'red' : 'black' },
    onClick: () => setIsActive(true)
  }, '点击变红');
}

// 不推荐：缺少key的列表渲染
users.map(function(user) {
  return React.createElement('li', null, user.name);
});

// 推荐：使用唯一key
users.map(function(user) {
  return React.createElement('li', { key: user.id }, user.name);
});

// 不推荐：使用index作为key（当列表会变化时）
items.map(function(item, index) {
  return React.createElement('li', { key: index }, item.text);
});

// 推荐：使用稳定的唯一标识
items.map(function(item) {
  return React.createElement('li', { key: item.id }, item.text);
});