create-react-app 使用心得

脚手架搭建react步骤

记录下搭建react项目中遇到的问题

1. 确保本地装有node.js
2. 我用的是npm/cnpm
3. 脚手架用的是create-react-app而非自己搭建

第一步：create-react-app react_demo 创建一个名为 react_demo的项目，翻阅package.json，你会发现里面看不到有webpack的版本信息，这是因为create-react-app把很多内建的配置隐藏掉。同时，安装的react也为最新的版本^16.8.6 (2019.8.1安装）

第二步：cnpm run eject 这个步骤主要是把隐藏掉的配置暴露出来，再次翻阅package.json，会发现里面多了很多配置信息，查看dependencies{} 会发现里面已经装的有 sass-loader、bable等配置

第三步：cnpm i node-sass react-router-dom axios --save 安装sass、react路由、axios

第四步：打开config文件夹下webpack.config.js，找到module{} ，配置好sass
第五步：安装ant design cnpm install antd --save 接下来做按需加载配置

第六步：安装 cnpm i react-app-rewired customize-cra babel-plugin-import ---save 这三个为在creact-react-app中使用ant design 按需加载的必须依赖。

第七步：在根目录下创建 config-overrides.js文件，写入以下待代码
第八步：再次查找package.json，在"scripts{}"下讲代码改为：
接下来就可以运行项目了，看是否有报错 cnpm start

不幸的是，真有报错…

网上搜索后说是因为少了react-scripts的依赖，检查package.json，我里面确实没有，于是乎，装依赖！
cmd继续输入代码 cnpm i react-scripts --dev 结果一直安装依赖失败，后来把npm升级到6.10.2，再次安装成功。

再次运行，依旧报错。。
继续搜，说是因为丢包问题，仔细想了下安装的时候网速确实不好，于是把node_modules文件夹删除，重新安装 cnpm install

页面效果

终于成功。。第一次写博客，哈哈哈，以后会多记录遇到的问题，成为一名合格的程序员