《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>
<Button onClick={del} type="primary">减</Button>
<Button onClick={ifAdd} type="primary">奇数加</Button>
<Button onClick={asyncAdd} type="primary">异步加</Button>
<br />
{/* <Person /> */}
</div>
)
}
export default connect(
state => ({ count: state.count }),
{
insertCount,
deleteCount
}
)(Count);