JSX 的基本使用

JSX是React的核心内容。是JavaScript XML简写。优势是声明式的语法，更加直观，与HTML结构相同，降低学习成本，提高开发效率。

//使用JSX创建React元素
const title = (
   <h1 className="title">
   hello JSX!
   <span>这是span</span>
   </h1>
)
// 渲染react元素
const root = document.getElementById('root')
ReactDOM.render(title, root)

JSX 使用问题

React元素的属性使用驼峰命名法
特殊属性名： class -> className; for -> htmlFor; tabindex -> tabIndex
推荐：使用小括号包裹JSX，从而避免JS中自动插入分号陷阱

JSX中使用变量，用大括号包裹

const name = 'Tom'
const age = 19
const title = (
  <h1>
    hello {name} ! 年龄： {age}
  </h1>
)
ReactDOM.render(title, document.getElementById('root'))

JSX 条件渲染

const isLoading = false
const loadData = () => {
  if (isLoading) {
    return (<div>loading...</div>)
  }
  return (<div>数据加载完成，此处显示加载后的数据</div>)
}

JSX列表渲染，用大括号包裹，里面写map循环，循环内容为JSX，需要 return

const songs = [
  { id: 1, name: '张毅'},
  { id: 2, name: '万茜'},
  { id: 3, name: '刘亦菲'},
]
const list = (
  <ul>
      {songs.map(item => {
          return (
              <li key={item.id}>{item.name}</li>
          )
      })}
  </ul>
)

ReactDOM.render(list, document.getElementById('root'))

JSX样式处理,行内样式用大括号包裹，里面是一个对象。class写成 className，样式外部引入

// 类名，外部引入
import './index.css'

// 行内样式
const list = (
  <h1 className="title" style={{color: 'skyblue', backgroundColor: 'pink'}}>
    JSX的样式处理
  </h1>
)

ReactDOM.render(list, document.getElementById('root'))