jsx基本语法
JSX
JSX 全稱 JavaScript XML ，是一種擴(kuò)展的 JavaScript 語(yǔ)言，它允許 HTML 語(yǔ)言直接寫在 JavaScript 語(yǔ)言中，不加任何引號(hào)，這就是 JSX 語(yǔ)法。它允許 HTML 與 JavaScript 的混寫。
-
Introducing JSX
-
JSX In Depth
-
React Without JSX
環(huán)境配置
-
非模塊化環(huán)境
-
babel-standalone
-
執(zhí)行時(shí)編譯，速度比較慢
-
只適用于開(kāi)發(fā)測(cè)試環(huán)境
-
-
模塊化環(huán)境
-
結(jié)合 webpack 配置 babel 響應(yīng)的工具完成預(yù)編譯
-
瀏覽器執(zhí)行的是預(yù)編譯結(jié)果
-
-
Babel REPL 賦值查看編譯結(jié)果
-
使用在線測(cè)試
-
基本語(yǔ)法規(guī)則
-
必須只能有一個(gè)根節(jié)點(diǎn)
-
多標(biāo)簽寫到包到一個(gè)小括號(hào)中，防止 JavaScript 自動(dòng)分號(hào)不往后執(zhí)行的問(wèn)題。
-
遇到 HTML 標(biāo)簽 （以 < 開(kāi)頭） 就用 HTML 規(guī)則解析
-
單標(biāo)簽不能省略結(jié)束標(biāo)簽。
-
-
遇到代碼塊（以 { 開(kāi)頭），就用 JavaScript 規(guī)則解析
-
JSX 允許直接在模板中插入一個(gè) JavaScript 變量
-
如果這個(gè)變量是一個(gè)數(shù)組，則會(huì)展開(kāi)這個(gè)數(shù)組的所有成員添加到模板中
-
-
單標(biāo)簽必須結(jié)束 />
基本語(yǔ)法：
const element = <h1>Hello, world!</h1>; <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jsx語(yǔ)法</title> </head> <body><div id="app"></div><script src="node_modules/@babel/standalone/babel.js"></script><script src="node_modules/react/umd/react.development.js"></script><script src="node_modules/react-dom/umd/react-dom.development.js"></script><script type="text/babel">// const element = <h1>Hello, react!</h1>// 換行或者多標(biāo)簽，推薦加 ()// const element = (// <div>// <h1>hello react</h1>// <p>aaa</p>// </div>// )// function getTitle () {// // JavaScript 語(yǔ)法，return 就不往后執(zhí)行了// return (// <div>// <h1>hello</h1>// <p>haha</p>// </div>// )// }// const element = getTitle()ReactDOM.render(element,document.getElementById('app'))</script> </body> </html>?
總結(jié)
- 上一篇： hello-world
- 下一篇： 在jsx中绑定js表达式以及jsx注释