前端新手小白的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,一经查实,立即删除!

相关文章

无需构建工具,快速上手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 执…

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

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

算法学习day11

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

上机算法刷题暑期篇(一) —— 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;损失函数模型评估指标 模型训练模型评估模型推理…

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

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

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

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

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 自增 五、…

头歌资源库(25)地图着色

一、 问题描述 任何平面区域图都可以用四种颜色着色&#xff0c;使相邻区域颜色互异。这就是四色定理。要求给定区域图&#xff0c;排出全部可能的着色方案。例如&#xff0c;区域图如下图所示&#xff1a; 要求用四种颜色着色。 则输入&#xff1a; 10 4 &#xff08;分别表示…

python-27-零基础自学python

学习内容&#xff1a;《python编程&#xff1a;从入门到实践》第二版 知识点&#xff1a; 统计文本单词数、 解决问题&#xff1a; gbk codec cant decode byte 0x9d in position 995: illegal multibyte sequence” 练习内容&#xff1a; 练习10-10&#xff1a;常见单词 …

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第二十六章 安装超级终端软件

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

短视频矩阵系统是什么?怎么搭建短视频矩阵系统?一文了解矩阵模式

在数字时代&#xff0c;短视频已成为信息传播的新宠&#xff0c;而短视频矩阵系统则是品牌和个人在短视频领域取得突破的重要工具。那么&#xff0c;短视频矩阵系统究竟是什么&#xff1f;如何搭建这样一个高效的系统&#xff1f;它又能够解决哪些问题呢&#xff1f;本文将为您…

C#绘制阻抗圆图初步

阻抗圆图&#xff0c;或者叫史密斯图&#xff0c;是无线电设计方面用的&#xff1b; 基本的阻抗圆图如下&#xff0c; 下面尝试用C#能不能画一下&#xff1b; 先在网上找一个画坐标的C#类&#xff0c;它的效果如下&#xff1b; 自己再增加一个函数&#xff0c;可以绘制中心在…

地址翻译过程(TLB-->页表-->Cache-->主存-->外存)

目录 1.地址结构 2.查找快表或页表&#xff1a;从虚拟地址--->物理地址 3.通过物理地址访问数据 设某系统满足以下条件&#xff1a; •有一个TLB与一个data Cache •存储器以字节为编址单位 •虚拟地址 14位 •物理地址 12位 •页面大小为 64B •TLB 为四路组相联&#x…

消防灭火设备软体水枪的使用方法

软体水枪是一款专为消防、应急救援等领域设计的灭火工具。其内胆采用大容量设计&#xff0c;能够储存足够的灭火剂&#xff0c;满足长时间、大范围的灭火需求。软体水枪是一种高效、便捷的灭火工具。它利用压力和流体力学原理&#xff0c;通过扣动扳机将储水箱中的水以高速喷射…

《金山 WPS AI 2.0:重塑办公未来的智能引擎》

AITOP100平台获悉&#xff0c;在 2024 世界人工智能大会这一科技盛宴上&#xff0c;金山办公以其前瞻性的视野和创新的技术&#xff0c;正式发布了 WPS AI 2.0&#xff0c;犹如一颗璀璨的星辰&#xff0c;照亮了智能办公的新征程&#xff0c;同时首次公开的金山政务办公模型 1.…

PyTorch | 加速模型训练的妙招

引言 提升机器学习模型的训练速度是每位机器学习工程师的共同追求。训练速度的提升意味着实验周期的缩短&#xff0c;进而加速产品的迭代过程。同时&#xff0c;这也表示在进行单一模型训练时&#xff0c;所需的资源将会减少。简而言之&#xff0c;我们追求的是效率。 熟悉 PyT…

SpringSecurity框架【认证】

目录 一. 快速入门 二. 认证 2.1 登陆校验流程 2.2 原理初探 2.3 解决问题 2.3.1 思路分析 2.3.2 准备工作 2.3.3 实现 2.3.3.1 数据库校验用户 2.3.3.2 密码加密存储 2.3.3.3 登录接口 2.3.3.4 认证过滤器 2.3.3.5 退出登录 Spring Security是Spring家族中的一个…