react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM。React的核心机制之一就是可以在内存中创建虚拟的DOM元素。以此来减少对实际DOM的操作从而提升性能。 JSX 即Javascript XML,它是对JavaScript 语法扩展。React 使用 JSX 来替代常规的 JavaScript。你也可以认为JSX其实就是JavaScript。当遇到
JSX的优点:
快,执行速度更快,因为它在编译为JavaScript代码后进行了优化。
可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模板更加简单快速。
使用JSX
如果要使用JSX,需要得到语法的支持,你可以使用Babel来进行转换。在该篇文章当中直接引入Babel文件。
将上一篇文章的“你好,世界”拿过来看一下:
Title
ReactDOM.render(
你好,世界
,
document.querySelector("#wrap")
)
以上代码中的模板即是用了JSX。如果我们要在模板中嵌套多个HTML标签,需要使用一个父元素对其进行包裹。将代码修改为:
ReactDOM.render(
张培跃
欢迎学习 React
今天天气不错,挺风和日丽的!
,
document.querySelector("#wrap")
)
注意千万不要在最外层添加多个并列标签,否则会报错!另外如果你为JSX代码用引号包裹起来的话,浏览器会认为是文本而不是HTML!
ReactDOM.render(
"
",
document.querySelector("#wrap")
)
单独放到文件内
咱们也可以将JSX代码单独放到一个文件上,供其它文件来调用 。首先创建一个名字为my_react.js的文件,代码如下:
ReactDOM.render(
我好帅!我好苦恼啊!
,
document.getElementById('wrap')
);
然后在你的HTML文件当中引入该JS文件即可:
Title
当然你也可以将你的JSX放到外部文件中。创建一个名字为react-jsx.js的文件,内容如下:
var myInfo=
我好帅!我好苦恼啊!
;
然后引入:
Title
ReactDOM.render(
myInfo,
document.querySelector("#wrap")
)
JSX当中的标签类型
在JSX语法中,使用的标签类型有两种:DOM类型的标签(div、span等)和React组件类型的标签(关注后面文章)。DOM类型的标签需要标签的首字母小写,React组件类型的标签需要首字母大写。React也是通过首字母的大小写来判断渲染的是哪种类型的标签。
React组件类型标签:
function ZhangPeiYue(){
return (
)
}
ReactDOM.render(
//React组件类型标签
,
document.querySelector("#myApp")
)
React组件类型标签:
ReactDOM.render(
//DOM类型标签
,
document.querySelector("#myApp")
)
JSX中的表达式
JSX是支持表达式的,用法很简单,你需要将表达式写到{}内即可。代码如下:
ReactDOM.render(
{100+100}
,
document.querySelector("#wrap")
)
不过需要注意的是在JSX当中,是不能使用if else 的,不过可以使用三元运算表达式:
var ok=1;
ReactDOM.render(
{ok==1?"我很帅":"我很有才华"}
,
document.querySelector("#wrap")
)
JSX上的style
如果要用JSX来添加样式,很简单,代码如下,此处不解释:
var ok=1;
var myStyle={
color:"red",
fontSize:50
}
ReactDOM.render(
{ok==1?"我很帅":"我很有才华"}
,
document.querySelector("#wrap")
)
或者:
var ok=1;
ReactDOM.render(
color:"red",
fontSize:50
}}>{ok==1?"我很帅":"我很有才华"}
,
document.querySelector("#wrap")
)
JSX上的数组输出
JSX可以直接在模板输出JavaScript变量。如果这个变量是一个数组,会自动展开所有元素。是不是很给力?哈
var arr=[
你是风儿
,
我是沙
,
缠缠绵绵到天涯
];
ReactDOM.render(
{arr}
,
document.querySelector("#wrap")
)
咱们也可以利用数组的map属性来对其进行数据列表渲染:
var arr=["你是风儿","我是沙","缠缠绵绵到天涯"];
var lis=arr.map(function(v){
return
{v}
})
ReactDOM.render(
{lis}
,
document.querySelector("#wrap")
)
JSX当中的注释
只需要将注释写到{}当中即可,如下:
var arr=[
你是风儿
,
我是沙
,
缠缠绵绵到天涯
];
ReactDOM.render(
{
/*前
* 行
* 注
* 释*/
// 单行注释
// arr
}
,
document.querySelector("#wrap")
)
JSX其实就是JavaScript。一些关键字不要作为XML的属性名。例如:for,if,class 。另外大括号里是JavaScript,不要加引号,加引号就会被当成字符串。
react 注释html,React之JSX语法相关推荐
- React(2)认识JSX语法格式
文章目录 前言 一.JSX语法的基本用法 1.使用变量定义JSX元素 2.使用变量定义嵌套的JSX元素 3.在JSX元素中使用变量 4.在JSX元素中调用函数 二.JSX元素的语法规定 三.在JSX格 ...
- React学习(1)——JSX语法与React组件
为什么80%的码农都做不了架构师?>>> 本文记录了在官网学习如何使用JSX+ES6开发React的过程. 全文共分为3篇内容: JSX语法与React组件 状态.事件与动态渲 ...
- 【React】1、React入门与概览(JSX语法)
系列文章目录
- react 中 JSX 语法的转化过程
JSX 语法的转化过程 JSX 仅仅是 createElement() 方法的语法糖(简化语法) JSX 语法被 @babel/preset-react插件 编译为 createElement() 方 ...
- JSX语法使用详解——终极版
一.基础 1.JSX是什么 JSX是一种像下面这样的语法: const element = <h1>Hello, world!</h1>; 它是一种JavaScript语法扩展 ...
- React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
- React基础-JSX语法介绍
文章目录 JSX语法介绍 认识JSX语法 JSX注释编写 JSX语法介绍 认识JSX语法 我们先来看一段代码 // 定义根组件 const element = <div>Hello Wor ...
- React 学习笔记:JSX 语法
JSX JSX 是 JavaScript XML 的简写,表示了在 JavaScript 中书写 XML 格式的代码.它可以让我们在 React 中创建元素更加简单,并且保留 HTML 代码的结构更直 ...
- 最全的react视频【黑马程序员】--第五章 JSX语法
目录 1.JSX语法本质 2. 在JSX中混合写入js表达式 渲染类型 渲染数字 渲染字符串 渲染布尔值 为属性绑定值 渲染jsx元素 渲染 jsx元素的数组 将普通字符串数组转为jsx数组并渲染到 ...
最新文章
- c语言编程:输入一个数看它是不是素数
- 在用户控件中弹出消息框的方法
- 消息队列-ActiveMQ
- 菲教驰骋在线外教市场,51Talk、阿卡索谁能攫取行业红利?
- 我们分析了50万条拼多多商品数据,告诉你到底是消费升级还是降级?
- 记录一种多个按钮中每次只能选中一个的实现方式
- [VirtaulBox]网络连接设置
- oracle交流 提问,Oracle常见提问6(转)
- 二十四 Redis消息订阅事务持久化
- 为什么总说程序员是吃青春饭的?真的是 35 岁混不到管理就等于失业?
- 利用TreeView实现C#工具箱效果
- 在html中写python代码的语法和特点-----基于webpy的httpserver
- 黑马程序员——OC学习小结------成员变量以及对应的set、get方法
- 一个小小的flash
- mongoVUE的增删改查操作使用说明
- 中国大陆芯片设计企业名单
- SDK数据采集抓取精准主要
- ubuntu环境下文件夹压缩与解压缩
- 绝地求生计算机内存不足怎么解决,绝地求生大逃杀虚拟内存不足怎么解决 虚拟内存设置教程...
- windows terminal使用管理员权限打开
热门文章
- Netty工作笔记0061---Netty心跳处理器编写
- STM32工作笔记0060---窗口看门狗实验
- 超棒的一遍综述性博客
- java分布式(java反汇编)
- 随想录(mysql之基础篇)
- verilog 学习记(如何编写assert)
- 联想计算机主机编号,联想如何查找主机编号
- 绝地求生进游戏显示服务器未正常运行,绝地求生BE服务器未正常运行怎么办 BE服务器未运行解决方法...
- java printstream 覆盖了_Java PrintStream clearError()方法与示例
- 计算机 教育 初中 论文范文1000字,初中作文1000字