前端新手小白的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 组件库)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/45264.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

归并树的带权路径长度

归并树(又称霍夫曼树,Huffman Tree)是一种用于数据压缩的树形结构,通过构建具有最小带权路径长度的树来实现高效编码。在归并树中,带权路径长度(Weighted Path Length,WPL)是衡量树的…

破解Memcached缓存数据不均:优化策略与实践指南

破解Memcached缓存数据不均:优化策略与实践指南 Memcached作为广泛使用的高性能分布式内存缓存系统,在处理大规模数据缓存时,可能会遇到缓存数据分布不均的问题。这不仅影响缓存效率,还可能导致系统性能瓶颈。本文将深入探讨Memc…

无需构建工具,快速上手Vue2 + ElementUI

无需构建工具,快速上手Vue2 ElementUI 在前端开发的世界中,Vue.js以其轻量级和易用性赢得了开发者的青睐。而Element UI,作为一个基于Vue 2.0的桌面端组件库,提供了丰富的界面组件,使得构建美观且功能丰富的应用变得…

前端JS特效第30集:jQuery焦点图插件edslider

jQuery焦点图插件edslider&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatib…

Vmware_Mysql8.0.31_安装部署

创建mysql目录&#xff0c;将资料上传到该目录 卸载MySQL依赖&#xff0c;虽然机器上没有装MySQL&#xff0c;但是这一步不可少 sudo yum remove mysql-libs 下载依赖并安装 sudo yum install libaio udo yum -y install autoconf 切换到hadoop102的root用户 su root 执…

C-MAPSS数据集-RUL剩余寿命预测

RUL剩余寿命预测 1. C-MAPSS数据集简介1.1 数据特点1.2 数据划分2. Pytorch 寿命预测简单测试2.1 数据可视化2.2 训练数据和测试数据结构分析2.3 训练数据的参数(工况参数+传感监测参数)2.4 剩余寿命预测问题2.5 简单预测测试2.6 方法局限性总结参考资料1. C-MAPSS数据集简介…

大模型【Qwen2-7B本地部署(WEB版)】(windows)

大模型系列文章目录 Qwen2-7B本地部署&#xff08;WEB版&#xff09; 前言 大模型是截止2024年上半年最强的AI&#xff0c;Qwen2是刚出来的号称国内最强开源大模型。这是大模型系列的第一篇文章&#xff0c;旨在快速部署看看最近出来的大模型效果怎么样&#xff0c;效果ok的话…

Maven 项目编译提示 unparseable pom 的解决方法

【问题描述】 手动下载了个项Java Web 项目&#xff0c;导入在 eclipse 开发工具里。然后一股脑地右键 “maven clean” 。然后发现操作 maven 什么东西都提示 "unparseable POM"字眼。结果就是根本更新不了本地的 maven 仓库。 【答案】 找到 eclipse 的 “windo…

算法学习day11

一、用最少数量的箭引爆气球() 一支弓箭可以沿着 x 轴从不同点 完全垂直 地射出。在坐标 x 处射出一支箭&#xff0c;若有一个气球的直径的开始和结束坐标为 xstart&#xff0c;xend&#xff0c; 且满足 xstart ≤ x ≤ xend&#xff0c;则该气球会被 引爆 。 输入&#xff…

Xcode持续集成之道:自动化构建与部署的精粹

标题&#xff1a;Xcode持续集成之道&#xff1a;自动化构建与部署的精粹 在快节奏的软件开发中&#xff0c;持续集成&#xff08;Continuous Integration, CI&#xff09;是提升开发效率和软件质量的关键实践。Xcode作为苹果生态中的核心开发工具&#xff0c;提供了与多种持续…

上机算法刷题暑期篇(一) —— AcWing 3692. 最长连续公共子序列(西电)

题目链接 AcWing 3692. 最长连续公共子序列 题目详情 题目解析 我们一看到题目,最长和连续子串&#xff0c;我们第一反应应该是什么?没错,就是dp,一般来说&#xff0c;子串问题常见的解法有两种&#xff1a; 双指针 dp 这道题无疑就是一道最常见的dp问题&#xff0c;而dp问…

昇思25天学习打卡营第11天 | FCN图像语义分割

昇思25天学习打卡营第11天 | FCN图像语义分割 文章目录 昇思25天学习打卡营第11天 | FCN图像语义分割FCN模型数据处理下载数据集创建训练集可视化训练集 网络构建网络结构张量操作 训练准备导入VGG-16部分预训练权重&#xff1a;损失函数模型评估指标 模型训练模型评估模型推理…

练习:随机点名器5

题目&#xff1a; TxT文件中事先准备好一些学生信息&#xff0c;每个学生的信息独占一行。,要求1&#xff1a;每次被点到的学生&#xff0c;再次被点到的概率在原先的基础上降低一半。 举例&#xff1a;80个学生&#xff0c;点名5次&#xff0c;每次都点到小A&#xff0c;概率…

网络规划设计师考试大纲

网络规划设计师考试大纲 网络规划设计师一年考一次&#xff0c;下半年开考&#xff0c;共有三个科目&#xff1a;综合知识、案例分析、论文。 科目包括&#xff1a; (1)网络规划与设计综合知识&#xff0c;考试时间为150分钟&#xff0c;笔试&#xff0c;选择题; (2)网络规划与…

常见 Web漏洞分析与防范研究

前言&#xff1a; 在当今数字化时代&#xff0c;Web应用程序扮演着重要的角色&#xff0c;为我们提供了各种在线服务和功能。然而&#xff0c;这些应用程序往往面临着各种潜在的安全威胁&#xff0c;这些威胁可能会导致敏感信息泄露、系统瘫痪以及其他不良后果。 SQL注入漏洞 …

《昇思25天学习打卡营第16天|基于MindNLP+MusicGen生成自己的个性化音乐》

MindNLP 原理 MindNLP 是一个自然语言处理&#xff08;NLP&#xff09;框架&#xff0c;用于处理和分析文本数据。 文本预处理&#xff1a;包括去除噪声、分词、词性标注、命名实体识别等步骤&#xff0c;使文本数据格式化并准备好进行进一步分析。 特征提取&#xff1a;将文…

【C++】CMake入门

CMake 是一个跨平台的构建系统生成工具&#xff0c;可以生成用于编译和链接应用程序的构建文件&#xff08;如 Makefile 或 Visual Studio 工程文件&#xff09;。 安装 CMake Windows 可以从 CMake官网 下载并安装 Windows 版本的 CMake。安装完成后&#xff0c;确保将 CMak…

5 MySql

5 MySql 一、简介二、SQL语言2.1 导入外部SQL文件2.2 显示表结构2.3 与创建数据库相关的语句2.4 与表相关的语句2.5 操作表中的数据2.6 7种基本的sql查询 三、SQL的注意点3.1 与集合函数相关3.2 SQL语句的书写与执行过程 四、约束 constraint4.1 作用4.2 功能分类4.3 自增 五、…

【web、DNS综合实验】

题目&#xff1a; 创建两个用户www.zhangsan.com 加密&#xff0c;www.lisi.com 目录&#xff1a;/www/zahngsan /www/lisi 主服务器做 dns web 从服务器做dns 在从服务器上能实现curl -k https://www.zhangsan.com ok&#xff0c;curl http://www.lisi.com ok 思路&#…

python爬虫学习(三十三天)---多线程上篇

hello&#xff0c;小伙伴们&#xff01;我是喔的嘛呀。今天我们来学习多线程方面的知识。 目录 一、了解多线程 &#xff08;1&#xff09;大概描述 &#xff08;2&#xff09;多线程爬虫的优势 &#xff08;3&#xff09;多线程爬虫的实现方式 &#xff08;4&#xff09…