美丽心灵公益论坛

楼主: legs+

今天用react写了一个小小的DEMO:

[复制链接]
累计签到:534 天
连续签到:1 天

887

主题

3119

回帖

4万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
48414
 楼主| legs+ 发表于 2025-7-5 16:51:21| 字数 0 | 显示全部楼层

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
累计签到:534 天
连续签到:1 天

887

主题

3119

回帖

4万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
48414
 楼主| legs+ 发表于 2025-7-5 17:08:49| 字数 5 | 显示全部楼层
精华来了:


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
累计签到:534 天
连续签到:1 天

887

主题

3119

回帖

4万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
48414
 楼主| legs+ 发表于 2025-7-6 22:08:20| 字数 1,512 | 显示全部楼层



闲来无事,用React的Router写了一个Demo


  1. import React from "react";
  2. import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

  3. // 首页组件
  4. function Home() {
  5.   return <h2 style={{ margin: 0 }}>首页</h2>;
  6. }

  7. // 关于我们组件
  8. function About() {
  9.   return <h2 style={{ margin: 0 }}>关于我们</h2>;
  10. }

  11. // 主应用组件
  12. function App() {
  13.   return (
  14.     <div
  15.       style={{
  16.         minHeight: "100vh",
  17.         display: "flex",
  18.         flexDirection: "column",
  19.         alignItems: "center",
  20.         justifyContent: "center",
  21.         background: "#f5f7fa",
  22.       }}
  23.     >
  24.       <Router>
  25.         <nav
  26.           style={{
  27.             marginBottom: "2rem",
  28.             background: "#fff",
  29.             padding: "12px 32px",
  30.             borderRadius: "12px",
  31.             boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
  32.             display: "flex",
  33.             gap: "1.5rem",
  34.             fontSize: "1.1rem",
  35.             fontWeight: 500,
  36.           }}
  37.         >
  38.           <Link to="/" style={{ textDecoration: "none", color: "#222" }}>
  39.             首页
  40.           </Link>
  41.           <span style={{ color: "#ccc" }}>|</span>
  42.           <Link to="/about" style={{ textDecoration: "none", color: "#222" }}>
  43.             关于
  44.           </Link>
  45.         </nav>

  46.         <div
  47.           style={{
  48.             background: "#fff",
  49.             padding: "32px 48px",
  50.             borderRadius: "16px",
  51.             boxShadow: "0 4px 24px rgba(0,0,0,0.10)",
  52.             minWidth: "260px",
  53.             textAlign: "center",
  54.           }}
  55.         >
  56.           <Routes>
  57.             <Route path="/" element={<Home />} />
  58.             <Route path="/about" element={<About />} />
  59.           </Routes>
  60.         </div>
  61.       </Router>
  62.     </div>
  63.   );
  64. }

  65. export default App;
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
累计签到:534 天
连续签到:1 天

887

主题

3119

回帖

4万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
48414
 楼主| legs+ 发表于 2025-7-8 17:47:01| 字数 123 | 显示全部楼层
今天,我在使用阿里的 Umi 框架的时候,突然发现一个问题

npm install umi --save-dev 中 save 和 dev 是什么意思

于是,我就问通义,得出的结论如下



很值得深思

一个是生产依赖,一个是开发依赖

结论,差之毫厘,谬以千里

很值得注意,这里留个爪

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
累计签到:534 天
连续签到:1 天

887

主题

3119

回帖

4万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
48414
 楼主| legs+ 发表于 2025-7-8 17:51:04| 字数 28 | 显示全部楼层
顺便,也问了一下 umi 框架的情况,及其与 react 的关系



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
累计签到:534 天
连续签到:1 天

887

主题

3119

回帖

4万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
48414
 楼主| legs+ 发表于 2025-7-10 07:27:25| 字数 101 | 显示全部楼层
今天,运行了一下阿里的umi(米)框架:





如果说react是一个JS 库,那么umi就是react framework


集成了路由、构建、部署、Mock、代理等一整套解决方案,支持现代 Web 开发所需的各种功能。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|免责及版权声明|关于|本网站由【又拍云】提供cdn加速/云存储服务|美丽心灵公益论坛

GMT+8, 2025-8-10 06:55 , Processed in 0.174084 second(s), 21 queries .

Powered by Discuz! X3.4

!copyright!

快速回复 返回顶部 返回列表