002. JSX语法

1. JSX：JavaScript Syntax Extension（JavaScript语法扩展）

2. 作用：

• 用于描述UI的实现
• 与模板引擎类似
• 可以使用JavaScript的全部语法
• 使用babel进行代码转义

1. jsx中的内容必须用一个外层元素包裹起来（必须有一个根元素）
2. 表达式用{}包裹，放在标签内部，{}里可以放变量，表达式，函数，可以在一个组件中使用另一个组件

3. 简单的例子
例子1：

例子2：

class App extends Component {
  render() {
    // 可以定义变量
    let xm = "椰果粒";

    // 可以定义函数
    function toUpper(str){
      return typeof str === "string" ? str.toUpperCase():str
    }

    return (
      

        {/*变量*/}
        {xm}

        {/*表达式*/}
        {1+2}

        {/*立即执行函数*/}
        

          {
            (function(){
              return "这是立即执行函数";
            })()
          }
        

        {/*函数+在实例中获取值*/}
        
{toUpper(this.props.name)}

        {/*{}可以加在标签属性上，表示为标签添加属性*/}
        
添加类名

        {/*在组件中使用另一个组件*/}
        
      
    );
  }
}

class Title extends Component{
  render(){
    return(
        

          
震惊！这是title组件
          
非常震惊
        

    )
  }
}

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

注意：
将标签作为name值传入时：用{}，不推荐直接注入HTML的方法
如果直接用“”标记出来，系统会默认是字符串；如果用{}标记，系统认为是js的实例，比如以下是推荐的写法

ReactDOM.render(react} />
document.getElementById('root'));

JSX防注入攻击
React DOM在渲染之前默认会过滤所有传入的值，它可以保证应用不会被注入攻击，所有的内容在渲染之前都被转换成了字符串。这样可以有效的防止XSS（跨站脚本）攻击。

JSX的转换过程
babel转换器会将JSX转换成一个名为React.createElement()的方法调用。

const element = (
  

    Hello, world!
  
);
等同于以下
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);