React 基础教程
React 是一个用于构建用户界面的 JavaScript 库。它允许我们使用组件化的方式来构建界面，使得代码更加模块化和可维护。
安装 React
首先，您需要安装 Node.js 和 npm（Node.js 包管理器）。安装完成后，可以使用以下命令全局安装 React：
npm install -g create-react-app
创建第一个 React 应用
使用 create-react-app 命令可以快速创建一个 React 应用：
create-react-app my-app
进入项目目录：
cd my-app
启动开发服务器：
npm start
此时，您应该能在浏览器中看到 React 应用的运行结果。
组件化
React 的核心思想是组件化。组件是 React 应用的最小可复用单元。以下是一个简单的组件示例：
import React from 'react';
function HelloWorld() {
return <h1>Hello, world!</h1>;
}
export default HelloWorld;
在上面的示例中，HelloWorld 是一个组件，它返回一个包含文本的 <h1> 标签。
JSX
JSX 是一种类似于 HTML 的语法扩展，用于描述 React 应用的结构。在 JSX 中，您可以使用标签来创建组件，并且可以像使用 HTML 标签一样使用属性。
以下是一个使用 JSX 创建的组件示例：
import React from 'react';
function HelloWorld() {
return <h1 style={{ color: 'red' }}>Hello, world!</h1>;
}
export default HelloWorld;
在上面的示例中，HelloWorld 组件使用了 style 属性来设置文本颜色为红色。
事件处理
React 组件可以通过 onClick、onchange 等事件处理函数来处理用户交互。以下是一个简单的示例：
import React from 'react';
function ClickCounter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default ClickCounter;
在上面的示例中，ClickCounter 组件有一个按钮，每次点击按钮时，都会更新 count 状态的值。
组件生命周期
React 组件在其生命周期中会经历不同的阶段。以下是一些常见的生命周期方法：
componentDidMount: 组件挂载后执行componentDidUpdate: 组件更新后执行componentWillUnmount: 组件卸载前执行
更多关于组件生命周期的信息，请参考官方文档。