基础组件示例

2025年11月29日 作者:管理员

示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>React 基础组件</title>
  <script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function Welcome() {
      return <h1>Hello, React!</h1>;
    }

    function App() {
      return (
        <div>
          <Welcome />
          <p>这是一个简单的 React 组件示例</p>
        </div>
      );
    }

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