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应用同一个端口。

2、使用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