目錄
1、JSX 簡介
通過上一篇博客的 +1 個小應用，我們能體會到，和 Vue 相比代，用 React 寫一個這麼小的應用比較麻煩，而且代碼比較混亂。接觸過 Vue 的開發者應該知道，Vue 有兩個構建版本，如果單獨使用非完整版其實和上述用 React 實現 +1 的小應用相比並不會有多大優勢，也就多一個視圖自動刷新的便捷性。
但是 Vue 非完整版可以配合 vue-loader，這使得開發人員可在 .vue 文件中寫 <template><script><style>，這些內容最終會被 vue-loader 變成一個構造選項或組件，既可滿足用戶使用體積小，又能提高開發人員的效率。那 React 有什麼類似 vue-loader 的加載器或插件，以提高開發人員的體驗 ？— 那就是 JSX，JSX 是 JavaScript 的擴展，它就是彌補 React 代碼相對混亂的問題。
React 提供了 JSX 來提高開發人員的體驗，和 Vue 相似，開發人員只需要在 .js 文件中寫一下 html 代碼，剩下的就交給 jsx-loader，它會將這些開發人員寫的條例相對清晰的代碼編譯成 React.createElement(...) 形式的代碼。React 在早些年間會使用 jsx-loader 來完成轉義，但是近幾年它被 babel-loader 取代了，而 babel-loader 被 webpack 內置了，所以 React 的開發者不需要安裝任何東西。那這個玩意怎麼使用呢？
2、如何引入 babel
1.1、通過 BootCND 引入 babel：
引入 babel.min.js 後，需要在每次寫 JavaScript 時把 <script>改成<script type="text/babel'">，babel 會自動將 babel 類型的代碼進行轉譯（可以理解爲翻譯），下面我們結合上 babel 重新實現 +1 的小應用。
<div id="root"></div>
<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script type="text/babel"> //babel-loader會去翻譯這段babel代碼，對其解析成js並塞入script對babel標籤進行替換
let num = 0;
const App = () => ( //App 必須是一個函數，不然手動刷新視圖會出問題
<div className="red"> //不需要 React.createElement('div', {className: 'red'}, [n, React.createElement()])
{n} //變量使用 {} 包裹起來即可
<button
onClick={() => {
num += 1;
render(); //變量改變後，需要手動刷新視圖
}}
>
+1
</button>
</div>
);
const render = () => ReactDOM.render(<App />, document.querySelector("#root"));
render(); //這裏的 <App /> 和 App()類似，現在就可以通過組件的形式對其進行調用了
</script>
結合上 babel-loader 之後代碼簡介了不少，所有的標籤都可以用 html 標籤寫，如果你需要插入 js 變量或函數，就用 {} 包裹起來，相比之前創建便籤需要使用 React.createElement() 的方式簡單太多了。現在和 Vue 相比起來好像還簡單了不少，因爲所有的東西都是 JavaScript 原有的，而 Vue 要實現變量還需要 data 屬性，實現點擊函數還需要 v-on 指令。
但是這種 BootCDN 的方式不太推薦，這是忠告。永遠不要再生產環境使用這種 BootCDN 的方式，因爲效率太低了，而且它要在用戶的機器上下載一個 babel.min.js，它還要在瀏覽器端把 JSX 翻譯成 JS，爲什麼不在 build 的時候做呢？
1.2、使用 create-react-app 的方式
這個 React 的 create-react-app 命令行和 Vue 的 VueCLI 是同一性質的東西，安裝及創建項目的方式如下：
yarn global add create-react-app //或者npm，由於內容比較大推薦使用 yarn
create-react-app ProjectName //類似於 Vue 的 vue create ProjectName
//創建完成之後可以到項目目錄中運行 yarn start 命令，可以看到 React 的網頁就說明項目創建成功了
通過 create-react-app 創建的項目目錄可能會比較多，爲了方便學習可以將 index.js 之外的文件都刪掉：
<div id="root"></div> //index.html
//App.js
import React from 'react'
const App = () => { //雖然是js文件，但卻可以寫babel代碼
return (
<div>App組件</div> //babel語法內其實還是調用了React.createElement()，所以需要引入React
)
}
export default App
//index.js 文件
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render(<App />, document.getElementById('root')); //yarn start 可看到 hi 頁面
上述代碼我們可以注意到，在 App.js 文件中寫的確實 babel 的代碼，這是因爲 webpack 讓 JS 默認走 babel-loader。
- className 屬性。在創建組件的過程中，如果一個標籤有 class 屬性，則需要寫 className="red" 代碼，原因是我們寫的 jsx 語法最終需要被 bebel-loader 轉義成 js，js 中的代碼是通過 React.createElement('div', {className:'red'}, [n]) 的方式創建組件的。
- 插入變量。標籤裏面的所有 JS 代碼都要用 { } 包裹起來.，如果你需要變量 n，那麼就用 { } 把 n 包起來，如果你需要對象，那麼就要用 { } 把對象包起來，如 { {name:'erha'} }。
- 在創建組件的過程中，內部需要 return 時，一定在 return 後面加上 () 。
3、現在和 Vue 進行對比
Vue 非完整版有 v-loader 的幫助，可以將 html 轉義成 render 函數，而 React 有了 babel-loader 的幫助，也可以在 js 文件中寫 html 標籤了，現在看來二者在開發的便捷性上不相上下。比如我們可以通過一個 if-else 的例子來分析一下：
//Vue
<template>
<div>
<div v-if="n%2===0">n是偶數</div>
<span v-else>n是奇數</span>
</div>
</template>
//React
const Component = () => {
return ( //這個括號千萬不能丟了
<div>
{ n%2===0 ? <div>n是偶數</div> : <span>n是奇數</span> } //js 語法用 {} 包裹
</div>
)
}
//React
const Component = () => {
const inner = n%2===0 ? <div>n是偶數</div> : <span>n是奇數</span>
return (
<div>
{ inner } //由此可見，React更加靈活，只要是 js代碼，怎麼寫都可以
</div>
)
}
結論：Vue：只能用 Vue 提供的 v-if/v-else 語法寫條件判斷，但是條例會非常清晰。React：只要是 JavaScript 代碼，想怎麼寫就怎麼寫，非常靈活，但是條例可能不如 Vue 清晰。再比如循環語句在兩種框架中的寫法對比：
//在Vue裏可以遍歷數組和對象
<template>
<div>
<div v-for="(n, index) in numbers" :key="index">
下標{{index}}，值爲{{n}}
</div>
</div>
</template>
//React
const Component = (props) => {
return (
<div>
{ props.numbers.map((n,index) => {return <div>下標{index} 值爲{n} )}
</div>
)
</div>）