React学习——JSX的使用

 引子：最近因为工作需要学习React，发现Vue和React都是围绕着JSX做文章，因此记录本篇文章，对JSX做一个小总结(本篇是以React为视角)。

 简介：JSX使用xml的方式直接定义界面，界面组件之间可以相互嵌套。JSX在本质上是一个语法糖，并不是html标准。因此在使用的时候，需要引入bable的jsx解释器，然后经过babel解析为js之后才能使用。最终JSX被解析为React.createElement(components，props，...children).

  语法：类似于XML，遇到{}解析为javascript语法，遇到< 解析为html语法。

<div className="bar-content">
<ul className="ul-content">
{this.props.comments.map(comment=>{
return <li>comment.content</li>
})}
</ul>
</div>

  规则：
  1、使用JSX必须在React的scope中：由于JSX最终被翻译为React.createElement(component, proprs, ...children); 所以使用JSX 必须包含react lib。否则无法解析。

  2、自定义的标签必须已大写字母开头：在JSX解析的过程中，标签如果是小写，会被认为是内置的标签，按照html标准来解析。如果是大写，将被翻译为createElement。如果自定义的标签小写，将会报错。

  3、如果想要在jsx使用一般的表达式，需要将其赋值给一个已大写字母开头的常量，然后再在JSX中使用。不过如果.能直接访问到的话，可以直接使用.

   const Components = {
datePicker: function(props) {
return <h1>{props.date}</h1>
}
}

ReactDom.render(<Component.datePicker date={new Date.getDate()} />, document.getElementById("app"));
const component = {
photo: photoStory,
video: videoStroy
}

function story(props) {
const StoryComponent = component[props.type];

return <StoryComponent />
}  4、class要写为className，for要写为htmlFor。因为class和for是html的关键字 。style要写为style={{}},其中第一对括号是js语法解析的标志。类似于margin-top的属性要使用驼峰写法
  5、if和for不是javascript语法，所以不能直接在JSX中使用if。如果要使用，需要把if和for放到外层。例：

function NumberDes(props) {
let description;

if(props.number %2 == 0){
description = <strong>even<strong>
}else{
description = <i>odd</i>
}

return <div>{props.number} is a {description} </div>
}