在webpack.config.js中配置解析的loader

{
test:/\.jsx?$/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/env","@babel/react"]
}
}
},

  

jsx对象就是js对象!只不过jsx需要事先编译,才转为js对象!
在默认情况下,React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。
jsx有个强大的地方就是可以在js中嵌入标签,如在数组中嵌入div标签
let array=[]
array.push(<div>aaaa<div>bbbbbb</div></div>)

  

注意:
(1)一次push父标签只能是一个,不能push(<div></div><div></div>),跟render 里的 return 一样。
(2)在js文件这样写会报错,在jsx中写是不会的。
例子:
function formatName(user) {
//将参数合并成一个srting
return user.firstName + ' ' + user.lastName;
} //创建user对象
const user = {
firstName: 'Harper',
lastName: 'Perez'
}; //创建element对象,并用JSX语法标识为一个html内容。
//h1标签中会包含方法计算之后的内容
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
); ReactDOM.render(
element,
document.getElementById('root')
);

 const element = <h1>Hello, world!</h1>;

ReactDOM.render( element, document.getElementById('root') );

react的jsx语法的更多相关文章

  1. 前端笔记之React(一)初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

  2. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

  3. react 的JSX语法需要注意哪些点?

    注释方式 ReactDOM.render( <div> {/*JSX 中的注释方式*/} </div>, document.getElementById('root') ) j ...

  4. React之JSX语法

    1. JSX的介绍   JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...

  5. React之jsx语法特性

    jsx 语法,直接可以在js中使用html标签. 还可以通过花括号的形式,在html标签中,写js表达式. <div> { 1 + 2 } hello,world! </div> ...

  6. React使用JSX语法

    目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法  <--返回目录 JSX语法:符合xml规范的js语法 JS ...

  7. 3.react 基础 - JSX 语法

    1.最基础的 JSX 语法 普通javaScript中 引入 标签 let html = '<h1>hello</h1>'; jsx语法 let JSX_html = < ...

  8. React的jsx语法,详细介绍和使用方法!

    jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...

  9. React的JSX语法及组件

    最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...

随机推荐

  1. 第63章 ASP.NET Identity 支持 - Identity Server 4 中文文档(v1.0.0)

    提供了基于ASP.NET身份的实现,用于管理IdentityServer用户的身份数据库.此实现是IdentityServer中的扩展点,以便为用户加载身份数据以将声明发送到令牌. 这个支持的仓储位于 ...

  2. 《C#并发编程经典实例》学习笔记—2.4 等待一组任务完成

    问题 执行几个任务,等待它们全部完成. 使用场景 几个独立任务需要同时进行 UI界面加载多个模块,并发请求 解决方案 Task.WhenAll 传入若干任务,当所有任务完成时,返回一个完成的任务. 重 ...

  3. Unity的四元素与Vector3的乘积的含义

    Quaternion.Euler(x,y,z)含义是按照每个旋转轴以x,y,z旋转度旋转,例子:Quaternion.Euler(45,45,45) Quaternion与Vector3的右乘操作(* ...

  4. 【微服务No.2】polly微服务故障处理库

    熔断.降级: 熔断:熔断就是我们常说的“保险丝”,意为当服务出现某些状况时,切断服务,从而防止应用程序不断地常识执行可能会失败的操作造成系统的“雪崩”,或者大量的超时等待导致系统卡死等情况,很多地方也 ...

  5. .class文件查看

    十六进制查看(不仅class文件可以看,其他文件格式也可以) hexdump -C XXX.class #注意C是大写(小写c则输出十进制) 反汇编查看 javap -c XXX.class java ...

  6. HTML代码片段

    按钮类 后退.前进按钮 返回按钮 几种刷新按钮 警告框显示源代码 链接按钮 打开新窗口 打印 新窗口延迟打开 背景色变换 表单类 点击清空文字 关闭输入法 链接 双击打开链接 超链接鼠标形状 页面 不 ...

  7. PHP基础:MYSQL数据库操作

    1.连接到数据库: · 面向对象的方法: $db = new mysqli('hostname', 'username', 'password', 'dbname'); · 面向过程的方法: $db ...

  8. 博弈论入门之nim游戏

    更好的阅读体验点这里 nim游戏 nim游戏 有两个顶尖聪明的人在玩游戏,游戏规则是这样的: 有\(n\)堆石子,两个人可以从任意一堆石子中拿任意多个石子(不能不拿),没法拿的人失败.问谁会胜利 ni ...

  9. WGS84地理坐标系下,进行坐标运算

    经纬度坐标本身是不能直接运算的.原因是:经纬度坐标并非是直角坐标系.纬线圈间隔均匀,经线圈越靠近两级越密,如下图: 现在有个需求,已知两点和两点处射线斜率,求交点坐标. 虽然地球整体是个圆,但是局部地 ...

  10. Snapde怎么添加行和列

    Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏.那么它是如何添加行列的呢? 它有三种方法可以添加: 1.在编辑下拉菜单下找到设置行列数菜 ...