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 參數(shù),，啟用 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語法的本質(zhì)：還是以 React.createElement 的形式來實現(xiàn)的,，并沒有直接把 用戶寫的 HTML代碼，渲染到頁面上,；
- 如果要在 JSX 語法內(nèi)部,，書寫 JS 代碼了，那么,，所有的JS代碼,，必須寫到 {} 內(nèi)部；
- 當(dāng) 編譯引擎,，在編譯JSX代碼的時候,，如果遇到了
<那么就把它當(dāng)作 HTML代碼去編譯，如果遇到了 {} 就把 花括號內(nèi)部的代碼當(dāng)作 普通JS代碼去編譯,； - 在{}內(nèi)部,，可以寫任何符合JS規(guī)范的代碼；
- 在JSX中,，如果要為元素添加
class屬性了,，那么，必須寫成className,，因為 class在ES6中是一個關(guān)鍵字,；和class類似，label標(biāo)簽的 for 屬性需要替換為 htmlFor. - 在JSX創(chuàng)建DOM的時候,，所有的節(jié)點,，必須有唯一的根元素進行包裹；
- 如果要寫注釋了,，注釋必須放到 {} 內(nèi)部
var myH1 = React.createElement(''h1'', null, ''這是一個大大的H1'')var myDiv = React.createElement(''div'', { title: ''this is a div'', id: ''mydiv'' }, ''這是一個div'', myH1)
由于,，React官方，發(fā)現(xiàn)，如果直接讓用戶手寫 JS 代碼創(chuàng)建元素,，用戶會瘋掉的,，然后，用戶就開始尋找新的前端框架了,，于是,，
React 官方，就提出了一套 JSX 語法規(guī)范,，能夠讓我們在 JS 文件中,，書寫類似于 HTML 那樣的代碼，快速定義虛擬DOM結(jié)構(gòu),；
問題： JSX（符合 XML 規(guī)范的 JS 語法）的原理是什么,？？,？
注意： 千萬要記住,，哪怕你在 JS 中可以寫 JSX 語法了，但是,，JSX內(nèi)部在運行的時候,，也是先把 類似于HTML 這樣的標(biāo)簽代碼，
轉(zhuǎn)換為了 React.createElement 的形式,；
也就是說：哪怕我們寫了 JSX 這樣的標(biāo)簽,，也并不是直接把 我們的 HTML 標(biāo)簽渲染到頁面上，而是先轉(zhuǎn)換成 React.createElement 這樣的JS代碼,，再渲染到頁面中,；（JSX是一個對程序員友好的語法糖） 如果要直接使用 JSX 語法，需要先安裝相關(guān)的 語法轉(zhuǎn)換工具
運行 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}>但是,，你知道它的本質(zhì)嗎,？？,？</p> arr.push(p)}var mydiv = <div> 這是使用 jsx 語法創(chuàng)建的div元素 <h1 title={mytitle + ''aaaaa''}>哈哈哈,，JSX真好用啊</h1> <p className="myp">但是，你知道它的本質(zhì)嗎,？,？？</p> <label htmlFor=""></label> {arr} /* 這是多行注釋,，你肯定看不到我 */ { // zheshi zhushi } { /* 這是注釋 */ } {/* 1234 */}/* 注釋也必須用{}括起來*/</div>ReactDOM.render(myDiv,document.getElementById(''app''))
// var name = ''zs''// var age = 20var person = { name: ''ls'', age: 22, gender: ''男'', address: ''北京''}// 注意： ReactDOM.render() 方法的第二個參數(shù),，和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中的屬性擴散,， 表示，把這個對象上的所有屬性,，展開了,，放到這個位置
|
