create-react-app使用的注意點

create-react-app是react的使用最方便的腳手架吧；可能之前我們使用webpack+es6來自建搭建環境，但是那樣不太方便；配置編譯環境需要很長的時間，但是配置完成后使用是非常方便的；

1. 配置環境

npm install -g create-react-app  安裝全局
create-react-app myProject 生成react開發模板在myProject中
生成的過程特別麻煩，可以使用yarn工具下載，也就是說先去下載安裝yarn; 
cnpm i yarn-g   //之后在重新下載

2. 需要將react的版本做修改

//配置scss環境
cnpm i node-sass@4.0.0 sass-loader -D
//react的版本
cnpm i react@15.6.1 react-dom@15.6.1 -S

3. 在node-modues的react-scripts中進行配置scss；webpackDevServer.config.js進行跨域配置

{
      loader: require.resolve('file-loader'),
      // Exclude `js` files to keep "css" loader working as it injects
      // it's runtime that would otherwise processed through "file" loader.
      // Also exclude `html` and `json` extensions so they get processed
      // by webpacks internal loaders.
      exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/,/\.scss$/],
      options: {
        name: 'static/media/[name].[hash:8].[ext]',
      },
    },
      { test:/\.scss$/, loaders:['style-loader','css-loader','sass-loader'] }

注意：

腳手架生成的過程中有public的文件夾；我們在引入文件的時候可以在這的index.html中引入；

 

在直接使用create-react-app peoject：在用axios請求static的json文件的時候，總是報404錯誤；

但是使用yarn下載的時候，就可以訪問到static下的文件；