react：JSX
什么是react?
用于構(gòu)建用戶界面的JavaScript庫。
什么是JSX？
React 使用 JSX 來替代常規(guī)的 JavaScript。JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
我們不需要一定使用 JSX，但它有以下優(yōu)點：
JSX 執(zhí)行更快，因為它在編譯為 JavaScript 代碼后進行了優(yōu)化。
它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯誤。
使用 JSX 編寫模板更加簡單快速。
我們先看下以下代碼：
const element =<h1>Hello, React!</h1>;
這種看起來可能有些奇怪的標簽語法既不是字符串也不是 HTML，它被稱為 JSX， 一種 JavaScript 的語法擴展。我們推薦在 React 中使用 JSX 來描述用戶界面。JSX 是在 JavaScript 內(nèi)部實現(xiàn)的。
我們知道元素是構(gòu)成 React 應(yīng)用的最小單位，JSX 就是用來聲明 React 當中的元素。
說了這么多，接下來我們來具體地去使用JSX！
創(chuàng)建項目
第一步，通過腳手架的命令“npx create-react-app hello-jsx”來創(chuàng)建一個react項目。
第二步，進入“hello-jsx”文件夾執(zhí)行“npm start”命令，啟動項目，當瀏覽器出現(xiàn)以下界面說明我們創(chuàng)建成功了！
Hello，JSX
每學(xué)習(xí)一門技術(shù)，我們總是會習(xí)慣性地打印“Hello，World”，這次也不例外。首先我們在項目的src文件夾下找到index.js文件，把里面全部刪掉，編寫我們的代碼。
1、導(dǎo)入react
import React from 'react'
import ReactDOM from 'react-dom'
2、使用JSX創(chuàng)建react元素
const title = (<h1 ?className="title">hello JSX</h1>)
3、渲染react元素
ReactDOM.render(title, document.getElementById('root'))
ok，編寫完成，是不是比react寫的代碼簡單得多了，完整代碼如圖所示
打開瀏覽器檢驗效果！
JavaScript表達式
我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。
1、我們創(chuàng)建一個變量name
const name ?= 'JSX'
2、在創(chuàng)建react元素的時候，我們用花括號{}接收。
const title = (<h1 ?className="title">hello {name}</h1>)
完整代碼如圖所示。
條件渲染
我們可以使用if語句、三元運算表達式和“&&”用來做條件渲染，由于if和三元運算差不多，這里只寫三元運算表達式和“&&”。
1、創(chuàng)建一個變量
const isLoading = true
2、創(chuàng)建一個函數(shù)
const loadData = () => { ?
????return isLoading ? (<div>loading...</div>) : (<div>數(shù)據(jù)加載完成</div>)
}
3、使用JSX創(chuàng)建react元素
const title = (<h1 className='title'>條件渲染：{loadData()}</h1>)
4、渲染react元素
ReactDOM.render(title, document.getElementById('root'))
完整代碼如圖所示。
“&&”也可以實現(xiàn)同樣的效果，寫法如下所示。
const loadData = () => { ?
????return isLoading && (<div>loading...</div>)?
}
列表渲染
1、創(chuàng)建列表
const plays = [
?
????{id: 1, name : "打球"},
?
????{id: 2, name : "跳舞"},
?
????{id: 3, name : "唱歌"},?
]
2、使用JSX創(chuàng)建react元素
const list = ?( ? ?
????<ul> ? ? ?
????{plays.map(item => <li key={item.id}>{item.name}</li>)} ? ?
????</ul>?
)
3、渲染react元素
ReactDOM.render(list, document.getElementById('root'))
完整代碼如圖所示。
設(shè)置樣式
1、引入外部css文件
import './index.css'
2、創(chuàng)建react元素
const title = (<h1 ?className="title">hello JSX</h1>)
3、渲染react元素
ReactDOM.render(title, document.getElementById('root'))
完整代碼如圖所示。
ok，在本文我們學(xué)習(xí)了如何用JSX實現(xiàn)一些簡單的應(yīng)用，包括：
javaScript表達式
條件渲染
列表渲染
設(shè)置樣式
寫在最后
好兄弟可以點贊并關(guān)注我的公眾號“javaAnswer”，全部都是干貨。
