React JSX

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 元素外层需使用一个标签进行包裹，如

；
第二个参数是插入该模板的目标位置。
若要为创建的某个元素增加 class 属性，不能直接定义 class 而要用 className，因为 class 是 javascript 中的保留字。例如给 input 添加 className 并更改样式：

 
.userName{background: yellow} // 在CSS样式中定义
同样可以定义行内样式，将所有的样式包裹在一个对象中，以类似变量的形式给 style 属性赋值，注意样式属性要用驼峰命名法表示，如: backgroundColor 而不是 background-color，fongSize 而不是 font-size：

另外可以直接将样式赋值给一个变量，把变量赋值给 style 属性，如下：

注释

{/*我是注释*/}

React实例

let i=1;
let myStyle= {
fontSize: 14,
color:red
}


ReactDOM.reader(

  
菜鸟教程
  
{ 1+2  }
 
{ i==1 ? 'true' : 'false' }
  
这是一个很不错的 JavaScript 库!
  
{/*必须包含在一个div当中，假的组件也在外层的div中*/}
  ,
  document.getElementById('example')
)

关于React注释的问题：

1、在标签内部的注释需要花括号

2、在标签外的的注释不能使用花括号

ReactDOM.render(
    /*注释 */
    
孙朝阳 {/*注释*/}
,
    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 来做对应的属性。

---

React组件
1,我们可以使用函数定义了一个组件：

function HelloMessage(props) {
    return 
Hello World!
;
}

你也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return 
Hello World!
;
  }
}

2, const element = 用户自定义的组件

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

组件名内不能使用 style 样式，例如：假设该组建名为 ，如果我们写成： 这样，那么该组件名是无 style 样式的，也就是说我们刚写的 style 样式，是无效的，因此我们不能把样式写在该组件中！那么我们应该把样式写在哪里呢? 我们应该把样式写在：

function HelloMessage(props) {
    return 
Hello World！
;
}
或者

var myStyle = {color:'red',textAlign:'center'}
function HelloMessage(props) {
    return 
Hello World！
;
}