使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目
1、安装、构建
# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app # 启动编译当前的React项目,并自动打开 http://localhost:3000/
npm start
2、项目目录
//默认 ├── 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
//修改
├── 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
3、antd
yarn add antd
修改 src/App.css
,在文件顶部引入 antd/dist/antd.css
。
@import '~antd/dist/antd.css'; .App {
text-align: center;
} ...
antd
目前的默认文案是英文,如果需要使用其他语言,可以参考下面的方案。
antd 提供了一个 React 组件 ConfigProvider 用于全局配置国际化文案。
import zhCN from 'antd/es/locale/zh_CN'; return (
<ConfigProvider locale={zhCN}>
<App />
</ConfigProvider>
);
4、axios
yarn add axios
/src/serve/index.js,统一配置并绑定到react上
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;
5、router
yarn add react-router-dom
/src/router/config.js
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,
}
];
/src/router/FrontendAuth.js
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'/>
}
}
}
}
/src/router/index.js
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
app.js
import {BrowserRouter as Router} from 'react-router-dom';
import Routes from './router/index'
class App extends Component {
render() {
return (
<Router>
<Routes></Routes>
</Router>
);
}
} export default App;
6、scss
安装完后,只要把sass文件改成.scss就行了
npm install node-sass sass-loader --save
7、修改端口号
项目默认端口号是3000,如下可以更改:
在package.json中修改
"start":"react-scripts start",
为
"start":"set PORT=9000 && react-scripts start",
8、react-redux
redux不是项目必需的,如果你不确定是否需要,那就是不需要,在react无法实现时,再考虑。
npm install react-redux redux --S
/src/redux/action.js
/*
* action 类型
*/ export const COUNT = 'COUNT';
/*
* 初始值
*/ export const config = {
count:1000
}; /*
* action 创建函数
*/ export function setCount(value) {
return { type: COUNT, value }
}
/src/redux/reducer.js
//这是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
/src/redux/index.js
import { createStore } from 'redux';
import {config} from './actions';
import reducer from './reducer';
let store = createStore(reducer,config); export default store
/src/index.js
import { Provider } from 'react-redux'
import store from './redux/index' ReactDOM.render(
<ConfigProvider locale={zhCN}>
<Provider store={store}>
<App />
</Provider>
</ConfigProvider>, document.getElementById('root'));
//页面调用示例
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)
使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目的更多相关文章
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
随机推荐
- 使用Python编写打字训练小程序【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/devcloud/article/detail ...
- 给一线讲产品·8期|VPC、子网、安全组,是什么关系?
欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...
- hibernate查询方式(三)
QBC查询 (Query By Criteria) *****QBC查询有三个特点 **查询时不写sql语句 而是用方法来查询 **操作实体类和属性 **通过criteria对象来实现 1.查询所有 ...
- Java修炼——多维数组
二维数组就是存储一维数组(内存地址/引用)的数组 二维数组的实始化 1) int intA[][]={{1,2},{2,3},{3,4,5}}; 2) int [][] intB=new int[3] ...
- 使用 RMI 实现方法的远程调用
RMI 介绍 RMI 指的是远程方法调用 (Remote Method Invocation).它是一种机制,能够让在某个 Java虚拟机上的对象调用另一个 Java 虚拟机中的对象上的方法.可以用此 ...
- BZOJ 3033 太鼓达人(DFS+欧拉回路)
Description 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员XLk.Poet_shy和ly ...
- protobuf 语法 与 protocol-buffers 的使用
前言 protocol-buffers 是 node.js 平台对支持 protobuf 封装的三方模块,下面的例子都通过 protocol-buffers 的使用来说明. 什么是protobuf G ...
- 60%的人不懂Python进程Process,你懂吗?
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:蒋狗 新手注意:如果你Python基础学的不够扎实,遇问题没人解答 ...
- Java多态之动态绑定
目录 Java多态之动态绑定 引用变量的类型 编译时类型 运行时类型 方法绑定 静态绑定 动态绑定 方法表 Java多态之动态绑定 上篇回顾:多态是面向对象程序设计非常重要的特性,它让程序拥有 更好的 ...
- 每周一练 之 数据结构与算法(LinkedList)
这是第三周的练习题,原本应该先发第二周的,因为周末的时候,我的母亲大人来看望她的宝贝儿子,哈哈,我得带她看看厦门这座美丽的城市呀. 这两天我抓紧整理下第二周的题目和答案,下面我把之前的也列出来: 1. ...