《React极简教程》第二章 React JSX

React JSX

Why JSX?
You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.

JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。

我们写一个XML标签，实质上就是在调用React.createElement这个方法，并返回一个ReactElement对象。

实例

    
    
    
    
    

    
    


    
    

    


    

    
    

    
    
    
    

    
    
    


    
    
    
    

    
    
    

    









    

        


            


            
React极简教程:Hello,World

            

            


        
        

    

React.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

创建并返回一个新的指定类型的 ReactElement。type 参数可以是一个 html 标签名字字符串（例如，“div”，“span”，等等），或者是 ReactClass （通过 React.createClass 创建的）。

React JSX将类似XML的语法转化到原生的JavaScript，元素的标签、属性和子元素都会被当作参数传给React.createElement方法.

代码实例

#JSX
var Nav;
var app = 
;
 
#native JS
var Nav;
var app = React.createElement(Nav, {color:"blue"});


//使用JSX
React.render(
    content,
    document.getElementById('example')
);
 
//不使用JSX
React.render(
    React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
    document.getElementById('example')
);

有对应的 JSX --JS 转化器。

一切皆是映射。（光剑）

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

使用 JSX
JSX 看起来类似 HTML ，我们可以看下实例:

ReactDOM.render( 
Hello, world!
, document.getElementById('example'));

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。
React 实例

ReactDOM.render( 
 
菜鸟教程
 
欢迎学习 React
 
这是一个很不错的 JavaScript 库!
 
 , document.getElementById('example'));

尝试一下 »

独立文件

你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js
文件，代码如下：

ReactDOM.render( 
Hello, world!
, document.getElementById('example'));

然后在 HTML 文件中引入该 JS 文件：
React 实例

尝试一下 »

JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
React 实例

ReactDOM.render( 
 
{1+1}
 
 , document.getElementById('example'));

尝试一下 »
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.
React 实例

ReactDOM.render( 
 
{i == 1 ? 'True!' : 'False'}
 
 , document.getElementById('example'));

尝试一下 »

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：
React 实例

var myStyle = { fontSize: 100, color: '#FF0000'};ReactDOM.render( 
菜鸟教程
, document.getElementById('example'));

尝试一下 »
注释
注释需要写在花括号中，实例如下：
React 实例

ReactDOM.render( 
 
菜鸟教程
 {/*注释...*/} 
, document.getElementById('example'));

尝试一下 »

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：
React 实例

var arr = [ 
菜鸟教程
, 
学的不仅是技术，更是梦想！
,];

ReactDOM.render( 
{arr}
, document.getElementById('example'));

尝试一下 »

HTML 标签 vs. React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

var myDivElement = 
;

ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = ;

ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

注意:

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className和 htmlFor
来做对应的属性。

html属性	jsx关键字
class	className
for	htmlFor