框架 · 2013 年发布
React 是用组件构建用户界面的 JavaScript 库：你声明界面应有的样子，React 只更新发生变化的部分。
React 是由 Meta（当时的 Facebook）创建、于 2013 年开源的用户界面库。它把界面拆分成小的函数组件，每个组件根据接收到的 props 和自身持有的状态（state），用 JSX 描述自己应当呈现的样子。数据变化时，React 会把新结果与上一次比较，只把真正不同的部分应用到 DOM 上。
React 在按钮、表单和列表众多的交互式界面中尤其擅长。它广泛用于单页应用、数据看板、后台管理界面和设计系统；用 Next.js 等框架构建服务端渲染网站，或用 React Native 开发移动应用时，也沿用同一套思维方式。路由、数据请求、测试工具等生态非常丰富，可以按需挑选组合。
初学者可以先跟着 react.dev 上的快速入门和井字棋教程动手练习。官方文档建议新产品使用 Next.js 等框架，但学习阶段用 Vite 创建的简单项目更容易看清结构。先掌握数组方法、解构、模块等现代 JavaScript 语法，再学 JSX 和 Hooks 会轻松很多。
把界面拆成独立的函数组件，通过 props 传递数据，再把小部件组合成完整页面。
不必手动修改 DOM，只需用 JSX 写出当前状态对应的结果，React 会只更新变化的部分。
useState、useEffect、useRef、useContext 等 Hooks 让你在普通函数里处理状态、副作用、DOM 引用和共享数据。
结合 Next.js、React Router、TanStack Query、React Native 等成熟工具，从 Web 到移动端都能用同样的方式开发。
React 的开发工具运行在 Node.js 上。从 nodejs.org 安装 LTS 版本，然后确认 node 和 npm 能显示版本号。
node --version && npm --version使用 Vite 的 react-ts 模板创建一个使用 TypeScript 的 React 项目。只想用 JavaScript 时，把模板名换成 react。
npm create vite@latest my-app -- --template react-ts进入项目文件夹，安装依赖并启动开发服务器。在浏览器中打开终端显示的地址（默认是 http://localhost:5173）。
cd my-app && npm install && npm run devsrc/App.tsx 中的 App 函数是一个组件，它返回描述界面内容的 JSX。它用 useState Hook 创建 count 状态，点击按钮时 setCount 会修改这个值。状态改变后，React 会重新调用 App，并只更新屏幕上的数字。开发服务器运行期间，每次保存文件浏览器都会立即刷新。
src/App.tsx
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
<main>
<h1>Hello, React!</h1>
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
</main>
);
}
npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev共六章，带你从安装一步步了解 React 的核心概念。
在这里提问、分享经验，交流关于 React 的看法。
还没有讨论。来发起第一个吧。
0 条评论
登录 · 登录后即可发表评论。