react jsx语法

1 必须使用div包裹

2 return 换行的HTML必须用（）包裹

3 标签结束后必须使用 /

4 class必须写成className

5 jsx 表达式必须用{}包裹

6 React 组件，首字母一定要大写。

7 可以在jsx里面运行函数，单必须用{}包裹

8 标签使用自定义属性 必须data-xxx

9 数组里面的元素能自动展开

import React, { Component } from 'react';
import Navi from './Navi';
import Goods from './Goods';
import app from './App.css';

class App extends Component {
    add(){  //如果这个函数在render() 里面则下面调用的时候不需要加this
        alert(1)
    }
    render() {
        let arr = [1,2,3,5,6,7,8,9].map((item,index)=>{
            return <li key={index}>{item}</li>  //使用map来循环<li> 循环li里面必须加key 不然会打印错误，下面直接调用即可。
        })
        return (  //换行使用（）包裹
          <div className="App">  //外面必须包裹的标签，class使用className.
              <h1>{1+1<1 ? 5:8 }</h1>//表达式必须{}包裹这里显示8
              <p>{this.add()}</p> //可以使用函数 但必须用{}包裹
              <Navi/>  //这里调用组件 必须使用/   首字母需要大写
              <ul>{arr}</ul>//这里调用上面的arr数组
              <input type="button" value="点击" />
          </div>
        );
      }
}
export default App;