从零开始搭建react项目

配置脚手架

npx create-react-app myapp

创建文件

目录说明

page里面存放静态页面
components 存放公共组件
route 存在路由配置
redux 存在react-redux

配置路由

react-router web版

npm install react-router-dom

用来配置集中式路由

npm install  react-router-config

创建组件

login

import React from 'react'

export default function index() {
    return (
        <div>
            登陆..............
        </div>
    )
}

home

import React from 'react'
import { renderRoutes } from "react-router-config";

export default function index(props) {
    console.log(props)
    return (
        <div>
            主页......
            //渲染出子路由
            {renderRoutes(props.route.children)}
        </div>
    )
}

查看home组件 props里内容 拿出children渲染出来

order

import React from 'react'

export default function order() {
    return (
        <div>
            订单......
        </div>
    )
}

route文件里创建index.js

import React from 'react'
import login from "../page/login";
import home from "../page/home";
import order from "../page/order";
import { BrowserRouter as Router, Switch } from "react-router-dom";
import { renderRoutes } from "react-router-config";
//配置路由
const routes = [{
    path: '/',
    exact: true,
    component: login
},
{
    path: '/home',
    component: home,
    //子路由
    children: [{
        path: '/home/order',
        component: order
    }]
}]

// 暴露出去 renderRoutes方法用来解析routes 渲染成路由
// BrowserRouter模式
export default function index() {
    return (
        <Router>
            <Switch>
                {renderRoutes(routes)}
            </Switch>
        </Router>
    )
}

配置ui框架

npm install antd --save

修改 src/App.js，引入 antd 的按钮组件。

@import '~antd/dist/antd.css';

添加按钮

import React from 'react'
import { Button } from "antd";
export default function index() {
    return (
        <div>
            登陆..............
            <Button type="primary">Primary Button</Button>
        </div>
    )
}

查看效果

自定义主题

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 craco

npm i add @craco/craco

修改package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

按照 配置主题 的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能。我们可以引入 craco-less 来帮助加载 less 样式和修改变量
首先把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件

/* src/App.js */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

然后安装 craco-less 并创建 craco.config.js

npm i craco-less

const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [{
        plugin: CracoLessPlugin,
        options: {
            lessLoaderOptions: {
                lessOptions: {
                    modifyVars: { '@primary-color': '#1DA57A' },
                    javascriptEnabled: true,
                },
            },
        },
    }, ],
};

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。修改后重启 npm start，如果看到一个绿色的按钮就说明配置成功了。

页面效果

搭建react-redux

安装环境

安装redux

npm install  redux --save

仅安装redux也是可以使用的，但是比较麻烦。redux里更新store里的数据，需要手动订阅(subscribe)更新。可以借助另一个插件（react-redux）提高开发效率。

安装react-redux

npm install react-redux --save

react-redux允许通过connect方法，将store中的数据映射到组件的props，省去了store订阅。原state中读取store的属性改用props读取。

安装redux-thunk

install redux-thunk --save

redux-thunk用来支持异步操作

安装redux状态查看工具

npm install --save redux-devtools-extension

创建文件

创建action

action-type.js

export const ADD = 'add'
export const DEL = 'del'

action.js

import { ADD, DEL } from "./action-type";
//添加
export const insertCount = (data) => ({ type: ADD, data })
//删除
export const deleteCount = (data) => ({ type: DEL, data })

reducers

count.js

import { ADD, DEL } from "../actions/count/action-type";
// 计算
export default function countReducer(state = 0, action) {
    const { type, data } = action;
    switch (type) {
        case ADD:
            return state + data;
        case DEL:
            return state - data;
        default:
            return state;
    }
}

index.js

import { combineReducers } from 'redux'
import count from "./count";
export default combineReducers({
    count
})

创建store.js

import { createStore } from "redux";
import Reducer from "./reducers/index";

export default createStore(Reducer);

修改react根目录index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux";
import store from "./redux/store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </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();

创建count组件

import React, { useState } from 'react'
import { Button, Dropdown, Menu } from "antd";
import {connect  } from "react-redux";
import { insertCount,deleteCount } from "../../redux/actions/count/action";
function Count(props) {
    const [key, setKey] = useState(1);
    function add(params) {
        props.insertCount(key)
    }
    function del(params) {
        props.deleteCount(key)
    }
    function ifAdd(params) {

    }
    function asyncAdd(params) {

    }
    const onClick = ({ key }) => {
        setKey(key * 1)
    };
    const menu = (
        <Menu onClick={onClick}>
            <Menu.Item key="1">1</Menu.Item>
            <Menu.Item key="2">2</Menu.Item>
            <Menu.Item key="3">3</Menu.Item>
        </Menu>
    );
    return (
        <div>
            <p>值为：{props.count}</p>
            <p><Dropdown overlay={menu} trigger={['click']}>
                <Button type="primary" onClick={e => e.preventDefault()}>
                    {key}
                </Button>
            </Dropdown></p>
            <Button onClick={add} type="primary">加</Button>&nbsp;&nbsp;
            <Button onClick={del} type="primary">减</Button>&nbsp;&nbsp;
            <Button onClick={ifAdd} type="primary">奇数加</Button>&nbsp;&nbsp;
            <Button onClick={asyncAdd} type="primary">异步加</Button>
            <br />
            {/* <Person /> */}
        </div>
    )
}
export default connect(
    state => ({ count: state.count }),
    {
        insertCount,
        deleteCount
    }
)(Count);