現在 render() 里的代碼是這樣的:
src/pages/Detail.js

return <p>Hello, {chance.first()}!</p>;

在大括號里的ES6代碼將會在編譯時執行，將其返回值填入render，所以當你每次刷新頁面都會看到隨機的名字。
不過這段代碼實際上是一種非常特殊的代碼，稱為表達式，相對于另一種可以創建變量或者去執行其它類型操作的語句，它粗略的表示它可以直接表示為一個值。
其實區別不大，不過相信我：這些區別這很重要。因為你只能在JSX中使用表達式，不能使用所有的代碼。比如{this.props.message} 和 {chance.first()}都是合法的，但是下面的代碼就不合法：

{if (chance.first() === 'John') { console.log('Got John');
} else { console.log('Got someone else'); } }

說明一下, === 是JavaScript中推薦的比較兩個值的運算符; 如果你現在用 ==那你得趕緊換了,因為==會對兩個對比的值進行轉義，===并不會，被稱為嚴格相等。
現在你可能會想：“不允許寫這種代碼真是太好了，它太難懂了。”確實如此，你不能在JSX中使用if/else語句，但是JavaScript是一種非常松散的類C語言，意味著它繼承了三元運算符來代替if/else。
也就是說，有可以在JSX中使用的if/else的替代品，它有很嚴格的語法：
src/pages/Detail.js

{chance.first() === 'John' ? console.log('Got John')
: console.log('Got someone else') }

可能加上縮進會更清楚一些：
src/pages/Detail.js

{
    chance.first() == 'John'
    ? console.log('Got John')
    : console.log('Got someone else')
}

如果你想的話可以把他加到組件中，但這只是演示例子，用完就刪掉了。

兩個括號不用解釋，不過其中有一些新的東西，稱為三元表達式，因為它是由三部分組成：條件：(chance.first() == 'John')，如果條件為真則執行(console.log('Got John'))
如果條件為假則執行(console.log('Got someone else')).

重要的部分是問號和冒號：條件為真執行的語句在問號后，條件為假執行的語句在冒號后。看起來有點難以理解不是么，不過只有這樣才能在JSX中使用if/else，不管你喜不喜歡，在接下來的react代碼里，你會看到到處都是三元表達式。

更糟糕的是，你會經常看到嵌套的三元表達式包含著一堆問號冒號，形成一個真假樹。JSX允許這樣，不過我敢肯定日內瓦公約都不允許這樣寫,最好別這么做。

不過在JSX中寫三元表達式的好處是，他們的返回值會直接放到輸出里。比如：

src/pages/Detail.js

render() {
    return <p>
    {
        chance.first() == 'John'
        ? 'Hello, John!'
        : 'Hello, world!'
    }
    </p>;
}

在這個例子中，三元表達式的真假判斷后執行的部分只有一個字符串，這些字符串會被傳回JSX中， 被渲染成p標簽。
所以準備好使用這些三元表達式，而且他們經常寫在一行，不過這種寫法很容易被濫用。