# 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app my-app cd my-app # 启动编译当前的react项目，并自动打开 http://localhost:3000/ npm start
//默认
├── package.json ├── public # 这个是webpack的配置的静态目录 │ ├── favicon.ico │ ├── # 默认是单页面应用，这个是最终的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 │ ├── # 默认是单页面应用，这个是最终的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
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>
);
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;
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;
安装完后，只要把sass文件改成.scss就行了
npm install node-sass sass-loader --save
项目默认端口号是3000，如下可以更改：
在package.json中修改 "start":"react-scripts start", 为 "start":"set port=9000 && react-scripts start",
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)
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论