1 JSX语法
JSX是javascript的一种扩展，最终会编译成原生的javascript
JSX构建组建的规则和xhtml规则一致
标签可以任意嵌套
标签必须闭合
1.1JSX组件
html原生组件，如
function render() {
return <h1>Hello World</h1>
}
React组件即自定义组件
class Hello extends React.Component {
render() {
return <h1>Hello World</h1>;
}
}
function render() {
return <div><Hello/></div>
}
注：
1.自定义组件首字母必须大写，否则解析时按照html原生标签解析，进而报错
2.React组件中必须只能存在一个根节点，不能存在并列根节点，如
function render() {
// 错误
return (
<div></div>
<div></div>
)
}
1.2 JSX属性
定义属性的方式和html属性的方式一样，不同之处是采用驼峰形式，如
class Hello extends React.component {
render() {
return <h1 className="header">Hello World</h1>
}
}
function render() {
return <div><Hello custProp="lalal"/></div>
}
注：
html原生的class样式必须写成className形式，因为JSX语法解析成js原生代码是碰到class会当成关键字处理，运行时报错
1.3 JSX处理js
JSX中可以使用{}包裹js的内容，并能够将js内容正确解析
function render() {
const text="Hello World";
return <h1>{text}</h1>
}
上述代码将解析为<h1>Hello World</h1>
1.4 JSX注释
采用js的注释写法，需要加花括号
function render() {
return <h1>
{/*
注释信息
*/}
</h1>
}
1.5 JSX编译成js
<MyButton type="normal" data={22}>Btn</MyButton>
编译成
React.createElement({
'MyButton',
{type: "normal", data: 22},
'Btn'
})
若为闭合元素，不存在子标签，则React.createElement方法的第三个参数为null
1.6 JSX命名空间（对JSX使用点语法）
若自定义组件中存在多个子组件是，可以采用这种方式获取子组件，如
const MyComponent = {
DatePicker: function(props) {
return <div> 当前日期：{props.currentYear}</div>
}
}
function PickerContainer() {
return <MyComponent.DatePicker currentDate = {new Date().getFullYear()} />
}
如antd中的menu组件
import {Menu} from 'antd';
const SubMenu = Menu.SubMenu
本文目的仅仅是为了个人查找阅读等提供方便
