学校网站建设汇报ppt广州做网站服务

学校网站建设汇报ppt,广州做网站服务,wordpress如何生成网站地图,WordPress织梦哪个快前言由于C#用的真的太舒服了#xff0c;导致我其它语言其它框架都只是浅浅的了解一下#xff0c;没写过多少代码#xff0c;就偶尔用下Python。现在AI时代其实熟练了一门语言#xff0c;去学习其它语言其它框架其实是很方便的#xff0c;AI就是最好的老师#xff0c;基础…前言由于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?tabreadme-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 classNamesidebardiv classNamesidebar-headerh2Agent学习/h2/divnav classNamesidebar-navul classNamemenu-list{menuItems.map((item) (li key{item.path} classNamemenu-itemLinkto{item.path}className{menu-link ${location.pathname item.path ? active : }}span classNamemenu-icon{item.icon}/spanspan classNamemenu-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.hashURL的hash部分工作流程用户点击菜单项 → Link 组件触发路由跳转页面更新 → useLocation() 获取新的路径信息组件重新渲染 → 根据新路径设置正确的 active 类名CSS样式应用 → 当前页面对应的菜单项高亮显示现在再来看看App.tsximport { 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 (Routerdiv classNameappSidebar /main classNamemain-contentRoutesRoute 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 属性指定要渲染的组件。