有个小伙伴跟我说，已经毕业了，开始实习了。但公司现在用的还是Vue，领导说是过段时间让他用React做项目，先自己学习起来。

我给他找了一些文档，顺便着呢，反正自己也写博客，自己也写一份吧，希望可以帮助需要的人们。

目录

1 项目安装

1.1 选定目录，启动终端

1.2 安装 create-react-app 命令

1.3 创建项目

1.4 查看目录文件

1.5 启动项目

2  一定会用到的第三方库 

2.1 js-tool-big-box

2.1.1 时间日期类 

2.1.2 网页store类 

2.1.3 事件类 

2.1.4 Number类 

2.1.5 String类

2.1.6 正则验证类

2.1.7 ajax类

2.1.8 data数据类

2.1.9 browser浏览器类

2.2 less或者sass预处理器

2.3 axios请求库

2.4 UI库

---

1 项目安装

1.1 选定目录，启动终端

你可以在自己电脑里，找一个文件夹，做为这次React项目练手的目录，然后在文件夹的url处，输入 “cmd” ，终端就弹出来了，然后还可以指定到目标目录下：

 

就是这个地方，输入“cmd”，然后回车，就可以唤起终端弹窗了。

1.2 安装 create-react-app 命令

执行以下命令，-g 表示全局安装一下

npm install -g create-react-app

1.3 创建项目

 比如说，我们要创建一个名字叫 js-tool-big-box-react 的项目，那么可以执行以下命令：

create-react-app js-tool-big-box-react

 然后终端就会进行安装，安装可能会稍微有点慢，耐心等待一下，安装完成后如下图所示：

1.4 查看目录文件

public目录下，存放着我们熟悉的html文件，以及一些静态所需文件；src目录下，是项目开发的重要目录再往下 index.js 是入口文件你可以试着在App.js中做一下改动，然后查看网页效果 

1.5 启动项目

上面的图片中，我们用VSCode编辑器，打开了React项目，这个时候，在控制台输入命令：

npm start 

然后，项目会主动帮助我们唤起浏览器， http://localhost:3000/ 的地址，然后你就可以看到转动的React图标啦，项目就算安装完成了。

 

2  一定会用到的第三方库 

项目安装完成以后呢，就要着手项目开发了。正所谓工欲善其事，必先利其气。在项目开发之前，我们先说几个，前端项目开发中，一定会用到的第三方库。用了这几个第三方库呢，可以帮我们开发更高效。

2.1 js-tool-big-box

先来个 js-tool-big-box 的学习地址，点我：js-tool-big-box工具库学习地址

js-tool-big-box几乎是前端开发项目，必用的一个npm库，他的功能丰富，使用便捷，可以让前端开发及其高效。目前他的功能包括但不限于：

2.1.1 时间日期类 

时间日期的转换；更灵活的时间格式；更个性化的时间获取；某个时间点距离现在的时间段（更加详细的返回信息）判断平年还是闰年；某个月有多少天；属相；一年中的法定节假日；获取全球重点城市时间；

2.1.2 网页store类 

获取url中的参数值设置cookie；获取cookie；删除cookie；设置localStorage;获取localStorage

2.1.3 事件类 

防抖节流

2.1.4 Number类 

 千分位逗号分割；判断是否大于0；判断是否大于0的整数；生成指定范围内的随机数；生成指定位数的随机数；数字转小写中文；数字转大写中文；

2.1.5 String类

字符串反转；横岗转小驼峰横岗转大驼峰；版本号比较；获取一个字符串的字节长度；生成uuid；根据身份证号获取性别、年龄和出生日期；字符串中间加特殊符号，隐藏关键信息；字符串大小写字母转换；

2.1.6 正则验证类

 邮箱格式验证；手机号格式验证；url格式验证；身份证号格式验证；IP地址格式验证；邮政编码格式验证；

判断是否是Unicode字符；

检测密码强度值；

2.1.7 ajax类

发送jsonp请求；下载文件纯功能版本；下载文件，fetch + 下载功能版本；

2.1.8 data数据类

数组中获取随机个数的值；复制文字到剪贴板；数组去重；获取更详细的数据类型；数值型数组排序（正序和倒序）；对象型数组排序（正序和倒序）

2.1.9 browser浏览器类

判断当前是否手机端浏览器；判断元素是否处于可视范围内；

获取当前浏览器向上滚动还是向下滚动，获取当前距离顶部和底部的距离；

打开全屏 和 关闭全屏；

获取浏览器userAgent以及详细信息；

2.2 less或者sass预处理器

传统的css编写方式比较低端，使用less或者sass这种预处理器，可以让CSS开发高效起来，非常推荐使用。

学习文档(Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com))

2.3 axios请求库

一般项目都会涉及到与服务端交互，而这个时候你可以使用axios发送请求。

axios学习文档(axios中文文档|axios中文网 | axios (axios-js.com))

2.4 UI库

针对React，如果是C端开发呢，我们还是希望可以手写一些比较轻量级的UI库，但如果是B端呢，我们推荐Ant Design。

Ant Design学习文档(Ant Design - 一套企业级 UI 设计语言和 React 组件库)