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