React 入门

news2024/11/17 3:44:49

一、官网地址

  1. 英文官网: https://reactjs.org/
  2. 中文官网: https://react.docschina.org/

二、React 特点

  1. 声明式编码
  2. 组件化编码
  3. React Native 编写原生应用
  4. 高效(优秀的 Diffing 算法)
  5. 高效的原因:1.使用虚拟DOM,不总是直接操作页面真是DOM。2.DOM Diffing 算法,最小化页面重绘。

三、React 基本使用

3.1 效果图

3.2 引入相关 js 库

1.react.js :  React 核心库

2.react-dom.js : 提供操作DOM 的react 扩展库。

3.babel.min.js : 解析JSX 语法代码转为 JS 代码的库。

3.3 JSX(JavaScript XML)

语法:React.createElement(component,props,...children)

作用:用来简化创建虚拟 DOM

用法:var Jdom = <h1>Hello World!</h1>

标签名:HTML标签或其他标签

标签属性:HTML标签属性或其他

使用规则:

  1. 遇到“<”开头的代码,以标签的语法解析:html同名标签转换为html同名元素,其他标签需要特别解析。
  2. 遇到以“{”开头的代码,以JS语法解析:标签中的JS表达式必须用{ }包含。

3.4 babel.js

  1. 浏览器不能直接解析 JSX 代码,需要babel 转译为纯 JS 的代码才能运行。
  2. 只要用了 JSX,都要加上 type=“text/babel”,表示需要babel来处理。

3.5 渲染虚拟 DOM 

语法:ReactDOM.render(虚拟DOM,DOM容器)

作用:将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示。

参数说明:

参数一:纯 js 或jsx 创建的虚拟dom对象

参数二:用来包含虚拟  DOM 元素的真实 dom 元素对象。

3.6 完整代码展示

3.7 练习(代码下一个文章揭秘)

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

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

相关文章

从 Redis 开源协议变更到 ES 国产化:一次技术自主的机遇

引言 近日&#xff0c;Redis Labs 宣布其主导的开源项目 Redis 将采用双重源代码可用许可证&#xff08;RSALv2&#xff09;和服务器端公共许可证&#xff08;SSPLv1&#xff09;。这一重大决策标志着 Redis 从传统的 BSD 许可证向更加严格的控制权转变&#xff0c;同时也引发…

AlexNet网络模型

AlexNet 是一个深度卷积神经网络&#xff0c;由 Alex Krizhevsky、Ilya Sutskever 和 Geoffrey Hinton 在 2012 年的 ImageNet 大规模视觉识别挑战赛&#xff08;ILSVRC&#xff09;中首次提出并获得了显著的成功。它是深度学习历史上一个里程碑式的模型&#xff0c;对后来的深…

如何使用PL/SQL Developer工具导出clob字段的表?

1 准备测试数据 导出测试对象&#xff1a;表test_0102&#xff0c;others字段为clob类型 --创建中间表test_0101 create table test_0101( id number, name varchar2(20), others clob);--插入100条测试数据 beginfor i in 1..100 loopinsert into test_0101 values(i,i||_a,l…

文件批量重命名管理,一键将图片的名称进行统一重命名,高效管理文件

在数字时代&#xff0c;我们的生活中充满了各种文件&#xff0c;特别是图片文件。随着时间的推移&#xff0c;我们可能会遇到这样的问题&#xff1a;文件命名不规范&#xff0c;难以快速找到需要的图片。这时&#xff0c;一款强大的文件批量重命名管理工具就显得尤为重要。 首…

JavaScript(一)基础

文章目录 一、JS介绍JavaScript是什么JavaScript书写位置JavaScript的注释输入输出语法字面量 二、变量变量是什么变量基本使用变量的本质变量命名规则与规范变量拓展-数组var与let的区别 三、常量四、数据类型数据类型检测数据类型数据类型转换隐式转换显式转换 简单运算符断点…

git分支-基本分支与合并

问题假设 让我们通过一个简单的分支和合并的例子&#xff0c;演示在实际工作中可能会使用的工作流程。将按照以下步骤进行&#xff1a; 在网站上进行一些工作。为正在开发的新用户故事创建一个分支。在该分支上进行一些工作。 在这个阶段&#xff0c;我们可能会接到一个电话…

LC 144.二叉树的前序遍历

二叉树的前序遍历 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a; root [1,null,2,3] 输出&#xff1a;[1,2,3] 示例 2&#xff1a; 输入&#xff1a; root [] 输出&#xff1a;[] 示例 3&#xff1a; 输入&…

2024年 CS2最佳游戏启动项

引言&#xff1a; Counter-Strike 2&#xff08;CS 2&#xff09;是一款备受瞩目的游戏&#xff0c;而启动选项则是影响游戏性能和体验的关键因素之一。然而&#xff0c;有关所有选项都应该强制使用的说法并不正确。事实上&#xff0c;大多数选项可能对某些计算机并不适用&…

go 指针和内存分配

定义 了解指针之前&#xff0c;先讲一下什么是变量。 每当我们编写任何程序时&#xff0c;我们都需要在内存中存储一些数据/信息。数据存储在特定地址的存储器中。内存地址看起来像0xAFFFF&#xff08;这是内存地址的十六进制表示&#xff09;。 现在&#xff0c;要访问数据…

讲讲你对数据结构-线性表了解多少?

线性表 - 数组和矩阵 当谈到线性表时&#xff0c;数组和矩阵是两种常见的数据结构。 数组&#xff08;Array&#xff09;&#xff1a; 数组是有序的元素集合&#xff0c;可以通过索引来访问和操作其中的元素。它是最简单、最基本的数据结构之一。数组的特点包括&#xff1a; …

ctf_show笔记篇(web入门---SSRF)

ssrf简介 ssrf产生原理&#xff1a; 服务端存在网络请求功能/函数&#xff0c;例如&#xff1a;file_get_contens()这一类类似于curl这种函数传入的参数用户是可控的没有对用户输入做过滤导致的ssrf漏洞 ssrf利用: 用于探测内网服务以及端口探针存活主机以及开放服务探针是否存…

计算机网络:局域网的数据链路层

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

【2024红明谷】三道Web题目的记录

红明谷 文章目录 红明谷Web1 | SOLVED LaterWeb2 | UNSOLVEDWeb3 | SOLVED 容器已经关咯&#xff0c;所以有些场景只能靠回忆描述啦&#xff0c;学习为主&#xff0c;题目只是一个载体~ 本次比赛学习为主&#xff0c;确实再一次感受到久违的web题目的魅力了&#xff0c;可能也是…

C++实现二叉搜索树的增删查改(非递归玩法)

文章目录 一、二叉搜索树的概念结构和时间复杂度二、二叉搜索树的插入三、二叉搜索树的查找四、二叉搜索树的删除&#xff08;最麻烦&#xff0c;情况最多&#xff0c;一一分析&#xff09;3.1首先我们按照一般情况下写&#xff0c;不考虑特殊情况下4.1.1左为空的情况&#xff…

小波降噪基础-python版本

这篇小文将使用小波多分辨分析对一个简单信号进行降噪&#xff0c;主要是降噪流程&#xff0c;为以后的小波更复杂的降噪算法打下良好的基础。降噪算法流程大致如下&#xff1a; &#xff08;1&#xff09;去趋势项&#xff08;如直流电流&#xff09;&#xff0c;并将数据归一…

词向量模型评估

一、既有范式 词向量的语言学特性&#xff1a;这部分主要通过一些具体的指标来评估词向量是否能捕捉到语言的内在规律&#xff0c;包括&#xff1a; 相似度评价指标&#xff1a;检查词向量空间中距离近的词是否与人类直觉一致&#xff0c;例如&#xff0c;利用余弦相似度来评估…

【嵌入式智能产品开发实战】(十三)—— 政安晨:通过ARM-Linux掌握基本技能【运行环境】

目录 简述 开始 操作系统环境下的程序运行 裸机环境下的程序运行 程序入口main()函数分析 BSS段的小提示 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 嵌入式智能产品开发实战 希望政安晨的博客能够对您有所裨益&#xff0c;如有不…

基于Java的高校成绩报送系统的设计与实现

基于Java的高校成绩报送系统的设计与实现 获取源码——》哔站搜&#xff1a;计算机专业毕设大全 获取源码——》哔站搜&#xff1a;计算机专业毕设大全

计算机基础入门7:大学计算机基础

第1章 计算机的基本概念 1.1 计算机概述 1、 电子计算机{电子模拟计算机&#xff0c;电子数字计算机} 2、 计算机之父——冯诺依曼(J. Von Neumann)&#xff0c;奠定现代计算机的体系结构。 3、 冯诺依曼在EDVAC设计方案中提出了“存储程序”原理 4、 计算机的三个特征&…

【Spring】SpringBoot整合Redis,用Redis实现限流(附Redis解压包)

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 本文介绍SpringBoot整合Redis并且进行接口的限流&#xff0c;文章主要介绍的是一种思想&#xff0c;具体代码还要结合实际。 一、Windows安装Redis Redis的解压包我放在了百度网盘上&#xff0c;有需要的可以下载。 R…