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>; } }
