有个小伙伴跟我说,已经毕业了,开始实习了。但公司现在用的还是Vue ,领导说是过段时间让他用React做项目,先自己学习起来。
我给他找了一些文档,顺便着呢,反正自己也写博客,自己也写一份吧,希望可以帮助需要的人们。
目录
[1 项目安装](#1 项目安装)
[1.1 选定目录,启动终端](#1.1 选定目录,启动终端)
[1.2 安装 create-react-app 命令](#1.2 安装 create-react-app 命令)
[1.3 创建项目](#1.3 创建项目)
[1.4 查看目录文件](#1.4 查看目录文件)
[1.5 启动项目](#1.5 启动项目)
[2 一定会用到的第三方库](#2 一定会用到的第三方库)
[2.1 js-tool-big-box](#2.1 js-tool-big-box)
[2.1.1 时间日期类](#2.1.1 时间日期类)
[2.1.2 网页store类](#2.1.2 网页store类)
[2.1.3 事件类](#2.1.3 事件类)
[2.1.4 Number类](#2.1.4 Number类)
[2.1.5 String类](#2.1.5 String类)
[2.1.6 正则验证类](#2.1.6 正则验证类)
[2.1.7 ajax类](#2.1.7 ajax类)
[2.1.8 data数据类](#2.1.8 data数据类)
[2.1.9 browser浏览器类](#2.1.9 browser浏览器类)
[2.2 less或者sass预处理器](#2.2 less或者sass预处理器)
[2.3 axios请求库](#2.3 axios请求库)
[2.4 UI库](#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 组件库)