当前位置:首页 » 《随便一记》 » 正文

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

21 人参与  2024年11月05日 18:02  分类 : 《随便一记》  评论

点击全文阅读


有个小伙伴跟我说,已经毕业了,开始实习了。但公司现在用的还是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 组件库)


点击全文阅读


本文链接:http://zhangshiyu.com/post/182910.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 祖母寿宴,侯府冒牌嫡女被打脸了(沈屿安秦秀婉)阅读 -
  • 《雕花锦年,昭都旧梦》(裴辞鹤昭都)完结版小说全文免费阅读_最新热门小说《雕花锦年,昭都旧梦》(裴辞鹤昭都) -
  • 郊区41号(许洛竹王云云)完整版免费阅读_最新全本小说郊区41号(许洛竹王云云) -
  • 负我情深几许(白诗茵陆司宴)完结版小说阅读_最热门小说排行榜负我情深几许白诗茵陆司宴 -
  • 九胞胎孕妇赖上我萱萱蓉蓉免费阅读全文_免费小说在线看九胞胎孕妇赖上我萱萱蓉蓉 -
  • 为保白月光,侯爷拿我抵了债(谢景安花田)小说完结版_完结版小说全文免费阅读为保白月光,侯爷拿我抵了债谢景安花田 -
  • 陆望程映川上官硕《我的阿爹是带攻略系统的替身》最新章节阅读_(我的阿爹是带攻略系统的替身)全章节免费在线阅读陆望程映川上官硕
  • 郑雅琴魏旭明免费阅读_郑雅琴魏旭明小说全文阅读笔趣阁
  • 头条热门小说《乔书意贺宴临(乔书意贺宴临)》乔书意贺宴临(全集完整小说大结局)全文阅读笔趣阁
  • 完结好看小说跨年夜,老婆初恋送儿子故意出车祸_沈月柔林瀚枫完结的小说免费阅读推荐
  • 热推《郑雅琴魏旭明》郑雅琴魏旭明~小说全文阅读~完本【已完结】笔趣阁
  • 《你的遗憾与我无关》宋怀川冯洛洛无弹窗小说免费阅读_免费小说大全《你的遗憾与我无关》宋怀川冯洛洛 -

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1