React 面向组件编程

import React from 'react';
import { render } from 'react-dom';
 
// 定义一个简单的函数组件
function Greeting({ message }) {
  return <h1>{message}</h1>;
}
 
// 定义一个类组件
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
 
  handleClick = () => {
    this.setState({ liked: !this.state.liked });
  };
 
  render() {
    const { liked } = this.state;
    return (
      <button onClick={this.handleClick}>
        You {liked ? 'like' : 'do not like'} this.
      </button>
    );
  }
}
 
// 渲染组件到页面上的某个元素中
render(
  <div>
    <Greeting message="Hello, world!" />
    <LikeButton />
  </div>,
  document.getElementById('root')
);

这段代码定义了两个React组件：一个是函数组件Greeting，另一个是类组件LikeButton。函数组件接收一个名为message的属性，并显示一个标题。类组件维护一个内部状态来跟踪用户是否点击了按钮，并相应地更新显示的文本。最后，这两个组件被渲染到页面上ID为root的元素中。这个例子展示了React中的基本组件设计和状态管理。