JSX語法 1. 如要要使用 JSX 語法，必須先運行 ，然後再 中添加 語法配置； babelrc配置 webpack中配置 2. JSX語法的本質：還是以 React.createElement 的形式來實現的，並沒有直接把 用戶寫的 HTML代碼，渲染到頁面上； 3. 如果要在 JSX 語法內 ...
JSX語法
- 如要要使用 JSX 語法，必須先運行
cnpm i babel-preset-react -D，然後再.babelrc中添加 語法配置；
babelrc配置
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}webpack中配置
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:5]'] }, // 通過 為 css-loader 添加 modules 參數，啟用 CSS 的模塊化
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000' },
{ test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
]
}- JSX語法的本質：還是以 React.createElement 的形式來實現的，並沒有直接把 用戶寫的 HTML代碼，渲染到頁面上；
- 如果要在 JSX 語法內部，書寫 JS 代碼了，那麼，所有的JS代碼，必須寫到 {} 內部；
- 當 編譯引擎，在編譯JSX代碼的時候，如果遇到了
<那麼就把它當作 HTML代碼去編譯，如果遇到了{}就把 花括弧內部的代碼當作 普通JS代碼去編譯； - 在{}內部，可以寫任何符合JS規範的代碼；
- 在JSX中，如果要為元素添加
class屬性了，那麼，必須寫成className，因為class在ES6中是一個關鍵字；和class類似，label標簽的for屬性需要替換為htmlFor. - 在JSX創建DOM的時候，所有的節點，必須有唯一的根元素進行包裹；
- 如果要寫註釋了，註釋必須放到 {} 內部
var myH1 = React.createElement('h1', null, '這是一個大大的H1')
var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '這是一個div', myH1)由於，React官方，發現，如果直接讓用戶手寫 JS 代碼創建元素，用戶會瘋掉的，然後，用戶就開始尋找新的前端框架了，於是，
React 官方，就提出了一套 JSX 語法規範，能夠讓我們在 JS 文件中，書寫類似於 HTML 那樣的代碼，快速定義虛擬DOM結構；
問題： JSX（符合 XML 規範的 JS 語法）的原理是什麼？？？
註意： 千萬要記住，哪怕你在 JS 中可以寫 JSX 語法了，但是，JSX內部在運行的時候，也是先把 類似於HTML 這樣的標簽代碼，
轉換為了 React.createElement 的形式；
也就是說：哪怕我們寫了 JSX 這樣的標簽，也並不是直接把 我們的 HTML 標簽渲染到頁面上，而是先轉換成 React.createElement 這樣的JS代碼，再渲染到頁面中；（JSX是一個對程式員友好的語法糖）
如果要直接使用 JSX 語法，需要先安裝相關的 語法轉換工具
運行 cnpm i babel-preset-react -D
var mytitle = '這是使用變數定義的 tilte 值'
var arr = []
for (var i = 0; i < 10; i++) {
var p = <p className="myp" key={i}>但是，你知道它的本質嗎？？？</p>
arr.push(p)
}
var mydiv = <div>
這是使用 jsx 語法創建的div元素
<h1 title={mytitle + 'aaaaa'}>哈哈哈，JSX真好用啊</h1>
<p className="myp">但是，你知道它的本質嗎？？？</p>
<label htmlFor=""></label>
{arr}
/* 這是多行註釋，你肯定看不到我 */
{
// zheshi zhushi
}
{ /* 這是註釋 */ }
{/* 1234 */}
/* 註釋也必須用{}括起來*/
</div>
ReactDOM.render(myDiv,document.getElementById('app'))// var name = 'zs'
// var age = 20
var person = {
name: 'ls',
age: 22,
gender: '男',
address: '北京'
}
// 註意： ReactDOM.render() 方法的第二個參數，和vue不一樣，不接受 "#app" 這樣的字元串，而是需要傳遞一個 原生的 DOM 對象
ReactDOM.render(<div>
{/* <Hello name={person.name} age={person.age} gender={person.gender} address={person.address}></Hello> */}
<Hello {...person}></Hello>
</div>, document.getElementById('app'))
// 註意：這裡 ...Obj 語法，是 ES6中的屬性擴散， 表示，把這個對象上的所有屬性，展開了，放到這個位置
