从后端到react框架

一、React 到底是什么？

在后端眼里，React 不像"框架"，更像一个负责 UI 的函数：

state → React → DOM

给定一份数据（state），React 帮你算出新的 DOM，并只更新变化的部分------跟数据库索引差不离，只是操作的是页面。

---

二、最小可运行环境：Hello React

后端习惯" main 方法一把梭"，前端现在也流行"零配置"。官方推出的 Vite 脚手架，3 分钟搞定。

# 1. 装 Node（>=18）
node -v
# 2. 建项目
npm create vite@latest hello-react --template react
cd hello-react
npm install
npm run dev

浏览器打开 http://localhost:5173，看到旋转的 React Logo，说明"容器"启动成功，相当于后端 Tomcat 跑起来了。

---

三、第一个组件：把 JSP 标签换成 JSX

后端写 JSP 时常写：

<div>Hello, ${user}</div>

在 React 里，把 HTML 和 JS 混写在一起叫 JSX，本质是一个语法糖，编译后等于 JavaScript 函数调用。

// src/pages/Welcome.jsx
export default function Welcome({ user }) {
  return <h1>Hello, {user}</h1>;
}

使用：

// src/App.jsx
import Welcome from './pages/Welcome';

function App() {
  const user = 'SpringBoy';   // 假装从后端接口拿的数据
  return <Welcome user={user} />;
}
export default App;

保存后页面立即热更新，比改 JSP 重启 Tomcat 爽太多。

---

四、状态管理：从 useState 开始

后端用 Map 存瞬时状态，React 用 Hook------useState。

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);   // 初始值 0
  return (
    <div>
      <p>你点了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

注意：

1. count 是只读变量，想改必须调 setCount，直接 count++ 无效；
2. 每次 setCount 都会触发"重新渲染"，相当于刷新局部页面。

---

五、副作用与接口调用：把 Ajax 装进 useEffect

后端接口写好要测试，前端得调。React 用 useEffect 发请求，相当于 @PostConstruct。

import { useEffect, useState } from 'react';
import axios from 'axios';

export default function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('/api/users')      // 替换成你的后端地址
      .then(res => setUsers(res.data))
      .catch(err => console.error(err));
  }, []);                        // 空数组表示只执行一次

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

这里踩坑：

• 忘了写 key，控制台会报警告，跟数据库缺索引一样难受；
• 不要把 async/await 直接放在 useEffect 回调上，需要包一层自执行函数。

---

六、路由：告别 XML，配置即组件

后端用 SpringMVC 的 @RequestMapping，React 用 react-router-dom@6，声明式路由：

npm i react-router-dom

// src/router/index.jsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Welcome from '../pages/Welcome';
import UserList from '../pages/UserList';

const router = createBrowserRouter([
  { path: '/', element: <Welcome user="ReactNewbie" /> },
  { path: '/users', element: <UserList /> },
]);

export default function AppRouter() {
  return <RouterProvider router={router} />;
}

然后在 main.jsx 里把根组件换成 <AppRouter />，即可实现"/users"跳转，无刷新。

---

七、与后端联调：Proxy 解决跨域

前端端口 5173，后端 8080，端口不同会触发 CORS。Vite 配置代理，5 秒钟解决：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

后端什么都不用改，前端代码里继续写 /api/xxx，完美伪装同域。

---

八、构建 & 部署

前端也有"打包"概念，运行：

npm run build

会在 dist 目录生成静态文件，相当于后端的 target/*.jar。把 dist 丢到 Nginx 里，或让运维接 CI，一键完成。