使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目

微之發表於 2019-10-11 11:09:00

使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目

<h2>1、安装、构建</h2>
<div class="cnblogs_code">
<pre># 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app

# 启动编译当前的React项目，并自动打开 http://localhost:3000/
npm start</pre>
</div>
<h2>2、项目目录</h2>
<div class="cnblogs_code">
<pre>//默认 ├── package.json
├── public # 这个是webpack的配置的静态目录
│ ├── favicon.ico
│ ├── index.html # 默认是单页面应用，这个是最终的html的基础模板
│ └── manifest.json
├── src
│ ├── App.css # App根组件的css
│ ├── App.js # App组件代码
│ ├── App.test.js
│ ├── index.css # 启动文件样式
│ ├── index.js # 启动的文件（开始执行的入口）！！！！
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock</pre>
</div>
<div class="cnblogs_code">
<pre>//修改
├── package.json
├── public # 这个是webpack的配置的静态目录
│ ├── favicon.ico
│ ├── index.html # 默认是单页面应用，这个是最终的html的基础模板
│ └── manifest.json
├── src
│ ├── assets # 图片等静态资源
│ ├── redux # 状态
│ │ ├── action.js # action
│ │ ├──reducerjs # reducer
│ │ └── index.js # 主文件
│ ├── router # 路由
│ │ ├── config.js # 配置
│ │ ├── FrontendAuth.js # 路由守卫
│ │ └── index.js # 主文件
│ ├── serve # 请求
│ │ ├── index.js # axio
│ ├── views # 页面
│ ├── App.css # App根组件的css
│ ├── App.js # App组件代码
│ ├── App.test.js
│ ├── index.css # 启动文件样式
│ ├── index.js # 启动的文件（开始执行的入口）！！！！
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock </pre>
</div>
 
<h2>3、antd</h2>
<div class="cnblogs_code">
<pre>yarn add antd</pre>
</div>
修改 <code>src/App.css</code>，在文件顶部引入 <code>antd/dist/antd.css</code>。
<div class="cnblogs_code">
<pre>@import '~antd/dist/antd.css';

.App {
text-align: center;
}

...</pre>
</div>
<code>antd</code> 目前的默认文案是英文，如果需要使用其他语言，可以参考下面的方案。
antd 提供了一个 React 组件 ConfigProvider 用于全局配置国际化文案。
<div class="cnblogs_code">
<pre>import zhCN from 'antd/es/locale/zh_CN';

return (
<ConfigProvider locale={zhCN}>
<App />
</ConfigProvider>
);</pre>
</div>
<h2>4、axios</h2>
<div class="cnblogs_code">
<pre>yarn add axios</pre>
</div>
/src/serve/index.js，统一配置并绑定到react上
<div class="cnblogs_code">
<pre>import React from 'react';
import axios from 'axios';
axios.defaults.headers['Content-Type'] = 'application/json';

let config = {
baseURL: '',
timeout: 60 * 1000, // Timeout
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
(config) => {
// Do something before request is sent
config.headers['Authorization'] = '';
return config;
},
(error) => {
// Do something with request error
return Promise.reject(error);
}
);

// Add a response interceptor
_axios.interceptors.response.use(
(response) => {
// Do something with response data
return response
},
(error) => {
// Do something with response error
return Promise.reject();
}
);
React.Component.prototype.$axios = _axios;</pre>
</div>
<h2>5、router</h2>
<div class="cnblogs_code">
<pre>yarn add react-router-dom</pre>
</div>
/src/router/config.js
<div class="cnblogs_code">
<pre>import login from '../views/login';
import record from '../views/record';
import home from '../views/home';

export const routerConfig = [
{
path:'/',
component:home,
auth:true,
},{
path:'/record',
component:record,
//auth:true,
},{
path:'/login',
component:login,
}
];</pre>
</div>
/src/router/FrontendAuth.js
<div class="cnblogs_code">
<pre>import React, {Component} from 'react';
import {Route, Redirect} from 'react-router-dom';

export class FrontendAuth extends Component {
render() {
const {location, config} = this.props;
const {pathname} = location;
const isLogin = localStorage.getItem('__config_center_token')

// 如果该路由不用进行权限校验，登录状态下登陆页除外
// 因为登陆后，无法跳转到登陆页
// 这部分代码，是为了在非登陆状态下，访问不需要权限校验的路由
const targetRouterConfig = config.find((v) => v.path === pathname);
if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) {
 const {component} = targetRouterConfig;
 return <Route exact path={pathname} component={component}/>
 }

if (isLogin) {
 // 如果是登陆状态，想要跳转到登陆，重定向到主页
 if (pathname === '/login') {
 return <Redirect to='/'/>
 } else {
 // 如果路由合法，就跳转到相应的路由
 if (targetRouterConfig) {
 return <Route path={pathname} component={targetRouterConfig.component}/>
 } else {
 // 如果路由不合法，重定向到 404 页面
 return <Redirect to='/404'/>
 }
 }
} else {
 // 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
 if (targetRouterConfig && targetRouterConfig.auth) {
 return <Redirect to='/login'/>
 } else {
 // 非登陆状态下，路由不合法时，重定向至 404
 return <Redirect to='/404'/>
 }
}
}
}</pre>
</div>
/src/router/index.js
<div class="cnblogs_code">
<pre>import React, { Component } from 'react';
import { Switch} from 'react-router-dom';

import { FrontendAuth } from './FrontendAuth';
import { routerConfig } from './config';

class Routes extends Component {
render() {
return (
 <Switch>
 <FrontendAuth config={routerConfig} />
 </Switch>
 )
}
}

export default Routes</pre>
</div>
app.js
<div class="cnblogs_code">
<pre>import {BrowserRouter as Router} from 'react-router-dom'; import Routes from './router/index'</pre>
<pre>
class App extends Component{
render() {
return (
 <Router>
 <Routes></Routes>
 </Router>
 );
}
}

export default App;</pre>
</div>
<h2>6、scss</h2>
 安装完后，只要把sass文件改成.scss就行了
<div class="cnblogs_code">
<pre>npm install node-sass sass-loader --save</pre>
</div>
<h2>7、修改端口号</h2>
项目默认端口号是3000，如下可以更改：
<div class="cnblogs_code">
<pre>在package.json中修改
"start":"react-scripts start",
为
"start":"set PORT=9000 && react-scripts start",</pre>
</div>
<h2>8、react-redux</h2>
redux不是项目必需的，如果你不确定是否需要，那就是不需要，在react无法实现时，再考虑。
<div class="cnblogs_code">
<pre>npm install react-redux redux --S</pre>
</div>
 /src/redux/action.js
<div class="cnblogs_code">
<pre>/*
* action 类型
*/

export const COUNT = 'COUNT';
/*
* 初始值
*/

export const config = {
count:1000
};

/*
* action 创建函数
*/

export function setCount(value) {
return { type: COUNT, value }
}</pre>
</div>
/src/redux/reducer.js
<div class="cnblogs_code">
<pre>//这是action
import {
COUNT
} from './actions'

//这是reducer
const reducer = (state , action) => {
switch (action.type) {
case COUNT:
 let count =action.value;
 return {...state,...{count}};
default:
 return state;
}
};
export default reducer</pre>
</div>
/src/redux/index.js
<div class="cnblogs_code">
<pre>import { createStore } from 'redux';
import {config} from './actions';
import reducer from './reducer';
let store = createStore(reducer,config);

export default store</pre>
</div>
/src/index.js
<div class="cnblogs_code">
<pre>import { Provider } from 'react-redux'
import store from './redux/index'

ReactDOM.render(
<ConfigProvider locale={zhCN}>
<Provider store={store}>
 <App />
</Provider>
</ConfigProvider>, document.getElementById('root'));</pre>
</div>
//页面调用示例
<div class="cnblogs_code">
<pre>import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
setCount,
} from '../redux/actions'

class ReduxTest extends Component {

componentDidMount() {
console.log(this.props)
}
render() {
const { PayIncrease,tiger } = this.props;
return (
 <div className="App">
 <h2>当月工资为{tiger}</h2>
 <button onClick={PayIncrease}>升职加薪</button>
 </div>
 );
}
}
//需要渲染什么数据
function mapStateToProps(state) {
return {
tiger: state.count
}
}
//需要触发什么行为
function mapDispatchToProps(dispatch) {
return {
PayIncrease: () => dispatch(setCount(99999)),
}
}

export default ReduxTest = connect(mapStateToProps, mapDispatchToProps)(ReduxTest)</pre>
</div>
  
来源：https://www.cnblogs.com/gxp69/p/11641560.html

頁: [1]

琼殿技术论坛's Archiver

使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目