前端新手小白的React入坑指南

有个小伙伴跟我说，已经毕业了，开始实习了。但公司现在用的还是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 时间日期类 

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

2.1.2 网页store类 

1. 获取url中的参数值
2. 设置cookie；
3. 获取cookie；
4. 删除cookie；
5. 设置localStorage;
6. 获取localStorage

2.1.3 事件类 

1. 防抖
2. 节流

2.1.4 Number类 

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

2.1.5 String类

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

2.1.6 正则验证类

1.  邮箱格式验证；
2. 手机号格式验证；
3. url格式验证；
4. 身份证号格式验证；
5. IP地址格式验证；
6. 邮政编码格式验证；

7. 判断是否是Unicode字符；

8. 检测密码强度值；

2.1.7 ajax类

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

2.1.8 data数据类

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

2.1.9 browser浏览器类

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

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

4. 打开全屏 和 关闭全屏；

5. 获取浏览器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 组件库)