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下的文件;