react中JSX使用

React.createElement()

react完全利用了js自身的能力来编写，而不像vue这种造轮子增强html的功能

JSX简介

JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到 < ,JSX就当做HTML解析，遇到 { 就当做javascript解析

JSX语法

<ul className="my-list">
    <li>JSPang.com</li>
    <li>I love React</li>
</ul>

代码

import React from 'react';
import ReactDOM from 'react-dom';

// 使用jsx创建元素
const title = <h1>hello,jsx</h1>
ReactDOM.render(
  title,
  document.getElementById('root')
);
 

1. 为什么脚手架中可以直接使用JSX语法
   为什么有这样的疑问：
   JSX不是标准的ECMAScript语法，他是ECMAScript语法的扩展
   需要babel这样的编译工具，编译之后才能在浏览器中正常运行

   因为：
   脚手架中已经有了该配置不用手动配置
   这个包是: @babel/preset-react

2. 使用注意点

• 属性名以驼峰命名

• jsx与js更相似 而不是html
  class ==> className 类名的书写方式
  for ==> htmlFor

• jsx里单标签必须使用</>闭合

    <hr>
  

• 可以使用一个() 来包裹

    const element =(
      <div className="app">
      <div>1</div>
      <div>2</div>
      </div>
    )
  

3. 嵌入js表达式

const sayHi = () => 'hi---'
const dv = <div>jsx自身也是一个表达式</div>
const name = '猫猫'
const title = <h1 className='title'>hello,{name} <span>{sayHi()}</span>{dv}</h1>

注意：
js对象不是一个合理表达式不能插入
插入表达式也不能是if或者for语句

JSX条件渲染

const isLoading = true

const loadData = ()=>{
  if(isLoading){
    return <div>loading....</div>
  }
  return <div>加载成功</div>
}
const title = (
  <div>
    条件渲染：
    {loadData()}
  </div>
)

ReactDOM.render(
  title,
  document.getElementById('root')
);

JSX列表渲染

const songs = [
  {id:1,name:'第1首'},
  {id:2,name:'第2首'},
  {id:3,name:'第3首'},
]
const title =(
  <ul>
    {songs.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)
ReactDOM.render(
  title,
  document.getElementById('root')
);

JSX样式处理

• 行内样式 -style

    const title =(
      <h1 style={ {color:'red', backgroundColor:'skyblue'}}>
        jsx样式处理
      </h1>
    )
  

• 类名 -className (推荐)
  可引入css文件
  import ‘./css/index.css’

    const title =(
      <h1 className='title'>
        jsx样式处理
      </h1>
    )