React-[入門篇]-加入更多元件到React Pizza專案


我們繼續回到以CRA所建立的React Pizza專案上
上篇我們透過CRA建立專案,都集中在index.js中撰寫程式碼,加入食譜資料並創建Pizza元件

繼續加入更多元件在index.js中

我們繼續創建Header Menu Footer元件

Header 元件


顯示出來了!

Footer 元件(不寫JSX的方式)

用React.createElement()函式來return建立外觀

真的也可以噎!但真的不好閱讀

Footer 元件(寫JSX的方式)



現在就可以體會到JSX語法的好用,完美結合了html 和 js語法並存

Menu 元件


元件中可以寫入自己的邏輯流程

記得這張圖:

元件中可以寫入自己的邏輯流程

#React入門 #JSX(JS&HTML)







你可能感興趣的文章

JavaScript 學習筆記 - Conversior

JavaScript 學習筆記 - Conversior

v-bind 動態屬性指令

v-bind 動態屬性指令

Gatsby程序化產生頁面

Gatsby程序化產生頁面






留言討論