react基础语法

1. JSX

JSX 是一种 JavaScript 的语法扩展，可以在 JavaScript 中直接编写 HTML 标记，并且支持嵌套和组件形式的表示：

const element = <h1>Hello, world!</h1>;

2. 元素

React 的 UI 都是基于元素来组织的，一个元素就是一段描述界面的对象，它可以是简单的文本标记，也可以是复杂的组合元素：

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
);

3. 组件

组件是 React 中最基本的构建块，所有的 UI 都是由组件构成的，可以使用函数或类来定义组件：

// 使用函数定义组件
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用类定义组件
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

4. 状态（State）

状态是组件中的一个重要概念，它可以决定一个组件在不同时间点所呈现的内容，并且可以对这些内容进行操作。在类组件中，状态可以使用 state 属性来定义和操作：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

5. 事件处理

React 使用类似 HTML 的方式来处理事件，例如 onClick、onMouseDown 等，它们都是需要绑定到相应的函数上进行处理：

class Button extends React.Component {
  handleClick = () => {
    console.log('Button clicked!');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}