创建项目
npm install -g create-react-app
create-react-app demo
cd demo
npm run eject
必备组件
npm install redux redux-thunk react-redux react-router react-router-dom --save
npm install fastclick axios jsonp --save
npm installreact-copy-to-clipboard--save
npm install styled-components --save-dev
npm install http-proxy --save-dev
npm install less less-loader --save-dev
npm install babel-plugin-transform-decorators-legacy --save-dev
cnpm install eslint-config-react-app --save-dev
【支持LESS】
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件：
搜索“/\.css”，修改规则为/\.css|.less$/,use -> {loader: require.resolve('less-loader')} // 编译less为css
【添加路径映射】
修改paths.js配置文件：
搜索“module.exports”，增加项：
port: 8080,
appComponents: resolveApp('src/components'),
appContainers: resolveApp('src/containers'),
appStore: resolveApp('src/store'),
appRouter: resolveApp('src/router'),
appUtils: resolveApp('src/utils'),
appHelpers: resolveApp('src/helpers'),
appBridge: resolveApp('src/bridge')
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件：
搜索“alias”，添加项
'@': paths.appSrc,
'components': paths.appComponents,
'containers': paths.appContainers,
'store': paths.appStore,
'bridge': paths.appBridge,
'utils': paths.appUtils,
'helpers': paths.appHelpers,
小提示：不用redux命名，用store命名是为了防止与类redux冲突
【支持ES7的装饰器】
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件：
搜索“babel-loader”，在下面的options里添加
plugins: [require.resolve('babel-plugin-transform-decorators-legacy')],
【支持跨域】
修改webpackDevServer.config.js配置文件：
搜索“app.use”，在这下面加上跨域代码
https://github.com/colaboy/seedsui-react/blob/master/config/webpackDevServer.config.js ;
【支持异步redux】
新建store/index.js文件：
import { createStore, applyMiddleware } from 'redux'
// Reducer
import reducer from './modules/reducer.js'
// Middleware: thunk
import thunk from 'redux-thunk';
// Middleware: client
import client from 'components/seedsui/utils/axiosApi.js';
import clientMiddleware from './middleware/clientMiddleware';
// Store
const store = createStore(reducer, applyMiddleware(thunk, clientMiddleware(client)));
export default store
引用到路由上
// Redux
import { Provider } from 'react-redux'
import store from 'store/index.js'
【修改打包根路径】
修改paths.js，找到方法getServedPath，修改servedUrl常量
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/h5/react/');
return ensureSlash(servedUrl, true);
}
【自定义eslint】
根目录新建.eslintrc文件，填写内容：
{
"extends": "react-app",
"rules": {
"no-restricted-globals": 0
}
}
【端口修改】
在配置好paths.js的文件后
修改start.js，找到const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8080; 修改8080为paths.port
【禁用ejs,使用html-loader编译html文件】
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件：
找到module下的rules 项，加上
{
test: /\.html$/,
use: [ {
loader: 'html-loader',
options: {
minimize: true
}
}],
},
