react脚手架搭建及配置
npm install -g create-react-app
装完之后，生成一个新的项目，可以使用下面的命令：
create-react-app my-app cd my-app/
yarn start
线上编译命令
npm run build
在开发react应用时，难免与服务器进行数据交互，就是要跟api打交道。
这个时候，有一个问题。
api存在的服务器可能是跟react应用完全分开的，而且，开发环境跟线上环境又不太一样。
比如，开发环境中，你的react应用是跑在3000端口的，可是api服务可能跑在3001端口，这个时候，你跟api服务器交互的时候，可能会使用fetch或各种请求库，比如jquery的ajax。
这个时候可能会遇到CORS问题，毕竟端口不同，而线上环境却没有这个问题，因为你都控制线上环境的react应用和api应用，跑在同一个端口上。
按照以往思路，解决的方法可能是用环境变量，比如：
const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'
但是这样搞起来，还是有些复杂，然而，create-react-app提供了一个超级简单的方法，只需要在package.json文件中，加一个配置项就可以了。
比如：
"proxy": "http://localhost:3001/",
至于你用的是http的何种请求库，都是一样的，不用改任何代码。这个选项，只对开发环境有效，线上环境还是保持react应用和api应用同一个端口。
二、使用less
安装less、less-loader依赖包
a. yarn安装
yarn add less less-loader
b. npm安装
npm install --save less less-loader
在react-scripts/config文件夹找到webpack.config.dev.js和webpack.config.prod.js两个文件
{
test: /.(css|less)$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: require.resolve('style-loader'),
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader'),
},
],
},
extractTextPluginOptions
)
)
安装 antd
npm install antd-init -g
antd-init
升级版本
基于dva的脚手架
首先是安装脚手架
npm install dva-cli -g
dva new dvatest
npm start