用於react 中的JSX語法配置方法

什麼是jsx語法：就是符合 xml 規範的 js 語法；（語法格式相對來說，要比html嚴謹很多）

安裝能夠識別轉換jsx語法的包,就是將jsx轉化為js@babel/preset-react

新增.babelrc配置檔案

module:

]}

jsx 語法的本質：並不是直接把 jsx 渲染到頁面上，而是 內部先轉換成了 createelement 形式，再渲染的；

在 jsx 中混合寫入 js 表示式：在 jsx 語法中，要把 js**寫到中

例如:

// 使用react這個包，用來建立元件和虛擬dom元素
import react from
"react"
;// react-dom這個包，主要用來實現dom操作，必須把元件或虛擬dom元素渲染到頁面指定的容器中
import reactdom from
"react-dom"
;const n1 =
100let boo =
false
const tstr =
'abcd'
const arr1 =
['a'
,'b'
,'c'
,'d'
]const newarr =
arr1.
foreach
((item, i)
=>
>
<
/h4>
newarr.
push
(h4)})
const mydiv =
("aaa"
>
<
/p>
-------
<
/p>
<
/p>
>這是按鈕<
/button>
<
/div>);
reactdom.
render
(mydiv, document.
getelementbyid()
);

在jsx建立dom的時候，所有的節點，必須有唯一的根元素進行包裹；

在 jsx 語法中，標籤必須 成對出現，如果是單標籤，則必須自閉和！

當 編譯引擎，在編譯jsx**的時候，如果遇到了<那麼就把它當作 html**去編譯，如果遇到了{}就把 花括號內部的**當作 普通js**去編譯；

React之jsx語法特性

jsx 語法，直接可以在js中使用html標籤。還可以通過花括號的形式，在html標籤中，寫js表示式。hello,world！事件是大寫 addreact中的程式設計思想是，面向資料程式設計。只要定義資料就ok了，資料變了，頁面展示的內容就會變了。react刪除不需要操作dom，只需要運算元據就可...

04 react中jsx語法展示資料

1 獲取根節點 var root document.getelementbyid root 資料 var name 妲己 2 建立虛擬dom 資料繫結使用單花括號 var obj 在花括號使用字串遵循js語法 var obj img標籤 所有的單標籤必須有關閉標籤 var obj 動態classna...

React中Jsx的介紹

優點 jsx執行更快 型別更安全，編譯過程如果出錯就不能編譯 jsx編寫模板更加簡單快速 jsx表示式 由html元素構成 中間如果需要插入變數用 中間可以使用表示式 中間表示式中可以使用jsx物件 屬性和html內容一樣都是用 來插入內容 jsx樣式 1.class中不可以存在多個class屬性 ...