Question

3.1 JSX 简介

JSX 其是一个语法扩展，它既不是单纯的字符串，也不是 HTML ，虽然长得和 HTML 很像甚至基本上看起来一样。但事实上它是 React 内部实现的一种，允许我们直接在 JS 里书写 UI 的方式

3.2 JSX 属性

JSX 的标签同样可以拥有自己的属性

const title = <h1 id="main">React Learning</h1>

// 注意是 className 而不是 class
const title = <h1 className="main">React Learning</h1>

3.3 JSX 嵌套

JSX 的标签也可以像 HTML 一样相互嵌套，一般有嵌套解构的 JSX 元素外面，我们习惯于为它加上一个小括号

const title = (
    <div>
        <h1 className="main">React Learning</h1>
        <p>Let's learn JSX</p>
    </div>
)

需要注意的是， JSX 在嵌套时，最外层有且只能有一个标签，否则就会出错

// 这是一个错误示例
const title = (            
    <h1 className="main">React Learning</h1>
    <p>Let's learn JSX</p>
)

3.4 JSX 表达式

在 JSX 元素中，我们同样可以使用 JavaScript 表达式，在 JSX 当中的表达式需要用一个大括号括起来

function sayhi(name) {
  return 'Hi,' + name
}

const title = (
    <div>
        <h1 className="main">React Learning</h1>
        <p>Let's learn JSX. <span>{sayhi('you')}</span></p>
    </div>
)