1、本地配置代理服务： create-react-app 创建的react项目
package.jsoin 中 加入:
"proxy": "http://localhost:8000" 即可。
2、react引入图片
import xxx from './xxx.png'
... <img src={xxx} />
或 <img src={require('./xxx.png')} />
3、组件生命周期
装载组件触发
componentWillMount
只会在装载之前调用一次，在 render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render
componentDidMount
只会在装载完成之后调用一次，在 render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this)获取到组件的 DOM 节点。
更新组件触发
这些方法不会在首次 render 组件的周期调用
componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdate
卸载组件触发
componentWillUnmount
3、嵌入复制插件
componentDidMount() {
this._notificationSystem = this.refs.notificationSystem;
let url = window.location.host + '/Bussiness/' + this.props.match.params.id;
let v = this;
new Clipboard('#copyBtn', {
text() {
v._notificationSystem.addNotification({
title: 'Success',
message: '已复制！',
autoDismiss: 3,
level: 'success',
position: 'tr'
});
return url;
}
});
}
4、项目结构：
5、定义routes
import React from 'react'
import {BrowserRouter,Route} from 'react-router-dom' import Home from '../views/Home'
import GamePage from '../views/GamePage' const routes = (
<BrowserRouter >
<div>
<Route path="/" component={Home} exact />
<Route path="/game" component={GamePage} />
</div>
</BrowserRouter>
) export default routes;
6、修改 node_modules\react-scripts\config\webpack.config.dev.js 中 ，以支持 css modules （样式模块化）
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]-[hash:base64:5]",
},
},
7、添加 装饰器支持 即： @connect 形式的注册 redux
cnpm i --save-dev babel-plugin-transform-decorators-legacy
修改 node_modules\react-scripts\config\webpack.config.dev.js 中
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
plugins: ["transform-decorators-legacy"]
},
},
8、 index.css 中引入 reset.css 必须
@import "./assets/reset.css";