利用React 和ant-design 搭建cnode项目的随笔
2024-05-10 06:38:47
文章目录
- 利用React 和ant-design 搭建cnode项目的随笔
- 利用create-react-app搭建一个React项目
利用React 和ant-design 搭建cnode项目的随笔
利用create-react-app搭建一个React项目
- 利用npm包管理器创建React项目
npm init react-app cnode-hooks
- 进入项目然后删除多余的文件
#进入到主要的工作目录
cd cnode/src
#删除多余的文件这里我为了方便给这个命令定义了一个别名（rmReact='rm App.css App.test.js serviceWorker.js logo.svg setupTests.js '）
rmReact
- 安装相应的依赖
#进入上一级就是cnode-hooks目录下
cd ../
#安装相应的依赖
npm install antd axios react-redux react-router-dom redux
- 将所有需要的逻辑处理都放在特定的文件夹中，所以现在建立相应的文件夹
cd src
# component(这个里面存放的是所有的公共组件) router(存放的是路由表) store(里面存放的是请求数据的方法和操作) view(相应的视图)
mkdir component router static store view
- 建立路由表
cd router
# 路由表规则都放在这里，如果路由很复杂建议多分几个文件，然后index作为一个入口文件调用其他的路由表就行了
touch index.js
示例：
import React from "react"
import IndexPage from "../view/index/index.js"
import TopicPage from "../view/topic/index.js"
import AboutPage from "../view/about/index.js"
import GetStartPage from "../view/getstart/index.js"
import Page404 from "../view/page404/index.js"
import UserPgae from "../view/user/index.js"
import qs from 'qs'
const types=['all','good','share','ask','job','dev']
//全局导航
const route = [
{ path: "/",
exact: true,
render( props) { let {location}=props;
let { search}= location;
let { tab,page }=qs.parse(search.substr(1));
// console.log(tab,page)
// console.log(types)
if((tab===undefined&&page===undefined)
||types.includes(tab)&&(page===undefined||Number(page)>0))
{ return <IndexPage {...props}/>
}
return <Page404 {...props}/> }
},
{ path: "/topics/:id",
exact: true,
render( props) { return <TopicPage {...props} />
}
},{ path: "/user/:loginname",
exact: true,
render( props) { return <UserPgae {...props}/>
}
},{ path: "/getstart",
exact: true,
render( props) { return <GetStartPage {...props}/>
}
},{ path: "/about",
exact: true,
render( props) { return <AboutPage {...props}/ >
}
},{ path: "",
exact: true,
render( props) { return <Page404 {...props}/>
}
}
]
export {route};
- 建立static
cd ../static
# 这个文件夹里面存放的是一些静态的资源比如说一些静态图片，样式，以及js
mkdir js css imgs
- store 仓库的建立与管理
# 进入store仓库建立相应的action和reducer,index.js是这个仓库的主入口文件
cd ../store
mkdir reducer action &&touch index.js
action文件夹里面存放的是自定义hooks，reducer里面存放的是纯函数，纯函数的定义:
是一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。
我们来好好的理解一下纯函数的定义：一个函数返回结果只依赖他的参数
例如：
let a=1
let add=(num2)=>a+num2
//add(2)这个函数在不确定a的值的情况下无法确定其最终的返回值，所以不是纯函数
//我们稍微改一下这个函数
let sum=(num1,num2)=>num1+num2
//sum(1,2)这个函数永远是 3。今天是 3，明天也是 3，在服务器跑是 3，在客户端跑也 3，不管你外部发生了什么变化，sum(1, 2) 永远是 3。只要 sum 代码不改变，你传入的参数是确定的，那么 sum(1, 2) 的值永远是可预料的。
然后是第二个条件：一个函数在执行过程中没有副作用
这怎么理解呢？
来看例子：
const a=1
const fool=(obj,b)=>obj.x+b
const counter={x:1}
fool(counter,2) //执行的值永远是3，并且】counter.x的值并没有改变
//我们再来稍稍改变一下这个函数
const fool2=(obj,b)=>{obj.x=2return obj.x+b
}
//fool2(counter,2)这里虽然说执行的结果永远都是4,但是counter.x的值改变了所以就不是纯函数
//这里改变外部的数据就是一个副作用，一个函数在执行过程中还有很多方式产生外部可观察的变化，比如说调用 DOM API 修改页面，或者你发送了 Ajax 请求，还有调用 window.reload 刷新浏览器，甚至是 console.log 往控制台打印数据也是副作用。
//注意：在函数体内定义的变量在函数内改变不算是副作用//纯函数很严格，也就是说你几乎除了计算数据以外什么都不能干，计算的时候还不能依赖除了函数参数以外的数据- ok理解完纯函数那就来看一下在项目中如何应用呢
//可以看见此函数在内部定义了一个topic的对象，通过action.type的值来控制return的值当topic_loadingover的时候返回action.data;
export default function topic(topic={loading:true,//注意这里有坑，如果这里单纯的是这种形式data：{},到后面用自定义hooks的时候会由于第一次data为undefined出现bug，应为第一次data里面没有数据所以也自然就不会出现属性，所以在子组件里面需要用到data里面的数据，用到解构会提示属性未定义data:{author:{}},isError:false,err_msg:""},action){switch(action.type){case "topic_loading":return{loading:true,data:{author:{}},isError:false,err_msg:""}case "topic_loadingover":return {loading:false,data:action.data,isError:false,err_msg:""}case "topic_error":{return {loading:false,data:{author:{}},isError:true,err_msg:action.err_msg}}default:return topic;}
}
- 其实最核心和最不明白的就是这个store里面的运行流程了，但是不怕，我会慢慢补上来的
- 下面来看action里面的具体内容
import axios from "axios";
import { useDispatch } from "react-redux";
const http=axios.create({baseURL:"https://cnodejs.org/api/v1"
})
// 获取主题列表详情
function useTopic(){let dispatch=useDispatch();return function(id){http.get(`/topic/${id}`).then(res=>{dispatch({type:"topic_loadingover",data:res.data.data})})}
}
export {useTopic}
- 在做好了数据请求相关的逻辑之后最后的呈现就要依靠各个视图的渲染了，在每个页面的主入口文件里面拿到这个页面所需要的数据然后再逐级传递组件所用到的参数，然后各个组件在对应的props里面结构数据，再渲染视图，
来带大家看一下怎么使用自定义hooks以及如何进行数据更新的
import React, { useEffect } from "react";
import IndexNav from "./indexNav"
import TopicsList from "../../component/topicsList";
import { useSelector} from "react-redux";
import { useTopicList } from "../../store/action";
import qs from "qs"
import { useLocation } from "react-router-dom";
import IndexPagination from "./indexPagination";
//上面是引入所需要的依赖,下面的才是重点
function IndexPage(){//这里拿到仓库里面的topics对应的数据，我们在store里面默认导出了topics这个函数，通过结构拿到相应的数据let {data,loading}=useSelector(state=>state.topics);//因为在useEffect里面无法直接调用自定义hooks,所以我把hooks定义成了一个高阶函数：在执行的时候返回另一个函数。这样getData这个就相当于一个没执行的函数了，let getData=useTopicList();let {search} =useLocation();//通过useLocation拿到当强页面的信息，为后面的数据请求做好铺垫let {tab="all",page=1}=qs.parse(search.substr(1));//用getData进行数据请求，并改变之前解构的loading,data的值，在这里打印loading，data，会打印两次,一次为topic_loading,{},一次为topic_loadingover，如果请求正确的话，data里面的数据不会为空了useEffect(()=>{getData(tab,page)},[tab,page])return (<div><IndexNav /><TopicsList data={data} loading={loading}/>{loading?"": <IndexPagination />}</div>)
}
export default IndexPage;
接下来就是通过拿到的数据渲染视图了，通过视图结构拆分组件,常用的可以分到components文件夹里面作为公共组件
结构目录 给我的项目点个start吧，去github看看
Happy Hucking !!!
利用React 和ant-design 搭建cnode项目的随笔相关推荐
- 前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言 定义 Model connect 起来 更新state 拥抱变化 主题切换 更换页面 获取当前设备类 ...
- 前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言 现在的效果 安装 dva-cli 创建新应用 预览项目 文件结构简单介绍 使用 antd做页面 定义 ...
- 基于React、Ant Design的ButtonGroup组件
目录 介绍 使用方式 安装 使用 API Props children 介绍 本组件基于React.Ant Design,适用于React + Ant Design项目 本组件设计为超过一定数量的按钮 ...
- 创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目 创建项目 选择配置 运行项目 安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开 配置 ...
- 使用ant design Pro开发项目的小结
一.关于上手. 1. 关于ant design Pro的介绍,自己看官网,大致上可以理解为ant design(组件库) ant design Pro (完整的项目) dva(路由 数据流管理)的组合 ...
- Ant Design Pro -- 02项目结构@20210331
一.项目的目录结构 ├── config # umi 配置,包含路由,构建等配置 ├── docker # 部署 ├── functions # ├── mock # 本地模拟数据 ├── publi ...
- React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录 代码 样式 前言 这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
- ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
- #react 之ant design Pro 学习研究#----启动项目
2019独角兽企业重金招聘Python工程师标准>>> #首页 src/index.js import '@babel/polyfill'; import 'url-polyfill ...
- 基于WebStorm, React和Ant.Design开发WebAppDemo
前提条件: 已安装过webstorm和nodejs. 安装create-react-app和yarn npm install -g create-react-app yarn 打开WebStorm创建 ...
最新文章
- CVS 快速入门指南
- 余弦函数导数推导过程_人工智能数学基础----导数
- JAVAEE框架之Spring AOP
- BUFF 在C++ 中取其中一部分 并且写到固定的目录下
- 源生php怎么打印,PHP如何实现云打印
- Qt学习之路八——利用qt对数据库进行操作
- 【单片机基础篇】共阴级四位数码管
- lwip_sendto函数详解
- 计算机网络：网络安全（电子邮件安全）
- 总结各种RGB转YUV的转换公式
- 爆炒猪肚的做法 爆炒猪肚怎样炒才脆
- 联想小新pro16锐龙版和酷睿版的区别 哪个好
- elasticsearch使用脚本 滚动关闭索引，更新index setting
- 三种免费的拍照翻译识别文字方法，总有一种适合你！
- WiFi基础学习到实战(三:WiFi网络“物理层”)
- 利用qq IP数据库(QQwry.dat) 查地址的实用类
- 游戏开发中，图片资源的精简
- 监督学习--分类之决策树
- 【回溯】leetcode37.解数独
- nginx常见502错误的解决方法