React 最基础的JSX语法

JSX 是Facebook为React开发的一套语法糖，创建JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套 ，保持和 HTML 一致的结构 ，语法上除了在描述组件上比较特别以外， 其它和普通的Javascript没有区别 。并且最终所有的 JSX 都会编译为原生Javascript。

1. 变量 JSX支持定义变量

// 1
import React, {Component} from 'react'
class Index extends Component {
  const element = <h1>Hello, world!</h1>;
  render(){
    element
  }
}

// 2
import React, {Component} from 'react'
class Index extends Component {
  const element = (
    //返回内容外层必须有一个包裹元素
    <div>
      <h1>React</h1>
      <p>Hello, world!</p>
    </div>
  );
  render(){
    element
  }
}

2. 占位符 返回内容外层不想使用html元素，可以使用react提供给我们的占位符

import React, {Component, Fragment} from 'react'
class Index extends Component {
  const element = (
    <Fragment>
      <h1>React</h1>
      <p>Hello, world!</p>
    </Fragment>
  );
  render(){
    element
  }
}

3. 样式 支持 CSS 样式，但是有自己独特的语法 “驼峰式 + JSON” 风格

import React, {Component} from 'react'
class Index extends Component {
  const css = {
    color: 'red'
  }
  const element = <h1 style={css}>Hello, world!</h1>;
  render(){
    element
  }
}

4. 类 支持 class，要使用className

import React, {Component} from 'react'
import style from './style.css' //导入样式文件
class Index extends Component {
  render(){
    <div className="div-class">加入class</div>
  }
}

5. 三元表达式 可以通过条件判断决定使用哪个组件

import React, {Component} from 'react'
class Index extends Component {
  render(){
   <div>{true ? 1 : 0}</div>
  }
}

6. 迭代 遍历

import React, {Component} from 'react'
class Index extends Component {
  render() {
    return (
      <div>
        {[1,2,3].map((i, index) => {
            return (<p key={index}>{i}</p>) // 遍历出三个 p 元素
        })}
      </div>
    )
  }
}

7. 注释

import React, {Component} from 'react'
class Index extends Component {
  render() {
    return (
      <div>
        {/* 这是 JSX 独特的注释语法 */}
      </div>
    )
  }
}

8. 解析html标签 dangerouslySetInnerHTML

import React, {Component} from 'react'
class Index extends Component {
  render() {
    return (
      <div dangerouslySetInnerHTML={{__html: '<h1>我是H1标签</h1>'}}></div>
    )
  }
}

9. label 标签的for在JSX语法中的使用

import React, {Component} from 'react'
class Index extends Component {
  render() {
    return (
      <div>
        <label htmlFor="inputArea">点击输入内容</label>
        <input id="inputArea"/>
      </div>
    )
  }
}

10. 使用 注意

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index'; //Jsx语法中，引入使用组件必须已大写开头
ReactDOM.render(
  /* Jsx语法中，如果我们使用自己创建的组件,通过标签形式 + 组件名使用
   * 标签： <  />
   * 组件名：Index  
   */
  <Index/>,
  document.getElementById('root')
)