代码示例

<html>

<body>
  <div id="app"></div>

  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/jsx">
      function Header({title}) {
        return (<h1>{title ? title : 'Default Title'}</h1>)
      }
      function Body() {
        const name = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton']
        const [likes, setLikes] = React.useState(0)

        function handleClick() {
          setLikes(likes + 1)
        }

        return (
          <div>
            <ul>
              {
                name.map(nm => {
                  return <li key={nm}>{nm}</li>
                })
              }
            </ul>
            <button onClick={handleClick}>like {likes}</button>
          </div>
        )
      }

      function HomePage() {
        return (
          <div>
            <Header title="哈哈哈" />
            <Body />
          </div>
        )
      }

      const app = document.getElementById('app');
      ReactDOM.render(<HomePage />, app);
    </script>
</body>

</html>

components, props, and state是React基础的使用, 后面再深入学习其他内容

一. Components

React基于组件化搭建UI界面, 声明组件也比较简单, 和声明一个function类似, 需要首字母大写, 使用时用<Comxxx />

function Header({title}) {
  return (<h1>{title ? title : 'Default Title'}</h1>)
}

二. Props

由父级组件传入到子级组件内部的属性,组件内部接收props对象, 如title是从props解构而来

function Header({title}) {
  return (<h1>{title ? title : 'Default Title'}</h1>)
}

三. State

组件内部维护的状态, 使用hook(useState)声明, 声明大致如下, xxx, setXxx是被推荐的声明方式

const [likes, setLikes] = React.useState(0)

React基础三项components, props, and state

一. Components

二. Props

三. State