從零開始學React 3 簡單介紹JSX語法糖

jsx不能直接執行，是被babel-loader中的react這個preset翻譯的

翻譯前

class

extends
react.component
}

需注意事項：

①需要被乙個單獨的標籤包裹，例如div或者section，以下**就是錯誤的

render()

return

(<
/h1>
<
/h2>
<
/div>
)②標籤必須封閉
③class要寫成classname，for要寫成htmlfor
錯誤演示：
return
(="buttongroup"
>
<
/div>
)改正後：
return
("buttongroup"
>
<
/div>
)④html注釋不能使用，只能使用js注釋
jsx中可以用{}來表示臨時插入乙個簡單的js表示式，不能是if、for等複雜結構，可以是&&、||短路語法
原生標籤比如p、li、div中，如果要使用自定義屬性，必須使用data-字首，例如
return
("12312"
>
<
/div>
)但如果是自定義標籤，則可隨意自定義屬性
jsx表示式用{}包裹，在jsx中不能使用if else 語句，但可以使用三元運算表示式來替代
可執行函式
class
extends
react.compontent
render()
<
/div>)}
}

class

extends
react.compontent
else
if(name ==
'test')}
render()
<
/div>)}
}

class

extends
react.compontent
render()
}>
<
/div>
>
<
/div>
<
/div>
}}jsx允許直接使用陣列，如果陣列中是jsx語法的話，會被自動展開，並不需要v-for或ng-repeat這樣的指令展開陣列
class
extends
react.compontent
>
<
/li>
}render()
<
/ul>
}}

從零開始學編碼3

從零開始學編碼1中我們對編碼這個概念進行了了解。在從零開始學編碼2中學習了基本的電路知識。這篇我們說一說進製數。在遠古時期，人類便有了計數的需求，看著自己的手指，大拇指代表乙個蘋果，食指代表第二個蘋果，中指代表的第三個蘋果 好吧人類只有十根手指，可能只能做十以內的計數，後來人的思維能力發散，有了邏輯...

react從零開始 五

1 在本地起服務的時候,官方腳手架預設的是埠是3000,這樣也就意味的如果3000埠被占用,就無法啟動另乙個專案,這時候只需要修改package.json檔案的中的 start set port 4000 react scripts start 增加了set port 埠號 像上面這樣就不會產生衝突...

從零開始學習react

react.createlement tag,content class shoppinglist extends react.component return 我們可以把兩者結合起來，使 react 的 state 成為 唯一資料來源 渲染表單的 react 元件還控制著使用者輸入過程中表單發生的...