建立公司网站时什么是重要的,模拟建筑,有没有接做网站私活的平台,网页设计实验报告需求分析文章目录 项目地址一、构建项目1.1 使用vite构建项目1.2 所需插件二、Router2.1 安装router2.2 创建路由规则2.3 创建导航栏2.3.1 添加样式文件2.3.2 添加导航栏组件2.3.3 给每个页面添加Menu导航栏2.4 通过路由给页面传值三、Hooks3.1 useRef3.2 useRef操作DOM元素3.3 useRef进… 文章目录 项目地址一、构建项目1.1 使用vite构建项目1.2 所需插件 二、Router2.1 安装router2.2 创建路由规则2.3 创建导航栏2.3.1 添加样式文件2.3.2 添加导航栏组件2.3.3 给每个页面添加Menu导航栏 2.4 通过路由给页面传值 三、Hooks3.1 useRef3.2 useRef操作DOM元素3.3 useRef进行数据缓存 3.2 useState3.2.1 简单的待办事项3.2.2 表单提交 3.2 useEffect 项目地址
教程作者：教程地址：代码仓库地址：所用到的框架和插件：dbt
airflow一、构建项目
1.1 使用vite构建项目
创建react程序npm create vite 进入到项目内部，安装npmnpm install启动项目dev环境npm run dev1.2 所需插件 二、Router
2.1 安装router
安装node 18对应的Routernpm install react-router@6
安装成功后package.json会出现 "dependencies": {"react": "^18.3.1","react-dom": "^18.3.1","react-router-dom": "^6.28.1"},2.2 创建路由规则
App.jsx里创建路由规则，实现功能： 输入栏里输入地址，跳转到指定的Page里当输入有误时，跳转到NotFoundPage里 import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import ContactPage from "./pages/ContactPage";
import NotFoundPage from "./pages/NotFoundPage";function App() {return (divBrowserRouterRoutesRoute path="/" element={HomePage/HomePage} /Route path="/about" element={AboutPage /} /Route path="/contact" element={ContactPage /} /Route path="*" element={NotFoundPage /} //Routes/BrowserRouter/div);
}export default App;
2.3 创建导航栏
创建导航栏，实现功能有： 点击页面里的导航栏，实现不跳转到其他页面给点击过的导航栏，添加一个绿色的样式 2.3.1 添加样式文件
在src/assets/css/style.css添加导航栏点击后的样式.active-item {color: green;
}.passive-item {color: red;
}2.3.2 添加导航栏组件
添加导航栏组件，src/component/Menu.jsx2.3.3 给每个页面添加Menu导航栏
给每个使用到Menu导航组件的页面里添加该组件2.4 通过路由给页面传值
在路由里添加参数名称2. About页面接收路由传递的参数，并且将参数使用在页面里
import React from "react";
import Menu from "../component/Menu";
import { useParams } from "react-router-dom";export default AboutPage() {let { id, name } = useParams();return (divMenu /h1AboutPage/h1p
