第一次搭 React，照着一篇两年前的文敲 npx create-react-app my-app，装完 node_modules 两百多兆，启动还要等半分钟。屏幕上的警告一串，说这个脚手架已经不推荐了。

现在更顺的是 Vite。npm create vite@latest 加一个模板参数，几秒就起，热更新也快。React 19 之后官方文档里的起步页也换成了这条路。

三步跑起来

npm create vite@latest my-app -- --template react

注意中间那两个短横线，少了它 npm 会把模板名当成自己的参数吃掉，最后装出来的还是一个空项目，白等几分钟。

然后进目录 npm install，跑 npm run dev，浏览器打开 5173。改 src/App.jsx 里一个字，页面立刻变，这就是热更新。

先写组件，别碰路由

React 的核心就两件事：组件是函数，返回值是 JSX。写一个函数，首字母大写，返回一段长得像 HTML 的东西，就能当标签用。

props 是入参，从父组件传下来，只读不改。要改状态用 useState，它返回一个值和改这个值的函数，只有调用那个函数才会触发重渲染。直接给变量赋值，页面不会动，这是新手最容易卡住的地方。

JSX 里几个容易错的点

  • class 要写成 className，for 写成 htmlFor
  • 表达式用花括号包，注释也别写在容器外面
  • 列表必须有 key，别用下标，删一项就乱
  • 条件渲染用三元或者逻辑与，别把 if 语句直接塞进去

还有一条：组件名小写开头，React 会把它当普通 HTML 标签处理，不报错也不渲染，排查起来能花掉半小时。

什么时候再往下学

useEffect 处理副作用，依赖数组写不对会一直重复请求；状态多了上 useReducer；跨层传值再考虑 Context。路由、请求封装、状态管理库，等页面写到三个以上再说。

一句话：先跑通一个组件加一个 useState，比先看十篇长文有用。工具链换了一轮又一轮，函数返回 JSX 这件事几年没变。