介绍

如下代码，看上去比较搞笑，既像Javascript的语法，又像HTML，将一个标签赋值给变量element。这就是JSX，是javascript的扩展语法。我们推荐在react中使用JSX，使用JSX描述UI。

const element = 
Hello, world!
;

JSX中嵌入表达式

在JSX中，可以在大括号里嵌入表达式，与vue中的双大括号作用类似

在JSX中指定属性

指定静态属性值

const element = 
    
;

在大括号中指定动态属性值

const user = {avatarUrl:'images/a.jpg'};const element = ;

JSX结构

单标签，如果没有结束标签在开始标签的中加闭合

const element = ;

jsx可以存在子标签

const element = (  
    
    
     
Hello!
    
     
Good to see you here.
  
    
);

JSX可以防止注入攻击

默认情况下，React DOM在呈现它们之前转义JSX中嵌入的任何值。在呈现前，所有内容被转换为字符串。

//假设name的值从其他地方获取，动态dom    let name =
terry
;    let dom = 
    
      {name}
    
        ReactDOM.render(         dom,      document.getElementById('app')    );

浏览器将会显示 [object Object]

JSX本质

JSX实际上会被编译为一个JS对象

const element = (  
    Hello, world!  
);

等价于

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

我们把这种对象成为“React elements”.React读取这些对象并且使用这些对象构造DOM，保持更新

到此，我们了解了JSX基本语法。接下来，我们学习react的组件