開始使用JSX
JSX是React引入的一個技術。讓我們深入了解一下。 JSX簡介 JSX入門 轉譯JSX JS in JSX 在JSX中使用HTML 您需要關閉所有標籤 駱駝命名法是新的標準 class變成className style屬性改變其語義 表單 React中的CSS 為什麼這比純CSS / SASS / LESS更受青睞？ 這是首選解決方案嗎？ JSX中的表單 value屬性和defaultValue屬性 更一致的onChange事件 JSX自動轉義 JSX中的空格 水平空格被修剪為1個 垂直空格被消除 在JSX中添加註釋 擴展屬性 如何在JSX中進行循環 JSX簡介 JSX是由React引入的一項技術。 儘管React在不使用JSX的情況下也可以正常工作，但它是與組件一起工作的理想技術，因此React從JSX中獲益良多。 起初，您可能會認為使用JSX就像混合HTML和JavaScript（以及CSS）。 但事實並非如此，因為使用JSX語法時，實際上是用JavaScript編寫一個組件UI的聲明語法。 您使用的不是字符串描述UI，而是使用JavaScript，這使您能夠做許多好事。 JSX入門 以下是如何定義包含字符串的h1標籤的示例： const element = <h1>Hello, world!</h1> 它看起來像JavaScript和HTML的奇怪混合，但實際上它是完全的JavaScript。 看起來像HTML，實際上是為了定義組件以及它們在標記中的定位而添加的語法糖。 在JSX表達式中，可以非常容易地插入屬性： const myId = 'test' const element = <h1 id={myId}>Hello, world!</h1> 只需注意，當屬性具有連字符（-）時，它會轉換為駝峰命名法。還有兩種特殊情況： class變成className for變成htmlFor 這是因為它們是JavaScript中的保留字。 以下是一個將兩個組件包裝到div標籤中的JSX片段的示例： <div> <BlogPostsList /> <Sidebar /> </div> 標籤始終需要關閉，因為這更像是XML而不是HTML（如果您還記得XHTML的日子，這將是熟悉的，但此後採用了HTML5鬆散語法）。在這種情況下，使用了自閉標籤。 請注意，我將2個組件包裝到div中。為什麼？因為**render()函數只能返回單個節點**，所以如果您要返回2個兄弟節點，只需添加一個父節點。它可以是任何標籤，不僅僅是div。 轉譯JSX 瀏覽器無法執行包含JSX代碼的JavaScript文件。它們必須首先轉換為常規JS。...