前言
由于C#用的真的太舒服了，导致我其它语言其它框架都只是浅浅的了解一下，没写过多少代码，就偶尔用下Python。现在AI时代其实熟练了一门语言，去学习其它语言其它框架其实是很方便的，AI就是最好的老师，基础知识你都不需要用很好的AI，国产的glm-4.6、kimi k2就够了。
C#是我的舒适区，WPF也是我的舒适区，现在尝试跳出舒适区多接触一些新语言新框架。以前的学习方式可能是看官方文档，再找找博客或者看视频学习，现在的学习方式我觉得自己先稍微过一下官方文档，了解一些基础概念，然后就配合AI上手写你想实现的东西，在实现的过程中学习。
AI时代写博客方式可能也有所改变，更多人想知道的其实是你实现的过程，而不是具体的知识点，具体的知识点，普通人很难比得过AI。
过程
React介绍
React 是一个用于构建用户界面的 JavaScript 库。
声明式：React 使创建交互式 UI 变得毫不费力。为应用中的每个状态设计简单的视图，当数据变化时，React 将高效地更新和渲染正确的组件。声明式视图使您的代码更具可预测性，更易于理解，更易于调试。
组件化：构建封装的组件来管理它们自己的状态，然后将它们组合起来构建复杂的 UI。由于组件逻辑是用 JavaScript 编写而不是模板，因此您可以轻松地在应用程序中传递丰富数据，并将状态与 DOM 分离。
学习一次，随处编写：我们不会对您技术栈的其他部分做出假设，因此您可以在不重写现有代码的情况下使用 React 开发新功能。React 也可以使用 Node 在服务器端渲染，并使用 React Native 开发移动应用。
GitHub地址：https://github.com/facebook/react?tab=readme-ov-file
官方文档：https://react.dev/learn
先大致过一下官网文档内容，了解一下React的基础概念。
然后先使用Vite构建一个React应用。
Vite介绍
Vite（法语中的“快速”，发音为 /vit/ ，类似“veet”）是一种新型的前端构建工具，极大地提升了前端开发体验。它主要由两部分组成：
一个开发服务器，通过原生 ES 模块提供您的源文件，并具备丰富的内置功能和惊人的快速热模块替换 (HMR)。
用于打包代码的构建命令，使用 Rollup 预先配置，以输出针对生产环境高度优化的静态资源。
此外，Vite 通过其插件 API 和 JavaScript API 高度可扩展，并完全支持类型定义。
GitHub地址：https://github.com/vitejs/vite
构建成功后，跟你的AI助手（我用的是Kilo Code）说：“我想创建一个左边是菜单，右边是内容的导航布局应用”。
AI就帮你写了一个，先看下AI写的效果，如果是自己想要的，那就停下来学习一下AI是怎么写的。
在终端中输入npm run dev运行这个React应用查看效果：
先不用管为什么首页这么不搭，首页被我改过了，反正现在是AI已经帮我完成了我们想要实现的一个效果，现在可以停下来学习一下AI是如何实现的了。
AI时代好像总有一种实现焦虑，想要叫AI给我们干很多事情，让AI实现自己的想法，这确实很美好，但是我突然意识到如果自己不懂的话，很难驾驭好AI，而且总给我一种很虚的感觉，写的再多再好也不是自己的，都是AI的，自己啥也不懂，没有之前自己写代码那种踏实的感觉。
AI时代，自己越来越觉得慢就是快，慢慢来，不要着急，技术是永远也学不完的，与其让AI实现一个自己啥也不懂的，只是可以运行的程序，不如先慢下来，在实现中学习，这样对自己成长也有帮助，只有自己真正懂的了才是自己的，不然都只是AI的。
现在来看看AI是如何帮我们实现这个导航应用的。
首先AI使用了react-router，我们先来了解一下。
react-router介绍
React Router 是一个用于 React 的多策略路由器，弥合了从 React 18 到 React 19 的差距。你可以将其作为 React 框架最大程度地使用，也可以将其作为库最小程度地使用，并结合自己的架构。
GitHub地址：https://github.com/remix-run/react-router
先看项目结构：
首先写了不同的页面与样式，做了一个Sidebar组件：
import { Link, useLocation } from 'react-router-dom';
import './Sidebar.css';const Sidebar = () => {const location = useLocation();const menuItems = [{ path: '/', label: '聊天', icon: '🏠' },{ path: '/about', label: '关于我们', icon: '📄' },{ path: '/products', label: '产品', icon: '📦' },{ path: '/contact', label: '联系方式', icon: '📞' },{ path: '/settings', label: '设置', icon: '⚙️' }];return (<div className="sidebar"><div className="sidebar-header"><h2>Agent学习</h2></div><nav className="sidebar-nav"><ul className="menu-list">{menuItems.map((item) => (<li key={item.path} className="menu-item"><Linkto={item.path}className={`menu-link ${location.pathname === item.path ? 'active' : ''}`}><span className="menu-icon">{item.icon}</span><span className="menu-label">{item.label}</span></Link></li>))}</ul></nav></div>);
};export default Sidebar;
在这个组件中，主要使用了Link与useLocation。
Link 是 React Router 提供的导航组件，用于在应用内部进行页面跳转。
to 属性：指定目标路径，如 '/'、'/about' 等。
useLocation() 是 React Router 提供的自定义 Hook。
返回值：包含当前路由信息的 location 对象
主要属性：
location.pathname：当前URL的路径部分（如 /about)
location.search：查询字符串
location.hash：URL的hash部分
工作流程：
用户点击菜单项 → Link 组件触发路由跳转
页面更新 → useLocation() 获取新的路径信息
组件重新渲染 → 根据新路径设置正确的 active 类名
CSS样式应用 → 当前页面对应的菜单项高亮显示
现在再来看看App.tsx：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Sidebar from './components/Sidebar';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import Contact from './pages/Contact';
import Settings from './pages/Settings';
import './App.css';function App() {return (<Router><div className="app"><Sidebar /><main className="main-content"><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/products" element={<Products />} /><Route path="/contact" element={<Contact />} /><Route path="/settings" element={<Settings />} /></Routes></main></div></Router>);
}export default App;
使用到了BrowserRouter、Routes与Route。
BrowserRouter (重命名为 Router)
这是 React Router 中最常用的路由器类型，它使用 HTML5 的 history API 来保持 UI 和 URL 同步，重命名为 Router 是为了代码简洁，是常见的做法。
Routes
用于包裹一组路由规则，是 React Router v6+ 中的新组件，它会根据当前 URL 匹配最合适的路由并渲染对应的组件。
Route
定义单个路由规则，包含路径和要渲染的组件，使用 path 属性指定 URL 路径，element 属性指定要渲染的组件。
工作原理
Router 包裹整个应用，启用路由功能
Sidebar 组件中使用 Link 组件创建导航链接
Routes 作为路由容器，内部包含多个 Route 定义
当用户点击 Sidebar 中的链接时，URL 会改变，Routes 会根据新的 URL 匹配对应的 Route 并渲染相应组件
这样就实现了一个简单的React导航应用了。
