React.js基础入门四--要点总结

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的霸州网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

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

1. HTML 标签 和 React 组件

    在JS中写HTML标签，也许小伙伴们都惊呆了，那么React又是怎么区分HTML标签,React组件标签?

HTML标签：

var myDivElement = ;
React.render(myDivElement, document.body);

React组件标签：

1. var Div= React.createClass({/*...*/});

2. var myElement = << span="">Div someProperty={true} />;

3. React.render(myElement, document.body);    

    插播：

        1. 注意大写开头* 

        2. 不要随意document.body， 它是覆盖不是追加。（及时代码找的回来）

        3. 属性someProperty={true}

是不是很简单，一眼就发现了，congruatulations 聪明的你已经理解!

2. JSX与原生态JavaScript 

	//使用JSX
React.render(	content,
	document.getElementById('example')
);
//不使用JSX
React.render(
	React.createElement('div', null,
		React.createElement('div', null,
			React.createElement('div', null, 'content')
		)
	),
	document.getElementById('example')
);

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

API中：

React.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...])  #注意此处的省略号

第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。

第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。

从第三个参数开始，之后的参数都被认作是元素的子元素。

JSX的转换

React JSX 将元素的标签、属性和子元素都会被当作参数传给 React.createElement 方法：

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

JSX的转化器

    这个工具会把使用JSX语法的文件转换成纯的可以直接在浏览器里面运行起来的JavaScript文件。它也会为你监视目录，然后自动转换变化的文件

    要把带有JSX语法的代码转化为纯Javascript代码，有多种方式：

1. 对于内联与HTML中的代码或者是未经过转化的外部文件，在 script 标签中要加上 type="text/jsx" ，并引入 JSXTransformer.js 文件即可。

2. 不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用npm 全局安装 react-tools ：

#npm install react-tools -g

并使用命令行工具转化即可（具体用法可以参考 jsx -h 或者 jsx --help ） jsx 通过watch实时监控，具体使用看帮助吧。此处只列举试例：

# jsx --watch src/ build/

( #表示linux中的用户权限，windows用户大可不用理睬 )

大爱无边的React. render

React.render方法可以渲染HTML结构，也可以渲染React组件。 

(此处与上面重复，只做演示)

1.  渲染HTML标签，声明变量采用 首字母小写

var myDivElement = ;
React.render(myDivElement, document.body);	

2.   渲染React组件，声明变量采用 首字母大写

var MyComponent = React.createClass({/*...*/});
var myElement = ;
React.render(myElement, document.body);	

不过需要注意的是 class 和 for 属性（不太确定多少个，等查阅api后续增加），JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样， 用className 和 htmlFor 。

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

相信你一眼就瞅出了不同点。

可恶但有可爱之处：

在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加 data- 前缀。

上同样的代码：

var HtmlOptions = React.createClass({
	render:function (){
		return (			 属性延伸
		);
	}
});

var ys = ; 
React.render(ys, document.getElementById('htmls'));

渲染后，看看你的标签总是否有zz的属性，恭喜你........

是不是没有？ 哈哈，那就对了， 把zz替换成data-zz试试。

看上去高大上的用法（捂住）

有人说，用了这些写法后，不会再写原生态的JS代码了， 是的，懒（和）做（谐）才会是天朝。

比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：

var Form = MyFormComponent;
var App = (	);	

插播： 此处又要插播了（这是我们的爱好，插播才能提升质量）

React 组件标签

这样的写法表示 自闭合标签（

）

还要注意：都要开头大写，并且加上父类组件标签哦。为啥呢？ follow

这样你只需将子组件的 ReactClass 作为其父组件的属性：

var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });	

利用子组件 和 父组件形式 再来渲染。

然而这也是可以的：

	var App = (
		React.createElement(Form, null,
		    React.createElement(Form.Row, null,
		        React.createElement(Form.Label, null),
		        React.createElement(Form.Input, null)
		    )
		)
	);

该功能需要0.11及以上版本

Javascript表达式

在JSX语法中写Javascript表达式只需要用 {} 即可，比如下面这个使用三目运算符的例子：

JSX是HTML和JavaScript混写的语法，当遇到 < ，JSX就当HTML解析，遇到 { 就当JavaScript解析。

	// Input (JSX):
	var content = {window.isLoggedIn ?  : };
	// Output (JS):
	var content = React.createElement(
		Container,
		null,
		window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
	);	

属性表达式

	React.render(
		 1 ? 'class-a' : 'class-b'}>content