react从零开始

参考他的

此篇博文待完善

1.安装react脚手架create-react-app

npm install -g create-react-app
创建一个基于typeScript的项目如下：
  npx create-react-app my-app --template typescript

ts中默认导出index.js页面

2.创建一个项目

create-react-app xxx(项目文件名,只能小写)
create-react-app xxx --template typescript（创建ts语法的项目）

3.弹出配置文件（单项操作不可回退）

npm run eject

该命令会将配置文件暴露到scripts目录下，即将node_modules/react-script里的配置文件（config->config,scripts->scripts）弹出到最外层根目录下，这样更方便开发人员配置

执行完重新npm i 安装一下

4.安装sass

4.1 npm install sass-loader node-sass --save-dev
4.2.config 文件夹下有个webpack.config.js，将里面对应内容修改为如下

{

    exclude: [/\.js$/,/\.html$/,/\.json$/,/\.scss$/],

    loader: require.resolve('file-loader'),

    options: {

            name: 'static/media/[name].[hash:8].[ext]',

        },

},

{

    test:/\.scss$/,

    loaders:['style-loader','css-loader','sass-loader']

}

5.安装antd

npm install antd --save
后面的看antd文档

6.antd语言汉化

antd库，默认是英文的，转化为汉语如下
在index.js文件中如下引入及配置

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ConfigProvider } from 'antd';
import 'moment/locale/zh-cn'
import zh_CN from 'antd/lib/locale-provider/zh_CN'

ReactDOM.render(
  <React.StrictMode>
    <ConfigProvider locale={zh_CN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

7.@符号代替src路径

1.npm i react-app-rewired customize-cra -D
2.config文件下，webpack.config.js文件中，alias对象中，添加如下，

'@': path.resolve('src'),

3.同时从tsconfig.json文件中“compiler Options”对象中添加如下即可

"baseUrl": ".",
    "paths": {
      "@/*": [
        "*",
        "src/*"
      ]
    }

8.页面引用路径

/代表public文件夹，，

<image src='/images/404.jpg' alt=''></image>  //  

9.在views页面中创建一个index.js文件，将全部文件导出，方便使用

import Article from './Article'
import Dashboard from './Dashboard'
import Login from './Login'
import NotFound from './NotFound'
import Setting from './Setting'

export default{
    Article,
    Dashboard,
    Login,
    NotFound,
    Setting
}

10.路由规划，私有和共有

11.安装less

https://ant.design/docs/react/use-with-create-react-app-cn按照如下配置即可

12.导航栏使用，antd整个后台模板

12.1因为是公共的组件，所以放在公共的组件中
将antd库中，layout组件复制到组件中，如下，引入路由的文件进行配置
文件名为frameOut

import React, { Component } from 'react'
import './index.less'
import { Layout, Menu, Image, Breadcrumb } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
} from '@ant-design/icons';
import { privateRoutes } from '../../routers/index'
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
// import srcAdd from '../../../public/images/logo.png'  style={{ minHeight: '100%' }}  {this.props.children}

const routeLeft = privateRoutes.filter(item => {
    return item.istop === true
})
console.log('打印私有属性00000', routeLeft);
export default class Home extends Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <Layout style={{ minHeight: '100%' }}>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    {/* <div className="logo" /> */}
                    <div className='imgStyle'>
                        <Image src='/images/logo.png' />
                    </div>
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        {routeLeft.map(item => {
                            return (
                                item.children ?
                                    <SubMenu key={item.pathname} icon={item.icon} title={item.title}>
                                        {item.children.map(item1 => {
                                            return <Menu.Item key={item1.pathname} icon={item.icon}>{item1.title}</Menu.Item>
                                        })}
                                    </SubMenu> :
                                    <Menu.Item key={item.pathname} icon={item.icon}>{item.title}</Menu.Item>)
                        })}

                    </Menu>
                </Sider>
                {/* 不成文规定，padding.margin的距离是8的倍数 */}
                <Layout className="site-layout" >
                    <Header className="site-layout-background" style={{ padding: '0px 0px 0px 20px' }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb>
                        {this.props.children}
                    </Content>
                </Layout>
            </Layout>
        )
    }
}

12.2 路由文件中配置路由的路径，及渲染的图标和页面（包含一级二级路由）

import { Login, NotFound, Dashboard, Article, Setting,Edit } from '../views'
import {
    HomeFilled,
    EditFilled,
    SettingFilled,
    ToolFilled
} from '@ant-design/icons';


const commonRouters = [  // 公共路由，无权限也可访问
    {
        pathname: '/login',
        component: Login,

    },
    {
        pathname: '/404',
        component: NotFound
    },
]

const privateRoutes = [ // 私有路由，须有权限才能访问
    {
        pathname: '/admin/dashboard', // 自己定义
        component: Dashboard,
        title: '仪表盘',
        icon: <HomeFilled />,
        istop:true,  // 代表一级菜单
    },
    {
        pathname: '/admin/article',
        component: Article,
        title: '文章管理',
        icon: <ToolFilled />,
        istop:true,
        children: [  //二级菜单
            {
                pathname: '/admin/dashboard/edit', // 自己定义
                component: Edit,
                title: '编辑',
                icon: <EditFilled />,
            }
        ]
    },
    {
        pathname: '/admin/setting',
        component: Setting,
        title: '系统设置',
        icon: <SettingFilled />,
        istop:true,
    },
]
export {
    commonRouters,
    privateRoutes
}

12.3，编程式导航跳转页面（需配置）
问题：this.props.history找不到
解决：要配置（使用页面）
12.3.1 import { withRouter } from ‘react-router-dom’ // 配置编程式导航
12.3.2 export default withRouter(Home);

13.mock假数据

rap2.taobao.org进入–>新建仓库–>新建模块(项目创建的模块)–>新建接口(接口名字)
封装请求

import axios from 'axios'
const baseUrl = 'http://rap2api.taobao.org/app/mock/271168' // 基础接口
// const baseUrl ='https://dev.bc5.biz'

// axios 分为开发模式（development）和线上模式（production）
// process.env.NODE_ENV ,,node运行环境 内部的一个判断，会根据化境自动变化
const isDev = process.env.NODE_ENV === 'development'
console.log('isDev,,,',isDev);

const instance = axios.create({
    timeout: 5000,
    baseURL: isDev ? baseUrl :baseUrl, // 开发环境使用开发环境的地址，生产环境使用生产环境的地址
    // timeout: 2000,
    // headers: {'content-type': 'application/x-www-form-urlencoded'}
    // headers: { 'content-type': 'application/x-www-form-urlencoded' }
})

instance.interceptors.request.use((config) => {
    console.log('请求前操作', config);

    return config
})

instance.interceptors.response.use((response) => {
    console.log('请求后拿到数据操作', response);

    return response
})
// const getTopics = () => {
//     return instance.get({url: '/v2/agent/machine/present_records'})
// }
const http={
    get:'',
    post:'',
    put:'',
    del:''
}
http.get=function(api,data){
    return new Promise((resolve,reject)=>{
        instance.get(api,data).then(res=>{
            resolve(res)
        })
    })
}

export {
    // getTopics,
    http
}

页面使用

14.react，模拟页面假数据和真数据用法

14.1假数据（写死的，直接写变量名即可）

14.2真数据（this.state.变量名）

15.报错信息，key

原因是，使用了table组件，没加key值。。。红框加上就行了

16，table组件，给每一列添加单独样式的时候修改，(直接在顶部的标题栏控制项中添加render即可）

17.浏览器顶部title和左侧项目栏匹配

路由中设置，非常方便，，，，document.title = ‘仪表盘’ 来设置

<Route path="/admin" render={(rootProps) => {
          console.log('121212', rootProps)
          let judgeTitle = rootProps.location.pathname
          judgeTitle.indexOf('dashboard')!==-1 ? document.title = '仪表盘' : judgeTitle.indexOf('article')!==-1 ? document.title  = '文章管理' : document.title = '系统设置'
          return <App {...rootProps} />
        }}></Route>

18.路由跳转

this.props.history.push(‘路由地址’);

19.antd 栅格布局使用

看文档，唯一提示是offset，向右便宜几个格

## 20.this.props.history使用 this.props.history.goBack ===>返回上一页面 this.props.history.go(-1) ===> 返回上一页面+刷新 ( this.props.history.push({ pathname: "/about", state: { id } }); ===>页面跳转+传参 接受页面拿参数，，如下 ：this.props.location.state.id )

21，使用redux管理公共数据

21.1 安装
npm i redux --S
npm i redux-thunk --S （中间件，方便）
npm i react-redux
21.2 和组件还有页面同一级创建store文件，创建如下几个文件

22.react中使用redux

22.1 npm run redux
22.2 和页面同一等级下，创建store文件夹，并创建如下几个文件

22.3 四个文件内容分别如下

// actions页面,触发store的变量ADD_COUNT
const ADD_COUNT = 'ADD_COUNT'

export default ADD_COUNT 

// index.js页面  创建store实例 createStore,后续这个是入口文件
import {createStore} from 'redux'
import reducers from './reducers.js'

let store=createStore(reducers) // 创建一个store

export default store

// reducers页面，操作数据，处理一系列事件
import defaultState from './state.js'
import ADD_COUNT from './actions'

// 根据action不同，更新state,必须返回一个新的state，而不是在原数据上更改
 function setCount(state =defaultState, action){
    switch (action.type) {
        case ADD_COUNT:
            const newState = Object.assign(state) //浅拷贝一个对象，更改这个新的对象并且返回
            newState.count += 1
            return newState
        default:
            return state  // 默认返回state定义的内容
    }
}
export default setCount

// state页面，设置默认值
let count = 10

export default {
count
}

22.4使用如下
22.4.1入口文件中引入了app组件，在app组件中，

22.4.2 组件页面使用