使用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 ...
随机推荐
- RocketMQ 主题扩分片后遇到的坑
目录 1.案情回顾 1.1 集群现状 1.2.RocketMQ 在线扩容队列 1.3 消息发送 2.问题暴露 3.问题分析 4.问题复盘 消息组接到某项目组反馈,topic 在扩容后出现部分队列无法被 ...
- hdu5969最大的位或
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5969 题意:给定自然数l和r ,选取2个整数x,y,满足l <= x <= y <= r ...
- 小程序如何支持使用 async/await
下载 regenerator-runtime npm i regenerator-runtime 如何使用 在小程序中,不认识 node_modules 文件夹,无法通过以下方法来直接找到包文件 im ...
- 大数据学习笔记——Java篇之基础知识
Java / 计算机基础知识整理 在进行知识梳理同时也是个人的第一篇技术博客之前,首先祝贺一下,经历了一年左右的学习,从完完全全的计算机小白,现在终于可以做一些产出了!可以说也是颇为感慨,个人认为,学 ...
- Java Swing JFrame实现全屏--无标题,无边框
实现方式一: import java.awt.Dimension; import java.awt.Toolkit; import javax.swing.JFrame; public class T ...
- < JAVA - 大作业(2)仿qq即时通讯软件 >
< JAVA - 大作业(2)仿qq即时通讯软件 > 背景 JAVA上机大作业:设计一个仿qq即时通讯软件 任务简要叙述:设计一款仿QQ的个人用户即时通讯软件,能够实现注册,登陆,与好友聊 ...
- nginx配置隐藏index.php
Nginx 服务器隐藏 index.php 配置 location / { try_files $uri $uri/ /index.php?$query_string; } nginx配置中t ...
- NodeJS4-4静态资源服务器实战_优化引入模板引擎
引入模板引擎(handlebars) cnpm i handlebars 结构大概是这样子的,新建模板dir.tpl文件和route.js dir.tpl <!DOCTYPE html> ...
- Java逆向之UML查看工具(检索记录)
花了几个钟头时间,搜索了一下,如何从源代码得到UML,因为WCI(Writing Compilers and Interpreters,下同)越往后代码越多,必须得借助工具才能把握整个工程了.初次涉猎 ...
- 《Java基础知识》Java方法重载和重写
重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即外壳不变,核心重写! 重写的好处在于子类可以根据需要,定义特定于自己的行为. 也就是说子类 ...