简单的react源码实现01

// 简化版的 React.createElement 函数
const React = {
  createElement: (tag, props, ...children) => {
    if (typeof tag === 'function') {
      return tag(props);
    }
    const element = { tag, props: { ...props, children } };
    return element;
  }
};

// 简化版的 ReactDOM.render 函数
const ReactDOM = {
  render: (element, container) => {
    if (['string', 'number'].includes(typeof element)) {
      container.appendChild(document.createTextNode(String(element)));
      return;
    }

    const actualElement = document.createElement(element.tag);

    if (element.props) {
      Object.keys(element.props)
        .filter(p => p !== 'children')
        .forEach(p => actualElement[p] = element.props[p]);
    }

    if (element.props.children) {
      element.props.children.forEach(child => ReactDOM.render(child, actualElement));
    }

    container.appendChild(actualElement);
  }
};

// 使用简化版的 React 和 ReactDOM
const App = () => {
  return React.createElement('div', null,
    React.createElement('h1', null, 'Hello, React!'),
    React.createElement('p', null, 'This is a simple React implementation.')
  );
};

// 渲染 App 组件到 #root 容器
ReactDOM.render(React.createElement(App), document.getElementById('root'));