用create-react-app从0搭建一个react-app

create-react-app创建项目

• 1.先创建一个react目录 create-react-app + 项目名称

$ create-react-app my-react-app

• 2.进入新建的文件目录 cd 项目名称

 // 下列操作都是在master分支下进行配置的，如果你的当前目录还不是一个git仓库，那你需要先git init一下哟
 // 之所以要在master分支下进行配置，是为了在下文中运行 npm run eject
$ cd my-react-app

• 3.查看react-scripts版本，可以看到

$ cat package.json

• 4.在package.json中删除下列注释代码，不能直接注释。
  

react-scripts降级

之所以要进行react-scripts降级是因为它只兼容IE11以上，所以为了更好地兼容IE浏览器，我们需要做降级配置

• 1.先本地删除

$ npm uninstall react-scripts -S

• 2.安装稳定的低版本

$ npm i react-scripts@1.x -S

• 3.git add,git commit 提交更改的文件

$ git add -A
$ git commit -m 'message'

• 4.运行eject(注意：这是一个不可逆的操作)

$ npm run eject 

• 5.npm start 看是否能运行

$ npm start
// 如果不能运行，先将node-mpdule文件夹删除，再npm install安装，安装完成后再npm start

less配置

• 1.安装less

$ npm install less less-loader -S

• 2.配置webpack的less loader
  • config文件夹中的webpack.config.dev.js文件中的css代码复制一份然后将css改为less
    
  • 这里是已经改过的样子
  • 在use的options里添加下列代码

  // javascriptEnabled:true
  

• webpack.config.prod.js文件重复上述步骤(先复制prod文件中的css代码，再更改添加上方的代码)
• 配置完毕重启生效
• 检查less是否成功可以新建一个less文件，并在APP.js文件中引入，看样式是否生效

配置antd

• 1.安装antd

$ npm install antd -S

• 2.安装按需加载组件代码和样式的插件

$ npm install babel-plugin-import -S

• 3.在package.json的babel中配置（注意要在babel中进行配置，不要写在babel外面去了）

"plugins":[
	["import",{"libraryName":"antd","style":true}]
]

• 配置完成后需重启生效
• 检查是否配置成功，引入antd的任意组件，看是否生效
• 最后建议npm run build一下看看是否会报错哟

补充

• 安装路由

$ npm install react-router-dom -S

• 引入按需加载

$  npm install react-loadable -S