React(JSX语法)-----JSX基本语法
JSX------HTML tags vs React Components:
1.To render a html tag,just use lower-case tag names in JSX;
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
2.To render a React Component,just create a local variable that starts with an upper-case latter;
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);
JSX-------The Transform
React JSX transforms from an XML-like syntax into native JS xml elements,attributes and children are transformed into arguments to React.createElement
var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});
var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);
Javascript Expressions
1.Attribute Expressions:To use a JS expression as an attribute value,wrap the expression in a pair of curly braces({})instead of quotes("").
// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
2.Child Expressions:Likewise,JS expressions may be used to express children:
/ Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
3.Comments:it's easy to add comments within youe JSX,they are just JS expressions. you just need to bo careful to put {} around the comments when you are within the children sction of a tag.
var content = (
<Nav>
{/* child comment, put {} around */}
<Person
/* multi
line
comment */
name={window.isLoggedIn ? window.name : ''} // end of line comment
/>
</Nav>
);
React(JSX语法)-----JSX基本语法的更多相关文章
- 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- react中的jsx详细理解
这是官网上的一个简单的例子 const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDO ...
- 学习React从接受JSX开始
详情参考官方JSX规范 虽然JSX是扩展到ECMAScript的类XML语法,但是它本身并没有定义任何语义.也就是说它本身不在ECMAScript标准范围之内.它也不会被引擎或者浏览器直接执行.通常会 ...
- 从 Vue 的视角学 React(二)—— 基本语法
基于 Vue.js 开发的时候,每个 vue 文件都是一个单独的组件,可以包含 HTML,JS,CSS 而 React 是以函数为基础,每个 function 就是一个组件.虽然 JSX 让 HTML ...
- React.createElement 与 JSX
DOM 向JSX的演进 网页由 DOM 元素构成.React DOM 并不是浏览器的 DOM,而React DOM 只是用来告诉浏览器如何创建 DOM 的方法.通常情况下,我们并不需要 React 就 ...
- React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
- 假如React没了JSX
如题,想必React大家早已不陌生,而React里面的JSX都是玩的得心应手了,但是假如说React里面没有了React那会是一种什么样的情形呢,我们来简单的看一下. 首先我们来实现一个简单的list ...
- .NET LINQ查询语法与方法语法
LINQ 查询语法与方法语法 通过使用 C# 3.0 中引入的声明性查询语法,介绍性 LINQ 文档中的多数查询都被编写为查询表达式. 但是,.NET 公共语言运行时 (CLR) 本身并不具 ...
- 让 zend studio 识别 Phalcon语法并且进行语法提示
让 zend studio 识别 Phalcon语法并且进行语法提示 https://github.com/phalcon/phalcon-devtools/tree/master/ide 下载解压 ...
随机推荐
- swift 自定义图片轮播视图
Swift封装图片轮播视图: import UIKit class XHAdLoopView: UIView { private var pageControl : UIPageControl? pr ...
- HDU 2669
题目大意: 已知线性方程ax+by=1; 输入a, b的值, 要求输出整数解x, y的值(输出x, y的最小整数解), 若没有解, 输出"sorry". 分析: 求线性方程的解 ...
- python常用的内置库
标准库: import os os.getcwd() //返回当前工作路径 os.chdir('/server/accesslogs') # Change current working dir ...
- schema约束和引入
schema的概述 schema约束同为xml文件的约束模式语言之一, 最大的作用是为了验证xml文件的规范性的. 是为了解决dtd约束不够的问题, 相应的他的配置就变得比较复杂 schema本身就是 ...
- JAVA编程讲座-吴老
JAVA系列公开课第4讲:多态系列课程:从JAVA编程零基础讲起,同时结合工作中遇到的具体实例,语言清晰易懂,连续10周+深入讲解,打下编程基础,让我们一起打来自动化测试的大门时间:4月25日(周一) ...
- Hibernate入门与简谈
Hibernate jdbc Java Databases Connectivity, 他是提供了一组Java API来访问关系数据库的Java程序.这些Java API 可以使Java应用程序执行S ...
- Spearman秩相关系数和Pearson皮尔森相关系数
1.Pearson皮尔森相关系数 皮尔森相关系数也叫皮尔森积差相关系数,用来反映两个变量之间相似程度的统计量.或者说用来表示两个向量的相似度. 皮尔森相关系数计算公式如下:
- linux-rpm
1. RPM本地安装 RPM包管理员(简称RPM,全称为The RPM Package Manager)是在Linux下广泛使用的软件包管理器.RPM此名词可能是指.rpm的文件格式的 ...
- ListView.post(Runnable {})和ListView.postDelayed
1. boolean android.view.View.post(Runnable action): 是listview 继承 view,同样具有此方法 post(Runnable action) ...
- 《C++primer》v5 第8章 IO库 读书笔记 习题答案
8.1.8.2 这一章不咋会啊.. istream &read(istream &is) { int a; auto old_state=is.rdstate(); is.clear( ...