text: "use strict";
  
  // 编写组件的方式一: 使用函数
  
  // 语义化的 HTML 会被破坏。比如当在 JSX 中使用 <div> 元素来实现 React 代码功能的时候，又或是在使用列表（<ol>， <ul> 和 <dl>）和 HTML <table> 时
  // 在这种情况下，我们应该使用 React Fragments 来组合各个组件
  // import React, { Fragment } from 'react';
  
  
  // 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素
  // 注意返回值需要是dom元素
  // 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改
  function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
  }
  
  
  // 使用es6的class来定义组件
  class WelcomeComponent extends React.Component {
      render(h) {
          return <h1>Hello, {this.props.name}</h1>;
      }
  }
  
  
  // 组件的嵌套
  function MultiWelcome() {
      return (
          // <Fragment>
          <div>
              <WelcomeComponent/>
              <WelcomeComponent/>
          </div>
          // </Fragment>
      );
  }
  
  // react自定义组件
  const welcome_container = document.getElementById('welcome');
  // const welcome_component = <WelcomeComponent name='tony' />;
  
  ReactDOM.render(
      // welcome_component,
      <MultiWelcome/>,
      welcome_container
  );
  