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

首先我们看到声明了一个element元素,而他的内容并非字符串或者html。

它被称为 JSX,是一个 JavaScript 的语法扩展我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。

在 JSX 中嵌入表达式

  下面案例中的{name}则为被嵌入到jsx中的表达式

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; ReactDOM.render(
element,
document.getElementById('root')
);

在 JSX 语法中,你可以在大括号内放置任何有效的 JavaScript 表达式。例如,2 + 2user.firstNameformatName(user) 都是有效的 JavaScript 表达式。

function format(user){
return user.name+'' "+user.gender;
} const user={
name:"zhangsan",
gender:"男"
} const element=(
  <h1>hello,{format(user)}</h1>
) ReactDom.render(
element,
document.getByElementId("id")
)

JSX 也是一个表达式

在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象。

也就是说,你可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX

function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}

JSX 特定属性:可以在jsx中为html标签元素指定属性,直接赋值方式和使用表达式方式

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

JSX 标签里能够包含很多子元素:

const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);

JSX 防止注入攻击:

你可以安全地在 JSX 当中插入用户输入内容:

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的:
const element = <h1>{title}</h1>;

React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(cross-site-scripting, 跨站脚本)攻击。

JSX 表示对象:

  Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

  以下两种示例代码完全等效:

const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

React.createElement() 会预先执行一些检查,以帮助你编写无错代码,但实际上它创建了一个这样的对象:

// 注意:这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};

这些对象被称为 “React 元素”,它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新。

react学习笔记_01-jsx的更多相关文章

  1. 【react学习笔记】-jsx

    //jsx定义组件 var Divider = React.creatClass({ getIsComplete:function(){ return 'is-complete' }, handleC ...

  2. React学习笔记_01

    使用Facebook的create-react-app快速构建React开发环境 前言: create-react-app:来自Facebook官方的零配置命令行工具 create-react-app ...

  3. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  4. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  5. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  6. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  7. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  8. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  9. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  10. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

随机推荐

  1. 二、冯式结构与哈佛结构及ARM处理器状态和处理器模式

    2.1 冯式结构与哈佛结构 2.1.1 两者的区别 如果是独立的存储架构和信号通道那就是哈佛结构,否则就是冯式结构 结构与是否统一编址没有关系,也与 CPU 没有关系,与计算机的整体设计有关 CACH ...

  2. Ansible笔记(7)---常用模块之系统类模块(cron、service)

    一.cron模块 1.1作用: cron 模块可以帮助我们管理远程主机中的计划任务,功能相当于 crontab 命令. 在了解cron模块的参数之前,先写出一些计划任务的示例: # 示例1,每天的1点 ...

  3. Java数组重修,猜数小游戏改进和打印正三角形

    数组重修,猜数小游戏 要求:从键盘输入一个数,判断数组是否包含此数,运用随机数 我们可能会这样写 import java.util.Random; import java.util.Scanner; ...

  4. 变量类型,-数据类型(值类型,引用类型)uint 不有存负数,int,可以存负数,

    俩种命名方法 1.Pascal 命名法,第一个字母大写其它字母小写Userid 2.Camel命名法,所有单第一方写大写,其它小写,骆峰命名法,userId 程序中元素的命名规范项目名:公司名.项目名 ...

  5. HTML基础入门学习准备篇

    在学习前端的开始,让我们一起来了解什么是HTML5时代的大前端开发和全栈开发的定义 传统的前端:切图-标签和样式-实现效果 H5时代的前端: 一.需要各端的兼容开发 二.可以用于APP开发和移动站点的 ...

  6. 分页框架pager-taglib学习笔记

    说到分页其实可以研究一下我自己项目里面的分页框架的使用. 下面的笔记来自于孔浩老师的视频教程和我自己的开发实践. 使用Pager-taglib可以帮助我们快速开发分页处理. 下载:pager-tagl ...

  7. (转)利用VMware克隆虚拟机需要注意的问题

    第一步:关闭当前机器 第二步:在VMware中右键要克隆的机器 选择管理-->克隆 第三步:启动新克隆的虚拟机 修改主机名 如 hostname  slave2 第四步:修改克隆的虚拟机的ip地 ...

  8. Linux 用户和组信息

    linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号.在使用linux操作系统时候,通常我们会遇到对多用户进行管理.比如: 用户账号的添加. ...

  9. python web自动化测试框架搭建(功能&接口)——功能测试模块

    功能测试使用selenium,模块有: 1.futil: 公共方法,如元素高亮显示 # coding=utf-8 """高亮显示元素""" ...

  10. Vagrant 手册之同步目录 - VirtualBox

    原文地址 如果你使用的 provider 是 VirtualBox,那么 VirtualBox 同步目录就是默认的同步目录类型.这些同步目录使用 VirtualBox 的共享目录系统来同步客户机跟宿主 ...