JSX架构及注释
一、架构
二、注释
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello, World</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function () {
return <p
/*
comment...
*/
name="test" // set name to test
>Hello, World{
/*
comment...
comment
*/ "hello, " // comment...
}</p>
}
});
React.render(<div><HelloWorld></HelloWorld></div>, document.body);
</script>
</body>
</html>
三、语法
JSX架构及注释的更多相关文章
- React学习笔记-2-什么是jsx?如何使用jsx？
什么是jsx? JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...
- 22-React JSX语法
React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...
- 深入理解 JSX
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展.React 可以用来做简单的 JSX 句法转换. 为什么要使用 JSX? 你不需要为了 React 使用 JSX,可以直接使用纯粹 ...
- 使用JSX的注意事项
react中JSX是一种JavaScript + xml语法,用来创建虚拟DOM和声明组件.他可以更好的让我们读.写模板或组件. JSX语法浏览器是不识别的,需要通过babel 来进行转换成浏览器识别 ...
- JSX语法
什么是JSX语法:就是符合 xml 规范的 JS 语法:(语法格式相对来说,要比HTML严谨很多) 1. 如何启用 jsx 语法? 安装 `babel` 插件 - 运行`cnpm i babel-co ...
- 玩转 React【第02期】：恋上 React 模板 JSX
往期回顾 前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦,而且层级结构特别不清晰.今天我们来看一种优雅的编写React的代码的 ...
- react 的JSX语法需要注意哪些点？
注释方式 ReactDOM.render( <div> {/*JSX 中的注释方式*/} </div>, document.getElementById('root') ) j ...
- 学习React从接受JSX开始
详情参考官方JSX规范 虽然JSX是扩展到ECMAScript的类XML语法,但是它本身并没有定义任何语义.也就是说它本身不在ECMAScript标准范围之内.它也不会被引擎或者浏览器直接执行.通常会 ...
- React躬行记（2）——JSX
JSX既不是字符串,也不是HTML,而是一种类似XML,用于描述用户界面的JavaScript扩展语法,如下代码所示.在使用JSX时,为了避免自动插入分号时出现问题,推荐在其最外层用圆括号包裹,并且必 ...
随机推荐
- Factorial Trailing Zeroes
Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...
- VBS基础篇 - 常用函数
Option Explicit '*********************************Date/Time函数******************************* 'CDate函 ...
- 20145120 《Java程序设计》第7周学习总结
20145120 <Java程序设计>第7周学习总结 教材学习内容总结 Lambda表达式 例:Comparator<String> byLength = (name1, na ...
- 软件工程随堂小作业——寻找“水桶”（C++）
一.设计思想 思路与寻找一个水王相似,这次只是计数器和嫌疑人变量都设置为数组.每次选取一个ID与三个嫌疑人比较,若有相同则计数:若三个都不相同,则三个计数器都减一.若减为0,则从新赋值给嫌疑人. 二. ...
- Grails 1.2参考文档速读（10）：Controller
转载:http://keyvalue.blog.51cto.com/1475446/303260 从本篇起,我们将开始进入Grails的Web层,首先让我们从Controller说起. G ...
- UBOOT分析
U-Boot是一个通用的Boootloader,它是在系统上电后执行的第一段程序,先初始化硬件设备,再准备软件环境,最后引导系统内核. 一般来说Bootloader的启动过程来说一般分两个阶段: 第一 ...
- WPF中的Style(风格,样式)（转）
在WPF中我们可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件,比如说我们想将窗口中的所有按钮都保持某一种风格,那么我们可以设置一个Style,而 ...
- Codeforces Round #265 (Div. 1) C. Substitutes in Number dp
题目链接: http://codeforces.com/contest/464/problem/C J. Substitutes in Number time limit per test 1 sec ...
- 理解CSS3里的Flex布局用法
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...
- Java多jdk安装
1.安装jdk 2.配置 1.安装(略) 2.配置 2.1 regedit 注册表修改,假定已经安装jdk1.6,现在更换为jdk1.7 注: 修改红色框中CurrentVersion为jdk1.7 ...