利用React 和ant-design 搭建cnode项目的随笔

利用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