jsx

是JavaScript的一种语法扩展（内部实现的）
语法是{} 可写入表达式
写入样式 className
htmlFor  HTML 标签的 for 属性 规定 label 与哪个表单元素绑定

JSX:JavaScript的语法扩展，也为Js的语法糖，可以使用{}内嵌任何JavaScript表达式，Jsx属性
class welcom extends React.component {
    render(){
      const todolist = ['Learn React', 'Learn Redux']
      return(
          <div>
              <h1>Hello React</h1>
              <ul> 
              {
              todolist.map(item =>
              <li>{item}</li>
              )
              }
              </ul>
          </div>
      )
    }
}
    export default Welcome

JSX是一种JavaScript语法扩展

用花括号，在其中添加任意的表达式

属性与html属性非常一直，不同点在于类用className，for改为htmlFor

---

笔记

笔记

html是什么

map to li

笔记咯

有些属性是Js的保留字，做一些替代className,htmlFor

什么是JSX？

JSX就是内嵌在JS中的看似像html语法的代码。它是

1. JavaScript语法的扩展

2. 可以使用花括号{}内嵌任何Javascript表达式(Expressions)

3. JSX属性，有一些属性如class, for跟js语法冲突，可以用另外的别名来代替，例如class -> className, for -> htmlFor
   

jsx表达式中HTML标签上的class属性需要修改为别名className，for需要修改为htmlFor

JSX花括号中的JavaScript表达式会被解析

基本语法

花括号内添加 JavaScript表达式

例：{’String’} 直接输出

{12 + 2}计算后可直接输出

{[1, 2, 3]}类似Repeat

Render(){

const todoList = [‘Learn React’, ‘Learn Redux’]

Return(

<div>

<h1> Hello React</h1>

<ul>

{

todoList.map(item =>

<li>{item}</li> 

)

}

</ul>

</div>

)

}

Render(){

const isLogin = true

return(

<div>

<h1>Hello React</h1>

{isLogin ? <p>你已经登录</p> :<p>请登录</p>}

</div>

)

}

两个特殊属性

class   className

for    htmlFor

其他属性与HTML属性一致

return <h1>hello react</h1>

返回的事jsx，既不是js也不是html

jsx的属性className=class；htmlFor=for，为了防止和es6的关键字冲突

JSX语法

• jsx属性：className, htmlFor

  • 避免与html原属性冲突