JSX 简介

1 
const element = <h1>Hello, world!</h1>;

JSX 是 JavaScrip 的一种扩展语法，用来描述 UI 信息。

插入图片

每一个 JSX element 其实就是 React.createElement 的语法糖；

在 React 里面，我们推荐使用 JSX 来描述我们的 UI ，因为可以快速帮我们定位 JS 代码里面的 UI 部分。

1 2 3 4 
const h1 = document.createElement("H1");const textNode = document.createTextNode("Hello World");h1.appendChild(textNode);document.body.appendChild(h1);

1 2 3 4 5 6 7 8 9 
import React from 'react';import ReactDOM from 'react-dom'; const title = React.createElement('h1', {}, 'Hello, ZZAX'); ReactDOM.render(    title,    document.getElementById('global'));

1 2 3 4 5 6 7 8 9 
import React from 'react';import ReactDOM from 'react-dom'; const title = <h1>Hello, world!</h1>; ReactDOM.render(    title,    document.getElementById('global'));

在 JSX 中嵌入表达式

1 2 3 4 5 6 7 8 9 10 
import React from 'react';import ReactDOM from 'react-dom'; const name = 'ZZAX';const element = <h1>Hello, {name}</h1>; // <h1>Hello, ZZAX</h1>; ReactDOM.render(    element,    document.getElementById('global'));

用 JSX 指定属性值

1 2 3 4 5 6 7 8 9 10 
import React from 'react';import ReactDOM from 'react-dom'; const imgUrl = 'https://media2.fdncms.com/stranger/imager/u/original/23847286/grabbag-570.jpg';const element = <img src={imgUrl} className = "active"></img>; ReactDOM.render(    element,    document.getElementById('global'));

用 JSX 指定子元素

1 2 3 4 5 6 7 8 9 10 11 12 13 14 
import React from 'react';import ReactDOM from 'react-dom'; const element = (    <div>        <h1>Hello!</h1>        <h2>Good to see you here.</h2>    </div>); ReactDOM.render(    element,    document.getElementById('global'));