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