JSX基本使用

JSX是JavaScript XML的缩写，表示javascript代码中写XML格式的代码

使用步骤

1.使用JSX语法创建react元素

const title = ( <h1>Hello react<h1> )

2.使用ReactDom.render方法进行渲染

ReactDom.render(title,document.getElementById('root'))

JSX嵌入 JS表达式

语法：{JavaScript表达式}

注意点：

• 单大括号中是可以使用任意的JavaScript表达式的
• JSX自身也是JavaScript表达式
• JavaScript中的对象是一个例外，一般只会用在style属性中
• 不能在{}中出现语句（比如：if/for等）

JSX条件渲染

const isShow=true;

const Show=()=>{

     if(isShow){

     return <div>显示<div>

      }else{

    return <div>不显示<div>

   }

 }

const title=(

<h1>条件渲染：{ show() }</h1>

)

JSX列表渲染

const songs = [
  {id:1, name:'张三'}，
  {id:1, name:'李四'}，
  {id:1, name:'万五'}
]

const list = (
<ul>
   {songs.map ( item => <li key = { item.id } > {item.name} </li> )}
</ul>
)