前言

由于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">

              <Link

                to={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 属性指定要渲染的组件。