创建react项目(antd)参考官网命令与配置

a.原因

React在前台项目开发中使用了几个月，但是只是会用antd官网的那些组件了，这两天有余闲，所以系统的学习了一下它的来源，组件化，生命周期，如何搭建一个前台项目，如何打包，如何部署。。

b.安装

安装有时间再补。需要安装npm，之后用npm 安装yarn 脚手架命令 webpack等。

c.项目搭建(脚手架)

今天研究了好久，总是冒出莫名其妙的错误。我前端开发，小白刚接触。。
经过我一系列的尝试，觉得还是yarn和npm我混着用，因为他们有的版本不同，所有有很多奇葩的问题。。
废话不多说，本人window系统。

步骤

1、进入你的react_workspace，打开命令行，执行

create-react-app xxx

create-react-app：是创建脚手架(一个基本的项目)；xxx：是你的项目名。

2、以下所有命令均在你新建的项目xxx(也就是xxx文件夹)之下运行

3、把刚刚创建的项目的库里配置文件提出来，作为可修改的配置部分

npm run eject

如果报错：

This git repository has untracked files or uncommitted changes:... 

经网上资料参考得知git惹的祸
主要问题是脚手架添加.gitgnore文件，但是却没有本地仓库，依次执行一下就可以了
#git init
#git add .
#git commit -m “saving before ejecting”

4、执行npm start测试是否配置运行没问题

如果这个报错了，我的也报了哈：

./src/index.js
Error: [BABEL] D:\react_test\aaa\src\index.js: Cannot find module '@babel/plugin-transform-react-jsx-self' (While processing: "D:\\react_test\\aaa\\node_modules\\babel-preset-react-app\\index.js$1")
    at Array.reduce (<anonymous>)

就把node_modules这个文件夹和它里面的东西都删了，然后运行yarn install
再用npm start 就可以启动了

5、执行yarn start测试yarn是否没问题

6、用yarn安装antd-mobile

yarn add antd-mobile --save

7、用yarn安装按需加载插件

 yarn add babel-plugin-import --save-dev

8、执行yarn start测试yarn安装是否没问题

9、设置按需加载ant默认样式(css样式)

打开下面的文件，搜索babel-loader

xxx/config/webpack.config.js

注：现在这个文件有两个babel-loader，修改上面的，也就是babelrc没有设置false的，我觉得应该是默认是true吧，所以就只改了上面的。

在这个对象的options->plugins里面，加上这句

["import", { libraryName: "antd-mobile", style: "css" }], // `style: true` 会加载 less 文件

以上，我觉得是比较简单的创建方式，和官方建议的有点出入，但是这么安装就不报错了哈哈哈，还不错。

d.用法

官网很多组件可以使用，自己也可以写一个组件，然后多人开发可以公共出来共用。
地址：https://mobile.ant.design/docs/react/introduce-cn

e.改进

小白刚入坑，正在努力中。。。有问题可以和我讨论。。