React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展
JSX的优点
JSX执行更快，因为它在编译为javascript代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
使用JSX便携模版更加简单快速
ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
模版渲染pei yan jing z z
ReactDOM.render(template,targetDOM) 方法接收两个参数：
第一个是创建的模板，多个 dom 元素外层需使用一个标签进行包裹，如 <div>；
第二个参数是插入该模板的目标位置。
若要为创建的某个元素增加 class 属性，不能直接定义 class 而要用 className，因为 class 是 javascript 中的保留字。例如给 input 添加 className 并更改样式：
<input type="text" className="userName" value={value}/>
.userName{background: yellow} // 在CSS样式中定义
同样可以定义行内样式，将所有的样式包裹在一个对象中，以类似变量的形式给 style 属性赋值，注意样式属性要用驼峰命名法表示，如: backgroundColor 而不是 background-color，fongSize 而不是 font-size：
<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>
另外可以直接将样式赋值给一个变量，把变量赋值给 style 属性，如下：
<div id="container"></div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
let inputStyle = {
"backgroundColor":"yellow",
"color":"red"
};
ReactDOM.render(
<div>
<input type="text" style={inputStyle} value={value}/>
<button>{buttonName}</button>
</div>,
document.getElementById("container")
)
</script>
注释
{/*我是注释*/}
React实例
let i=1;
let myStyle= {
fontSize: 14,
color:red
}
ReactDOM.reader(
<div>
<h1>菜鸟教程</h1>
<h2 style={myStyle}>{ 1+2 }</h2>
<h2>{ i==1 ? 'true' : 'false' }</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
{/*必须包含在一个div当中，假的组件也在外层的div中*/}
,
document.getElementById('example')
)
关于React注释的问题：
1、在标签内部的注释需要花括号
2、在标签外的的注释不能使用花括号
ReactDOM.render(
/*注释 */
<h1>孙朝阳 {/*注释*/}</h1>,
document.getElementById('example')
);
HTML 标签 vs. React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
注意:
由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
React组件
1,我们可以使用函数定义了一个组件：
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
你也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
2, const element = <HelloMessage />用户自定义的组件
注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
组件名内不能使用 style 样式，例如：假设该组建名为 <HelloMessage />，如果我们写成：<HelloMessage style={{color:'red',textAlign:'center'}}/> 这样，那么该组件名是无 style 样式的，也就是说我们刚写的 style 样式，是无效的，因此我们不能把样式写在该组件中！那么我们应该把样式写在哪里呢? 我们应该把样式写在：
function HelloMessage(props) {
return <h1 style={{color:'red',textAlign:'center'}}>Hello World！</h1>;
}
或者
var myStyle = {color:'red',textAlign:'center'}
function HelloMessage(props) {
return <h1 style={myStyle}>Hello World！</h1>;
}
