当前位置： 首页 > news >正文

React简介

news 文章来源：https://blog.csdn.net/qq_40850839/article/details/133465646 2024/10/28 16:24:28

react作为前端主流框架之一，因其语法接近原生JavaScript语法而广受欢迎。其生态丰富，常用的就有react-router、react-redux等插件，还有与其匹配的UI组件库antd。而且其还有用于移动端开发的react-native库，因此，react值得我们学习。

react是什么

react是一个由facebook开发，并且开源的，适用于构建用户界面的JavaScript框架。是一个把数据渲染成html页面的JavaScript框架。

为什么要学

  1. 原生JavaScript操作DOM繁琐，效率低。
  2. 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
  3. 原生JavaScript没有组件化编码方案，代码复用率低

react的特点

  1. 采用组件化模式、声明式编码，提高开发效率及组件复用率
  2. 在React Native中可以使用React语法进行移动端开发
  3. 使用虚拟DOM和优秀的Diffing算法，尽量减少与真实DOM的交互

jsx

jsx是一种模板语法，它允许在JavaScript中插入html模板。在react中它为程序提供视图元素。

为什么使用jsx

使用JavaScript创建虚拟DOM繁琐，jsx减少创建虚拟DOM的繁琐程度。

jsx全称是JavaScript XML，是React定义的一种语法规则，其本质是React.createNode(ele,prop,children)的语法糖。

jsx语法规则

  1. 定义虚拟DOM不能使用’’
  2. 标签中混入js表达式时使用{}
  3. 使用样式的类名使用className
  4. 使用内联样式使用对象中写样式
  5. 虚拟DOM必须只有一个根标签
  6. 标签必须闭合
  7. 如果小写字母开头，则将改标签转为HTML中同名元素；如果HTML中无同名元素则报错
  8. 如果大写字母开头，React就渲染对应的组件，如果组件没有定义则报错
  9. 列表中的每个元素必须有一个key

起步

  1. 创建react项目
npx create-next-app@latest

这时我们已经有了一个新的项目，使用编辑器打开之后，在终端中输入 npm rrun start即可运行项目

相关文章：

React简介

react作为前端主流框架之一，因其语法接近原生JavaScript语法而广受欢迎。其生态丰富，常用的就有react-router、react-redux等插件，还有与其匹配的UI组件库antd。而且其还有用于移动端开发的react-native库，因此，react值…...

编程日记 2023/10/2 4:18:06

链表经典面试题(一)

面试题 1.反转链表的题目2.反转链表的图文分析3.反转链表的代码实现 1.反转链表的题目 2.反转链表的图文分析 我们在实现反转链表的时候,是将后面的元素变前面，前面的元素变后面，那么我们是否可以理解为，用头插法的思想来完成反转链表呢&…...

编程日记 2023/10/2 4:17:05

体验亚马逊的 CodeWhisperer 感觉

CodeWhisperer 是亚马逊推出的辅助编程工具，在程序员写代码时，它能根据其内容生成多种代码建议。 CodeWhisperer 目前已支持近10几种语言，我是用 java 语言，用的开发工具是 idea，说一下我用的情况。 亚马逊云科技开发…...

编程日记 2023/10/2 4:16:04

6、行内元素和块元素

6、行内元素和块元素 一、块元素 无论内容多少，该元素独占一行 如p标签、标题标签（h1-h6…） 二、行内元素 内容撑开宽度、左右都是行内元素的可以排在一行 一些元素如果能够摆放在一行都可以用行内元素，但是如果需要换行就需…...

编程日记 2023/10/2 4:13:01

LeetCode 面试题 08.01. 三步问题

文章目录 一、题目二、Java 题解 一、题目 三步问题。有个小孩正在上楼梯，楼梯有n阶台阶，小孩一次可以上1阶、2阶或3阶。实现一种方法，计算小孩有多少种上楼梯的方式。结果可能很大，你需要对结果模1000000007。 示例1: 输入&…...

编程日记 2023/10/2 4:12:00

[CSCCTF 2019 Qual]FlaskLight 过滤 url_for globals 绕过globals过滤

目录 subprocess.Popen FILE warnings.catch_warnings site._Printer 这题很明显就是 SSTI了 源代码 我们试试看 {{7*7}} 然后我们就开始吧 原本我的想法是直接{{url_for.__globals__}} 但是回显是直接500 猜测过滤 我们正常来吧 {{"".__class__}} 查看当前…...

编程日记 2023/10/2 4:10:59

1分钟快速实现Redis数据对比

在上篇「Redis高效、安全的不停机数据迁移方案」的文章中，介绍了NineData在Redis迁移场景下的性能和优势。因为数据在主备、多云和多区域环境之间的迁移流动，难免会产生数据一致性的问题，而结构与数据不一致往往是导致故障的原因之一。所以&a…...

编程日记 2023/10/2 4:08:58

ASUS华硕天选4笔记本电脑FX507VV原厂Windows11系统

下载链接：https://pan.baidu.com/s/1W9tedHI3iFjaHju5eLkQ6g?pwd8dl2 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、华硕电脑管家、奥创控制中心等预装程序 由于时间关系,绝大部分资料没有上传，不是想要的型号，请联系客服获取。...

编程日记 2023/10/2 4:07:57

Vue3配置路由

文章目录 一、创建index.js二、main.js的配置三、在App.vue中引入 一、创建index.js 在src文件夹中创建router文件夹，并在其中创建index.js文件 //引入路由对象 import { createRouter,createWebHistory } from vue-router import PufMac from "../views/puf…...

编程日记 2023/10/2 4:05:55

力扣 -- 97. 交错字符串

解题步骤： 参考代码： class Solution { public:bool isInterleave(string s1, string s2, string s3) {int ms1.size();int ns2.size();//先判断s1的长度s2的长度是否等于s3的长度，如果不等，则s1和s2不可能拼接成s3if(mn!s3.size…...

编程日记 2023/10/2 4:04:54

【剑指Offer】4.二维数组中的查找

题目 在一个二维数组array中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该…...

编程日记 2023/10/2 4:03:53

独立按键控制LED亮灭、独立按键控制LED状态、独立按键控制LED显示二进制、独立按键控制LED移位——“51单片机”

各位CSDN的uu们你们好呀，今天依旧是小雅兰的51单片机的内容，内容主要是：独立按键控制LED亮灭、独立按键控制LED状态、独立按键控制LED显示二进制、独立按键控制LED移位，下面，让我们进入51单片机的世界吧！&a…...

编程日记 2023/10/2 4:01:51

chrome extensions mv3通过content scripts注入/获取原网站的window数据

开发插件的都知道插件的content scripts和top window只共享Dom不共享window和其他数据，如果想拿挂载在window的数据还有点难度，下面会通过事件的方式传递cs和top window之间的数据写一个例子 代码 manifest.json 这里只搞了2个js，content.…...

编程日记 2023/10/2 4:00:50

震坤行API接口聚合解析，实现根据ID取商品详情

震坤行是一个工业品服务平台，提供了API接口供开发者使用。要根据ID获取商品详情，您需要使用震坤行API接口并进行相应的请求。 以下是使用震坤行API接口根据ID获取商品详情的示例代码（使用Python编写）： import reques…...

编程日记 2023/10/2 3:56:47

mencpy和strcpy的区别？

今天刷题时遇到了这个问题，记录一下。 strcpy比较简单，就是拷贝字符串，遇到\0时结束拷贝。 memcpy用来做内存拷贝，可以拷贝任何数据类型的对象并指定拷贝数据的长度：char a[100],b[50]; memcpy(b, a, sizeof(b)); 总结…...

编程日记 2023/10/2 3:54:45

机器人过程自动化(RPA)入门 8. 异常处理、调试和日志记录

有时，自动化程序可能无法执行。为了处理此类情况，我们使用异常处理活动。在本章中，我们将从UiPath中可用的各种类型的异常处理方法、您可能遇到的异常以及如何处理它们开始。我们还将学习日志记录。本章涉及的一个重要主题是调试，以检查工作流是否正常工作，并更正任何错误…...

编程日记 2023/10/2 3:52:42

tomcat总结笔记

文章目录 Tomcat1、什么是tomcat?2、rpm安装jre环境3、源码安装jdk环境4、安装tomcat --源码安装5、相关目录文件webappsTomcat 配置文件目录介绍（conf）tomcat的相关管理命令在$prefix/bin目录下 实战1、：配置nginx动静分离实战2、配置基于t…...

编程日记 2023/10/2 3:50:41

中断向量控制器（NVIC）

1. 什么是中断 在处理器中，中断是一个过程，即CPU在正常执行程序的过程中，遇到外部/内部的紧急事件需要处理，暂时中止当前程序的执行，转而去为处理紧急的事件，待处理完毕后再返回被打断的程序处继续往下执行…...

编程日记 2023/10/2 3:49:40

QT配置FFmpeg出现错误原因

文章目录 QT配置ffmpeg出现： undefined reference to "avcodec_version"没有配置环境变量QT和FFmpeg的版本不对应直接添加FFmpeg的头文件没有在.pro文件添加路径 QT 程序异常退出没有在debug文件里面存放dll库 QT配置ffmpeg出现： undefined re…...

编程日记 2023/10/2 3:47:38

列出使用Typescript的一些优点?

使用Typescript有以下优点： 类型安全：Typescript是一种静态类型语言，它要求在编码阶段明确定义变量和函数的类型。这种类型安全可以减少在运行时出现错误的可能性，并提高代码的可读性和可维护性。代码可读性和可维护性&#xff1…...

编程日记 2023/10/2 3:46:37

如何做好测试？（四）集成测试（Integration Testing, IT）

1. 集成测试的详细介绍： 集成测试（Integration Testing, IT），是一种软件测试方法，旨在验证不同组件、模块或子系统之间的交互和集成是否正常工作。它侧重于测试系统的组件之间的接口和数据传递，以确保它们…...

编程日记 2023/10/2 3:44:35

二叉树前序、中序、后序遍历（递归法、迭代法）

前序遍历：（练习题） 迭代法一： int TreeSize(struct TreeNode* root){return rootNULL?0:TreeSize(root->left)TreeSize(root->right)1; }int* preorderTraversal(struct TreeNode* root, int* returnSize){if(rootNULL){*…...

编程日记 2023/10/2 3:37:28

npm ,yarn 更换使用国内镜像源，淘宝源

背景 文章首发地址 在平时开发当中，我们经常会使用 Npm，yarn 来构建 web 项目。但是npm默认的源的服务器是在国外的，如果没有梯子的话。下载速度会特别慢。那有没有方法解决呢？ 其实是有的，设置国内镜像即可&#x…...

编程日记 2023/10/2 3:36:27

真正理解浏览器渲染更新流程

浏览器渲染更新过程 文章目录 浏览器渲染更新过程帧维度解释帧渲染过程一些名词解释Renderer进程GPU进程rendering(渲染) vs painting(绘制)⭐位图纹理Rasterize(光栅化) 1. 浏览器的某一帧开始：vsync2. Input event handlers3. requestAnimationFrame4. 强制重排(可…...

编程日记 2023/10/2 3:35:26

市场调研的步骤与技巧：助你了解市场需求

在当今快速发展的市场中，进行有效的市场研究对于了解消费者的行为、偏好和趋势至关重要。适当的市场研究可以帮助公司获得对目标受众的有价值的见解，创造更好的产品和服务，并提高客户满意度。今天，小编和大家一起讨论一下怎么做市…...

编程日记 2023/10/2 3:34:26

ansible的个人笔记使用记录-个人心得总结

1.shell模块使用，shell模块------执行命令，支持特殊符 ansible all -m shell -a yum -y install nginx ansible all -m shell -a systemctl restart nginx ansible all -m shell -a systemctl stop nginx && yum -y remove nginx2. file模块…...

编程日记 2023/10/2 3:31:23

相机数据恢复！详细步骤解析（2023新版）

和朋友在外面旅游用相机拍了好多有意义的照片和视频，但是导入电脑后不知道是被我删除了还是什么原因，这些照片都不见了，请问有方法恢复吗？” 在数字摄影时代，我们依赖相机记录珍贵的瞬间。然而，相机数据丢失…...

编程日记 2023/10/2 3:30:23

LNK2001: unresolved external symbol __imp___std_init_once_begin_initialize 问题解决

LNK2001: unresolved external symbol __imp___std_init_once_begin_initialize 解决 文章目录 问题背景方法一：使用预编译指令方法二：使用相同的环境 参考链接附录 问题背景 Visual Studio 2019 对 CMakeLists.txt 的支持不是很好，使用 “文…...

编程日记 2023/10/2 3:29:20

修改switch Nand无线区码 以支持高频5G 信道

环境：NS switch 问题：日版，港版无法连接大于44信道的5G WIFI 解决办法：修改PRODINFO.dec的WIFI 区域码 背景：我的switch是最早买的港版的一批，WIFI 只能连接日本的信道，家里的路由器是国行的&am…...

编程日记 2023/10/2 3:28:19

基于SpringBoot的课程答疑系统

目录 前言 一、技术栈 二、系统功能介绍 学生信息管理 科目类型管理 老师回答管理 我的收藏管理 学生问题 留言反馈 交流区 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网信息的飞速发展，无纸化作业变成了一种趋势&#x…...

编程日记 2023/10/2 3:26:17

2017网站设计尺寸/seo引擎优化方案

查找基本分类如下： 线性表的查找 顺序查找折半查找分块查找树表的查找 二叉排序树平衡二叉树B树B树散列表的查找今天介绍二叉排序树。 二叉排序树 ( Binary Sort Tree ) 又称为二叉查找树，它是一种对排序和查找都很有用的特殊二叉树。 1. 二叉排序树的定…...

编程日记 2024/10/28 16:01:53

平谷区住房和城乡建设委员会网站/seo编辑是干什么的

C语言#define的用法，C语言宏定义 #define 叫做宏定义命令，它也是C语言预处理命令的一种。所谓宏定义，就是用一个标识符来表示一个字符串，如果在后面的代码中出现了该标识符，那么就全部替换成指定的字符串。 我们先通…...

编程日记 2024/10/28 14:05:03

招聘网站建设/b站网站推广mmm

我的上网本只有1024x768的分辨率，运行文华6要求更高分辨率显示器。 通过对显示器安装驱动，获得虚拟的高分辨率支持。 1、打开显示器的属性，选择：设置->高级->监视器；2、这里我们可以看到监视器类型是默认的”即插…...

编程日记 2024/10/28 12:09:29

地坪漆东莞网站建设技术支持/深圳推广公司介绍

1.你写的程序能让客户随意操作吗？误输入数据、不小心做了非常规的操作程序是什么反应？ 2.如果向银行贷款10万元，年利率6.5%，期限为10年，那么每月等额本息还款多少？（算复利条件下等额还款金额&a…...

编程日记 2024/10/28 12:07:26

企业网站建设咨询/产品营销方案策划书

发现百度推出影视搜索（http://movie.baidu.com/），没想到还要钱钱，30大洋/月，呵呵……我看这个服务我还是不会选择用了。不过，要真的生意好，保不准它还要开始对MP3下载收费，这是笑谈&…...

编程日记 2024/10/28 11:28:27

网站建设服务器有哪些/seo外包优化网站

使用环境： python 3.5 原因： docx包中导入该模块，而python3.x版本移除exceptions模块。即docx包没有适配python3 解决办法： 1.使用管理员身份打开cmd，进行卸载docx，pip uninstall docx 2.下载python_doc…...

编程日记 2024/10/28 10:09:22