JSX基本语法

1.XML基本语法

使用类似于XML语法的基本好处是可以任意嵌套，可以很清楚的看到DOM树状结构及其属性

const List=()=>(
 <div>
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   </ul>
</div>
)

注意点是：

只允许被一个标签包裹住

标签一定要闭合

2.元素类型：

JSX中HTML标签的小写字母对应DOM元素，但是组件元素要对应大写字母

组件的命名要以大写字母为主

注释

注释的方法是{/* 节点注释 */}

const App = (  
                     <Nav>  
                     {/* 节点注释*/}  
                    <Person   
                     /* 多行         注释*/   
                     name={window.isLoggedIn ? window.name : ''}    />
                    </Nav>);
                           ）;

3.元素属性

JSX不同于DOM元素属性的是**class和for**，所以转换如下：

  -class属性改为className
  -for属性改为htmlFor

所以example如下：

const Header=({title,children})=>(
<h3 title={title}>{children}</h3>
)
调用的时候为
<Header title="hello world">Hello world</Header>

展开属性

const component=<Component name={name} value={value}/>

4.js属性表达式

属性值 必须使用表达式，用{}来替换

const App = (  <Nav> 
                    {/* 节点注释*/} 
                     <Person      /* 多行         注释*/     
                   name={window.isLoggedIn ? window.name : ''}    /> 
                   </Nav>);