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)







你可能感興趣的文章

Vue.js 學習旅程Mile 12 – Conditional Rendering 條件渲染篇:v-if、v-show

Vue.js 學習旅程Mile 12 – Conditional Rendering 條件渲染篇:v-if、v-show

後端好朋友 Express middleware

後端好朋友 Express middleware

Eclipse編輯窗口的奇怪字符

Eclipse編輯窗口的奇怪字符






留言討論