React学习笔记(4.0)

news/2024/10/3 21:40:20/

json-server实现数据Mock

1.项目中安装json-server

npm i -D json-server

2.准备一个json文件

3.添加启动命令【package.json中配置】

"server":"json-server ./server/data.json --port 8888"

该命令中,路径就是自己创建的json文件路径,端口也可以自定义,不要写默认其他服务的保留端口即可。

4.进行接口访问

 

 React使用redux

React使用redux,官方要求安装两个插件--Redux Toolkit 和react-redux

命令如下:

npm i @reduxjs/toolkit react-redux

在项目中,一般都放在store文件夹中,对应的模块放入modules文件夹里,对应的目录结构如下

index.tsx文件内容

import {configureStore} from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore"
import channelReducer from "./modules/channelStore"
import foodsReducer from "./modules/takeaway"
const store=configureStore({reducer: {counter:counterReducer,channel:channelReducer,foods:foodsReducer},})export default store

 然后再对应的modules文件夹里书写具体配置内容

以counterStore举例

//第一步:调用@reduxjs/tookit的createSlice方法
import {createSlice} from '@reduxjs/tookit'const counterStore=createSlice({
//给仓库起的名字name: 'counter',
//就是状态,类似与vux和pinia的StateinitialState: {count2:0},
//同步方法的书写都在这里//编写修改数据的方法 同步方法,支持直接修改reducers: {increment(state:any) {return state.count2 + 1;},decrement(state:any) {return state.count2 - 1;},addToNum(state:any,action:any){state.count=action.payload}}
})//结构出来actionCreater函数
const { increment,decrement,addToNum}=counterStore.actions
//获取reducer
const reducer=counterStore.reducer//导出对应的方法
export{ increment,decrement,addToNum}
//已默认导出的方式导出export default reducer;

这里只有同步的代码,如果有异步的代码,需要借助dispatch()方法,

带有异步方法的channelStore

import {createSlice} from "@reduxjs/toolkit"const channelStore=createSlice({name: "channel",//数据状态StateinitialState: {channelList: []},reducers: {//同步修改方法setChannels(state:any, action:any) {state.channelList = action.payload}}
})//结构出actionCreater函数
const {setChannels}=channelStore.actions
//异步请求部分
const fetchChannelList=()=>{return async(dispatch:any)=>{const res=await axios.get('http://localhost:8080')dispatch(setChannels(res.data.data.channels))}
}export {fetchChannelList}const reducer=channelStore.reducerexport default reducer

此时还需要再主文件中进行注册,才能使用

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import {Provider} from 'react-redux'
import store from './store/index.tsx'
// import './index.css'createRoot(document.getElementById('root')!).render(<StrictMode><Provider store={store}><App /></Provider></StrictMode>,
)

来到组件中使用

import {useSelector,useDispatch} from 'react-redux'
//导入actionCreater
import {increment,decrement,addToNum} from './store/modules/counterStore'
import {fetchChannelList} from './store/modules/channelStore'const App = () => {const {count2}=useSelector((state:any)=>state.counter)const {channelList}=useSelector((state:any)=>state.channel)const dispatch=useDispatch()//使用useEffect触发异步请求执行useEffect(()=>{dispatch(fetchChannelList())},[dispatch])let list=['1','2','3'];// for(let i=0;i<list.length;i++){//   list[i]=<li>{list[i]}</li>// }const myClass = ['box1', 'box2']const myClass2 = classNames({box1:true,box2:true,[style.box5]:true})//useState实现一个计数器按钮const [count,setCount] = React.useState(0)const handleClick4=()=>{setCount(count+1)console.log('click',count);}const [form ,setForm]=useState({name:'mez',age:18})const handleClick5=()=>{setForm({...form,name:'jack'})}// 1.声明一个React状态const [value,setValue]=useState('')//2.核心绑定流程//①通过value属性绑定React状态//②绑定onChange事件,通过事件参数e拿到输入框最新的值,反向修改到React状态
// const setValue=()=>{// }//dom生成之后才可用--useRefconst inputRef=useRef<HTMLInputElement>(null)
const showDom=()=>{console.log(inputRef.current);console.log(inputRef.current?.value);}
//获取foodsList渲染数据列表
//useSelectorreturn (<><div><div className={myClass.join(' ')}>App</div><div style={{color:"purple",fontWeight:900}}>App2</div><div className={myClass2}> hello world!</div><button onClick={handleClick}>click me</button><button onClick={handleClick2(123)}>click me2</button><button onClick={(e)=>handleClick3(456,e)}>click me3</button><input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />{list.map((item,index) => <li key={index}>{item}</li>)}<Button></Button><button onClick={handleClick4}>加一</button><button onClick={handleClick5}>修改对象</button><div>{count}--{form.name}</div><div className={classNames('box3',{box2:1===1})}>我是使用classnames的文本</div>{/* <input type="text" value={value}onChange={(e)=>setValue(e.target.value)}ref={inputRef}/> */}<input type="text" value={value}onChange={(e)=>setValue(e.target.value)}ref={inputRef}/><button onClick={showDom}>获取dom</button></div><div>{count2}</div><button onClick={()=>dispatch(decrement())}>-</button><button onClick={()=>dispatch(increment())}>+</button><button onClick={()=>dispatch(addToNum(10))}>add to 10</button><ul>{channelList.map((item:any)=><li key={item.id}>{item.name}</li>)}</ul></>)
}export default App

汇总

 

使用CRA初始化项目环境

npx create-react-app projectName

 运行项目:npm run start【不同的构建工具使用的命令也有所不同,具体可以看到package.json对应的脚本启动命令】

 

 常用的目录结构及其作用

 

 使用gitee管理项目

1.在gitee上初始化一个空项目仓库

按照它的提示进行仓库初始化

  

2.把远程仓库与本地仓库关联

这时候会有一个认证,需要验证你的gitee用户名和密码,输入正确就可以,要是输入错误下一次还是走这个错误的认证,需要在本机去删除那个认证标识,具体方法可以度娘。【最好还是一次成功,这样省去麻烦】 

3.提交代码到远程仓库

然后我们将自己创建的文件copy到这个初始化的文件夹中就行,默认刚才哪些代码就生成了一个MD文件,其他啥都没有

下面就是git命令了

git add .

 git commit -m "内容"

 git push -u origin "master"  提交到master分支

来到gitee页面


http://www.ppmy.cn/news/1533285.html

相关文章

.Net 6.0 Windows平台如何判断当前电脑是否联网

最近在工作中开发需要判断当前电脑是否联网的需求&#xff0c;在网上找了一个调用window API来判断本机是否联网。具体请看下面介绍&#xff1a; 1.方法一&#xff08;调用winAPI&#xff09; [DllImport("wininet")] public static extern bool InternetGetConnec…

Qt 项目优化实践方向

目录 1. 使用智能指针2. 避免在全局或静态作用域中使用裸指针3. 利用Qt的对象树进行资源管理4. 延迟加载和按需加载资源5. 合理使用Qt的资源文件&#xff08;qrc&#xff09;6. 监控和调试内存使用7. 优化数据结构8. 减少不必要的资源复制9. 使用缓存机制10. 遵循RAII原则 以下…

探索分布式IO模块的介质冗余:赋能工业自动化的稳健之心

在日新月异的工业自动化领域&#xff0c;每一个细微环节的稳定性都直接关系到生产线的效率与安全。随着智能制造的深入发展&#xff0c;分布式IO&#xff08;Input/Output&#xff09;模块作为连接现场设备与控制系统的关键桥梁&#xff0c;其重要性日益凸显。我们自主研发的带…

海康HIK IN客户端使用帮助说明

HIK IN客户端是海康威视推出的一款配套公司USB相机的工具客户端。该软件不仅可以轻松的帮助用户实现画面的实时预览&#xff0c;而且支持用户USB接口连接&#xff0c;同时拥有AI参数配置等功能。 HIK IN提供了丰富的相机参数设置选项&#xff0c;能够帮助摄影师优化相机的性能&…

python医疗机器人手术

机器人手术是非常复杂和敏感的操作&#xff0c;需要专业的技术和设备来执行。请不要试图在家中或非医疗环境下 import time# 初始化机器人 def initialize_robot():print("初始化机器人...")time.sleep(2)print("机器人已经初始化")# 执行手术 def perfor…

基于 STM32 单片机的温室物理无害生长系统

摘要 : 本系统主要由六大部分组成,分别为 STM32单片机控制模块、温湿度检测模块、风扇、臭氧消毒、温室补光灯、水利灌溉通道等基本设施。单片机可以通过 MOS 管这类的电力电子器件来实现对某些大功率设施的控制如温室内风扇通风系统、温室内定时补光、根据土壤温湿检测来进行…

在PC端连接苹果手机(iPhone)时,即使已经开启了开发者模式(开发者权限),但仍然无法成功连接,是什么原因?

目录 1. 缺少信任设备授权 2. USB线或端口问题 3. 没有安装正确的驱动程序 4. Apple Mobile Device 服务未启动&#xff08;适用于 Windows&#xff09; 5. 开发者选项中的设置问题 6. 防火墙或杀毒软件阻止 7. USB 限制功能已开启 8. 软件版本不兼容 9. iPhone处于恢…

线性方程组的迭代方法

目录 直接方法与迭代方法 常规迭代算法 选择迭代求解器 预条件子 预条件子示例 均衡和重新排序 使用线性运算函数取代矩阵 数值线性代数最重要也是最常见的应用之一是可求解以 A*x b 形式表示的线性方程组。当 A 为大型稀疏矩阵时&#xff0c;您可以使用迭代方法求解线…