React.js是用于构建用户界面的JavaScript库，1. 使用Create React App初始化项目；2. 通过函数组件和JSX编写UI；3. 用useState管理状态；4. 用useEffect处理副作用；5. 通过props实现组件通信。
React.js 是一个用于构建用户界面的 JavaScript 库，尤其适合构建单页应用。它由 Facebook 开发并维护，现在被广泛用于前端开发。下面是一个简洁实用的 React 入门教程，帮助你快速上手。
1. 环境准备与项目初始化
要开始使用 React，最简单的方式是使用 Create React App，它能帮你快速搭建开发环境。
打开终端，运行以下命令：
npx create-react-app my-appcd my-app
npm start
执行后，React 项目会在 http://localhost:3000 启动，默认页面会显示 React 的欢迎界面。
2. 组件基础：函数组件与 JSX
React 的核心是组件。现代 React 推荐使用函数组件和 Hook。
示例：创建一个简单的函数组件
function Welcome(props) {return
Hello, {props.name}
;}
这个组件使用了 JSX —— 一种在 JavaScript 中写 HTML 的语法扩展。JSX 让 UI 结构更直观。
在 App.js 中使用它：
function App() {return (
}
3. 状态管理：使用 useState Hook
组件常常需要管理自己的数据状态。React 提供了 useState Hook 来实现这一点。
示例：一个计数器组件
import { useState } from 'react';function Counter() {
const [count, setCount] = useState(0);
return ();
}
这里，useState 返回当前状态和更新状态的函数。每次点击按钮，状态更新，UI 自动刷新。
4. 处理副作用：useEffect Hook
很多组件需要处理数据获取、订阅或手动操作 DOM。这些称为“副作用”。React 使用 useEffect 来管理它们。
示例：模拟加载用户数据
import { useState, useEffect } from 'react';function UserProfile({userId}) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/{userId}`)
.then(res => res.json())
.then(data => setUser(data));
}, [userId]); // 依赖数组，仅在 userId 变化时重新执行
return
}
useEffect 第二个参数是依赖数组，控制何时重新执行副作用。
5. 组件通信：Props 和状态提升
父组件通过 props 向子组件传递数据，子组件通过回调函数向父组件传递信息。
示例：父子组件交互
function Parent() {const [message, setMessage] = useState('');
return (
{message}
}
function Child({ onSend }) {
return ;
}
这种模式称为“状态提升”，有助于在多个组件间共享状态逻辑。
基本上就这些。掌握组件、JSX、useState 和 useEffect，你就已经可以构建大多数 React 应用了。随着深入，可以学习 useContext、useReducer、自定义 Hook 和路由（如 React Router），逐步构建复杂应用。不复杂但容易忽略细节，多写多练最有效。
